WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing Region Labels on OSX

for

From: Jesse Hausler
Date: May 15, 2014 2:56PM

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