WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing Region Labels on OSX

for

From: Birkir R. Gunnarsson
Date: May 19, 2014 8:38AM

Absolutely, I will.
I ahve discussed the potential bug filing with a certain member of the
PFWG who works for Apple (and whose email address should not be known
as it is not a place to file bugs), and he thinks it is a valid bug to
submit, whatever Apple decides to do in response.
I will get this ball rolling in the next couple of days, and will post
back to this list as requested.
Thanks
-Birkir


On 5/19/14, Gunderson, Jon R < <EMAIL REMOVED> > wrote:
> Brikir,
>
> If you post a bug for region navigation in voice over, please send the link
> to the bug to this list so people can vote to support VO implementation.
>
> Jon
>
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R.
> Gunnarsson
> Sent: Saturday, May 17, 2014 9:31 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Announcing Region Labels on OSX
>
> Hi
>
> role='document' is necessary when you have static content (content that
> would not be read in context of focusable components"
> So if the app has text that is not read as part of a focusable control
> )think instructions, 'about this app' etc.= such text needs to have
> role="document".
>
> Apple does not consider role="region" as an actual landmark, which is
> consistent with the ARIA spec.
> Voiceover will announced the labeled region when user enters and exits the
> reason during linear navigation, but user is not able to navigate directly
> to that region e.g. when using the roater.
> I am preparing to file a "bug"/"feature request" with Voiceover that labeled
> regions be added as part of the accessibility roater and that users will be
> able to navigate to it.
> By labeled region I mean a div or a section element that has been explicitly
> labeled using either aria-labelledby or aria-label.
> I believe Voiceover supports most of the standard landmarks )"main",
> "contentinfo" "banner" "navigation" "search" "form"), but I would need to
> test it explicitly to give you a 100% accurate answer.
>
>
> On 5/16/14, Jonathan Avila < <EMAIL REMOVED> > wrote:
>> [Jesse wrote] Btw, do you know what apple considers a proper landmark?
>> Is there a resource you can share?
>>
>> I've noticed inconsistencies with other screen readers too. For
>> example, NVDA will announce ARIA landmarks and move to them with the d
>> keystroke -- however, HTML5 elements such as nav and aside which have
>> direct ARIA landmark equivalents are not considered landmarks. This
>> is unfortunate and causes people to add ARIA roles to native HTML5 code.
>>
>> Jonathan
>>
>> -----Original Message-----
>> From: <EMAIL REMOVED>
>> [mailto: <EMAIL REMOVED> ] On Behalf Of Jesse
>> Hausler
>> Sent: Friday, May 16, 2014 1:49 AM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] Announcing Region Labels on OSX
>>
>> Bikir,
>>
>> This is an interesting point you make. Part of the reason for wrapping
>> the entire product in role="application" is so we can follow a model
>> similar to a microsoft or adobe style building tool.
>>
>> So you're suggesting that if one of our "panels" has a form inside. I
>> should wrap the form in a div with role="document". That's fair
>> enough, but would that limit our ability to have the F6 key control
>> cycling through our panels?
>>
>> I'm going to test this out tomorrow. Thanks for the great insight!
>>
>> Btw, do you know what apple considers a proper landmark? Is there a
>> resource you can share?
>>
>> Thanks,
>> Jesse
>>
>>
>> On Thu, May 15, 2014 at 6:29 PM, Birkir R. Gunnarsson <
>> <EMAIL REMOVED> > wrote:
>>
>>> 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
>>> >>>>>> >>> >>>>>> >>> >>>>>> >>> >>>>>
>>> >>>>> >>> >>>>> >>> >>>>> >>> >>>>>
>>> >>>> >>> >>>> >>> >>>> >>> >>>
>>> >>> >>> >>> >>> >>> >>> >>>
>>> >> >>> >> >>> >> list messages to <EMAIL REMOVED>
>>> >
>>> > >>> > >>> > list messages to <EMAIL REMOVED>
>>> >
>>>
>>>
>>> --
>>> Work hard. Have fun. Make history.
>>> >>> >>> list messages to <EMAIL REMOVED>
>>>
>> >> >> list messages to <EMAIL REMOVED>
>> >> >> list messages to <EMAIL REMOVED>
>>
>
>
> --
> Work hard. Have fun. Make history.
> > > messages to <EMAIL REMOVED>
> > > >


--
Work hard. Have fun. Make history.