WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-hidden for content outside modal dialog?

for

From: Robert Fentress
Date: Oct 16, 2015 9:58AM

Thanks, Patrick and Birkir.

On Fri, Oct 16, 2015 at 9:14 AM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> Rob
>
> Correct on all points.
> aria-hidden="true" hides content from assistive technology, regardless
> of navigation mode.
> Screen readers in browse mode can explore non-focusable content unless
> it is explicitly hidden this way, or using display: none.
>
> Therefore it is best to use aria-hidden="true" on all page content
> outside of a modal dialog.
> And, yes, this is an easy task if the dialog container is tagged on at
> the end of the DOM, but a bit of a nightmare when it is displayed
> inline to the triggering element because you cannot override
> aria-hidden="true" for a descendant element.
> There have been discussions on whether it is sufficient to lock the
> keyboard navigation within the dialog, and to clearly mark it as such
> for assistive technologies (use the dialog role and an accessible name
> provided through aria-label or aria-labelledby). It definitely
> provides a less desirable experience for the a.t. user, (after all,
> visually, you do not allow users to wonder into background content in
> any way without interacting with the dialog).
>
>
>
> You must be careful to always flip the aria-hidden value on page
> content when user exits a modal dialog, else you might end up with a
> situation where user does not see any content at all (if aria-hidden
> is true for a closed dialog and also true for the page content).
> You can view the modal, alert and tooltipdialog example widgets on
> Deque University
> http://dequeuniversity.com (under "examples and resources).
> There you can also copy and paste the example code into a text editor,
> save it, run it, and play with it.
> Cheers
>
>
> On 10/16/15, Robert Fentress < <EMAIL REMOVED> > wrote:
> > Hi, all.
> >
> > I just wanted to make sure I was conceptualizing something properly. In
> a
> > modal dialog, one should apply aria-hidden to all content not in the
> dialog
> > itself, right? Applying aria-hidden only to focusable elements outside
> the
> > dialog would not be sufficient, since one could still read the full
> > contents of the page using the Virtual PC Cursor in JAWS or Browse mode
> in
> > NVDA, etc. Or is that not a big deal, or expected behavior? Any sense
> of
> > things here?
> >
> > On a side note, if this is the case, then that means that usually dialogs
> > will not be able to be inserted in situ on the page at a point right
> after
> > their triggering control, since, I think, you cannot have an element with
> > aria-hidden="false" within an element with aria-hidden="true".
> >
> > Thanks,
> > Rob
> >
> > --
> > Robert Fentress
> > Senior Accessibility Solutions Designer
> > 540.231.1255
> >
> > Technology-enhanced Learning & Online Strategies
> > Assistive Technologies
> > 1180 Torgersen Hall
> > 620 Drillfield Drive (0434)
> > Blacksburg, Virginia 24061
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >



--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061