Search code examples
htmlaccessibilitywai-ariawcag

ARIA and WCAG 2.0 success criteria


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


Solution

  • 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.