WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing Region Labels on OSX

for

From: Paul J. Adam
Date: May 15, 2014 6:51PM


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