WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing Region Labels on OSX

for

From: Paul J. Adam
Date: May 15, 2014 2:44PM

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