WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing Region Labels on OSX

for

From: Birkir R. Gunnarsson
Date: May 15, 2014 7:29PM

role="region" is not considered a landmark by Apple. Therefore any
landmark navigation options in Voiceover do not include regions.
VO announces labels of named regions when user enters/leaves the
regions in course of normal linear navigation.

A further thought on your application design, without having seen it of course.
Make sure to wrap any static piece of content inside div with
role="application" in a container element with role="document".
In forms mode it is hard for screen reader users, particularly
Jaws/NVDA to navigate static piece of text.
This is particularly true with older versions of NVDA (versions prior
to 2014.1)where user is unable to switch to browse mode when inside
divs with role="application".
Cheers and good luck.


On 5/15/14, Paul J. Adam < <EMAIL REMOVED> > wrote:
> have to use linear navigation to get to the container
> On May 15, 2014, at 7:38 PM, Jesse Hausler < <EMAIL REMOVED> > wrote:
>
>> Paul,
>>
>> I tried adding role="region" aria-label="hello world" to our <section>.
>> It
>> actually didn't work for us on OSX in Chrome or Safari.
>>
>> I wonder if it has something to do with how one enters the region.
>>
>> Jesse
>>
>>
>> On Thu, May 15, 2014 at 1:44 PM, Paul J. Adam < <EMAIL REMOVED> >
>> wrote:
>>
>>> VoiceOver for iOS tries to go focus on elements that are -9999px
>>> sometimes
>>> and then the focus jumps to a random control since it can't get to the
>>> off
>>> screen text.
>>>
>>> VO OS X reads "Interact with HTML content Hello World region" for the
>>> below code:
>>>
>>> <section role="region" aria-label="Hello World"><p>Blah</p></section>
>>>
>>>
>>>
>>> On May 15, 2014, at 3:36 PM, Jesse Hausler < <EMAIL REMOVED> >
>>> wrote:
>>>
>>>> Thanks for the quick response Paul.
>>>>
>>>> So you're saying that adding role="region" with aria-label will make
>>>> this
>>>> compatible with more screen readers? Since we already tried aria-label,
>>>> what does the role="region" add that would cause aria-label to begin
>>>> working?
>>>>
>>>> As an aside, would role="group" be more appropriate?
>>>>
>>>> Yes, we definitely understand the responsibility of the application
>>>> role
>>>> and intend to use JS throughout to control keyboard focus.
>>>>
>>>> At this point, we're still prototyping to see if this is the best way
>>>> forward.
>>>>
>>>> Tell me more about your concerns with visually hidden text. It's a
>>>> method
>>>> we use extensively in our products.
>>>>
>>>> Jesse
>>>>
>>>> On Thu, May 15, 2014 at 1:16 PM, Paul J. Adam < <EMAIL REMOVED> >
>>> wrote:
>>>>
>>>>> I don't recommend using visually hidden text, you'll find this causes
>>>>> problems later down the road.
>>>>>
>>>>> For VO OS X you need to add a role=region and use an aria-label
>>>>> instead
>>> of
>>>>> visually hidden text.
>>>>>
>>>>> Role=application is a BIG responsibility! You have to control every
>>>>> keyboard key they press with JavaScript events.
>>>>>
>>>>> Is the user not going to need any heading quick navigation keys or
>>>>> other
>>>>> screen reader nav keys while using the application?
>>>>>
>>>>>
>>>>> Paul J. Adam
>>>>> Accessibility Evangelist
>>>>> www.deque.com
>>>>>
>>>>> On May 15, 2014, at 2:56 PM, Jesse Hausler < <EMAIL REMOVED> >
>>>>> wrote:
>>>>>
>>>>>> I'm having trouble using ARIA to get VoiceOver on OSX to announce a
>>>>>> descriptive title for a region.
>>>>>>
>>>>>> We're prototyping a builder type application. Think Visio, but way
>>>>> simpler
>>>>>> / smaller feature set.
>>>>>>
>>>>>> We're planning to use the role="application" for the entire thing so
>>>>>> we
>>>>> can
>>>>>> control keyboard behavior throughout the product.
>>>>>>
>>>>>> The idea we are going with is to have 4 panels the user can switch
>>>>> between:
>>>>>>
>>>>>> - Toolbar (at the top)
>>>>>> - Control Panel (on the left)
>>>>>> - Properties Panel (on the right)
>>>>>> - the main working canvas (in the middle)
>>>>>>
>>>>>> F6 and Shift+F6 move the user from panel to panel. Each panel has a
>>>>> <span>
>>>>>> with an offscreen class, which labels the panel. We put an
>>>>> aria-labelledby
>>>>>> attribute on the outermost element of the panel which links the
>>>>> descriptive
>>>>>> span.
>>>>>>
>>>>>> For example:
>>>>>>
>>>>>> <section aria-labelledy="tbar">
>>>>>> <span class="assistiveText" id="tbar">Toolbar</span>
>>>>>> ... rest of the panel content...
>>>>>> </section>
>>>>>>
>>>>>> I get proper feedback using Jaws and FF: "Toolbar region..."
>>>>>> VoiceOver with both Safari and Chrome will state that his is a Group,
>>>>> which
>>>>>> makes sense, but it wont announce the "Toolbar" part.
>>>>>>
>>>>>> We've tried using aria-describedby, aria-label, and a regular old
>>>>>> title
>>>>>> attribute. The only thing that works is aria-labelledby with Jaws,
>>>>> nothing
>>>>>> on Mac.
>>>>>>
>>>>>> Any experience with this sort of problem? Possible solutions?
>>>>>>
>>>>>> Or did i just start myself a blog post? :)
>>>>>>
>>>>>> Happy Global Accessibility Awareness Day everyone!
>>>>>>
>>>>>> Jesse
>>>>>> >>>>>> >>>>>> >>>>>
>>>>> >>>>> >>>>> >>>>>
>>>> >>>> >>>> >>>
>>> >>> >>> >>>
>> >> >> >
> > > >


--
Work hard. Have fun. Make history.