WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is aria-hidden supposed to only hide content for screen readers/assistive technology, or is it supposed to hide content altogether?

for

From: Bryan Garaventa
Date: Dec 20, 2012 11:10PM

There is benefit though, in keeping them separate, where content is hidden
from screen reader users, but not visually.

I use this on my bootstrap Modal module, where the background content is
hidden from screen reader users via aria-hidden, so even though the modal
content is standard HTML, where all of the background content is still
visible, but shaded out, for sighted users, the only content that screen
reader users see is the modal content, and not the background. This works
equally well in JAWS, NVDA, and Voiceover, in IE, FF, Chrome, and Safari.

Also, I've used aria-hidden on toggle controls where special Unicode
characters are used to indicate selection, to prevent the screen reader from
announcing things like "black upward pointing triangle", when this feedback
provides no value.


----- Original Message -----
From: "Jared Smith" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Thursday, December 20, 2012 7:25 PM
Subject: Re: [WebAIM] Is aria-hidden supposed to only hide content for
screen readers/assistive technology, or is it supposed to hide content
altogether?


> Think of aria-hidden as simply *indicating* that content is hidden
> from all users. Aria-hidden should not be used for displaying content
> visually, but hiding it from screen reader users. However, in
> practice, it can function this way, though this wouldn't be a correct
> usage of it.
>
> ARIA does not affect standard browser functionality or presentation.
> In other words, ARIA *couldn't* hide content visually. You'd use CSS
> display:none to do that. But a powerful benefit of ARIA is that you
> can use the semantics of ARIA and the power of CSS to get the best of
> both worlds.
>
> For example, you could (and probably always would) have
> [aria-hidden=true] display:none;
> in your CSS. In your application, you would simply set the aria-hidden
> attribute value to true or false. When set to true, the CSS applies
> which also visually hides the content visually. In practice,
> aria-hidden and CSS display:none have the same affect on screen
> readers, the difference is that aria-hidden has semantic meaning and
> is much easier to toggle in scripting than changing styles, toggling
> class names, etc.
>
> Jared
> > >