0

Please correct me if I'm getting this wrong. If I understand it correctly I don't have to use aria-hidden for elements that basically are available in the source of the document, however are not always shown.

For example, an image slider or a menu or tooltip that are there in the document source(basically they are available), but not always presented visually to the user on the display.

Because it sounds weird to me I don't have to use ARIA for this things in order to meet WCAG 2.0

unor
  • 92,415
  • 26
  • 211
  • 360
yohohoy
  • 33
  • 4

1 Answers1

2

You do not need to use aria-hidden to meet WCAG. You can use it to meet WCAG. You can also use it and accidentally violate WCAG.

If you want to visually display something but hide it from assistive technology (screen readers in this case), then aria-hidden may be the best option.

If you want to hide something visually and from assistive technology, then skip the aria-hidden and just style it with display:none;.

If you want to hide an element's native semantics (such as legacy layout tables) but otherwise display everything within, then role=presentation is the way to go.

Importantly, do not use aria-hidden to hide something that otherwise needs to receive focus or be interactive (per the Fourth Rule of ARIA). Doing that would violate WCAG.

So, for example, if you have a tool-tip style design element that is hidden with display:none; when not in use, skip the aria-hidden. It is just extra noise and an additional place your code can become inaccessible if you fail to update it with the visual style.

aardrian
  • 8,581
  • 30
  • 40
  • So it will pass the wcag2 if I'll use `display:none` and `display:block`. BTW: how should I inform the user when I switch from `display:none` to `display:block` and focus on it? I mean is there any rules for this? Because I think if the user is using AT it may cause problems to him. Like: "where the hell is this coming from?". Thanks, aardrian! :) – yohohoy Dec 03 '16 at 09:30
  • No, just because you use `display` styles does not mean it will or will not pass a particular WCAG SC. Just as you do not necessarily need `aria-hidden` to pass a particular WCAG SC. What I am saying is that you are not required to use `aria-hidden` just to pass a SC. As for your second question, you need to manage focus well and place it on the rigth element. Ideally you warn the user accordingly. – aardrian Dec 03 '16 at 23:11
  • Yeah, because the WCAG 2.0 isn't about specific techniques, but yet, in cases like this you MUST use something to inform the user about hidden/visible status, right? So the only ways are the `aria-hidden` or `display:none/block`. Correct? As about the warning the user accordingly, I couldn't find anything except the `live-region`. I assume I need to warn him with this? For example, the when navigation menu is revealed, I should move the focus to the first link in it and also use `aria-live=polite` for the entire menu block. Correct? :) – yohohoy Dec 04 '16 at 11:56
  • No, you do not need to inform the user that something is hidden. You can also hide something like a form element with the `disabled` attribute, so what you use depends on the context. Warning the user does not require live regions, again it depends on context. Opening what is clearly a navigatoin menu does not require a live region, just focus management. Alerting the user of errors on the page may require a live region. – aardrian Dec 04 '16 at 20:00