WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA modal dialogs only read out focusable items (formsand links)

for

From: Bryan Garaventa
Date: Jan 4, 2013 1:02PM

Yes, aria-hidden only hides the background content, and not the dialog
content.

The dialog content is standard HTML, so all elements within it are
accessible, regardless whether these are focusable or not.

The use of role=dialog isn't scalable, because there is no guarantee that
content will be focusable, and in many cases it would be confusing to make
non-actionable elements focusable just to put them in the tab order, when
these would be confused with elements that are actionable.

Here is an example of this.

<div role="dialog" aria-label="Register">
<div class="scrollableLicenseAgreement">
Several paragraphs of license agreement text goes here...
</div>
<form>
Focusable form fields go here...
</form>
</div>

The use of role=dialog makes the license agreement text inaccessible.

However, if aria-hidden is used to simply hide the background content
instead, then all of the dialog is accessible regardless.




----- Original Message -----
From: "Sailesh Panchang" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Friday, January 04, 2013 11:50 AM
Subject: Re: [WebAIM] ARIA modal dialogs only read out focusable items
(formsand links)


> Bryan,
> Joseph's email above refers to content that is not focusable but
> should be available to AT. Aria-hidden will not help there, right?
> Also, with reference to Jared's note:
>>> All content within a modal dialog is to be keyboard focusable, at least
>>> as far as ARIA is
>>>concerned.
> Is this a practical and realistic assumption?
> Sailesh
>
>
> On 1/4/13, Bryan Garaventa < <EMAIL REMOVED> > wrote:
>> There is an eloquent solution available for this, which is to not use
>> role=dialog, and instead use aria-hidden=true on the background content
>> so
>> that it is invisible to screen reader users. This way, the modal is still
>> the only content that screen reader users interact with, and there is no
>> negative impact on navigation in the Virtual Buffer.
>>
>> You can see this in action at
>> http://whatsock.com/bootstrap
>> on the Modal tab.
>>
>> All the best,
>> Bryan
>>
>> ----- Original Message -----
>> From: "Humbert, Joseph A" < <EMAIL REMOVED> >
>> To: < <EMAIL REMOVED> >; < <EMAIL REMOVED> >
>> Sent: Friday, January 04, 2013 8:06 AM
>> Subject: [WebAIM] ARIA modal dialogs only read out focusable items
>> (formsand
>>
>> links)
>>
>>
>>> Hi All,
>>>
>>> This issue has been brought up in multiple projects I have been involved
>>> with, ARIA modal dialogs only read out focusable items (form controls
>>> and
>>>
>>> links) while ignoring plain text (e.g., instructions) when using some AT
>>> software. You can view an example for testing at
>>> http://jqueryui.com/resources/demos/dialog/modal.html. I have tested
>>> with
>>>
>>> JAWS 13, latest version of NVDA, and Voiceover (mac OSX) on IE, Firefox
>>> and Safari. I can reproduce the issue with JAWS 13 and NVDA on Firefox
>>> and
>>>
>>> IE. Voiceover seems to work ok.
>>>
>>> We have found non-elegant ways around the issue, but it would be nice
>>> not
>>>
>>> to have to use hacks.
>>>
>>> I believe this issue stems from the ARIA authoring practices modal
>>> dialog
>>>
>>> (http://www.w3.org/TR/wai-aria-practices/#dialog_modal) keyboard
>>> interaction description which appears to only cover dealing with
>>> focusable
>>>
>>> items. So AT manufactures may have coded there products to follow the
>>> ARIA
>>>
>>> authoring practices.
>>>
>>> What are people's opinions about suggesting modifications to the
>>> authoring
>>>
>>> practices to address keyboard interaction with plain text? Are there
>>> elegant cross-browser and cross-AT solutions? Thankx.
>>>
>>> Joe Humbert, Adaptive Technology and Accessibility Specialist
>>> UITS Adaptive Technology and Accessibility Centers
>>> Indiana University, Indianapolis and Bloomington
>>> 535 W Michigan St. IT214 E
>>> Indianapolis, IN 46202
>>> Office Phone: (317) 274-4378
>>> Cell Phone: (317) 644-6824
>>> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>>> http://iuadapts.Indiana.edu/<;http://iuadapts.indiana.edu/>;
>>>
>>> >>> >>> >>
>> >> >> >>
> > >