WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing Region Labels on OSX

for

From: Paul J. Adam
Date: May 15, 2014 4:32PM

Ok yeah clip is better for the VO iOS focus issue. I heard clip was deprecated/replaced so I have to explore that eventually.
On May 15, 2014, at 3:56 PM, Jesse Hausler < <EMAIL REMOVED> > wrote:

> I'll give it a shot and let you know how that goes.
>
> FWIW, this is our offscreen text class. It helps in RTL languages.
>
> .assistiveText{
>
> position:absolute;
>
> border:0;
>
> clip:rect(0,0,0,0);
>
> width:1px;
>
> height:1px;
>
> margin:-1px;
> padding:0;
> overflow:hidden}
>
> Thanks again,
> 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
>>>>> >>>>> >>>>> >>>>
>>>> >>>> >>>> >>>>
>>> >>> >>> >>
>> >> >> >>
> > >