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: Maraikayar Prem Nawaz
Date: Dec 26, 2012 9:05PM

Hi,
Another use case:
aria-hidden is also useful when we want to animate the show/hide by
reducing the height property to produce a slow fading effect. The content
inside the div is hidden to visual users but available to screen reader
users. Aria-hidden, helps in hiding it from screen readers too.

Regards
-Nawaz


On Fri, Dec 21, 2012 at 11:40 AM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

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