WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing Region Labels on OSX

for

From: Jonathan Avila
Date: May 16, 2014 6:51AM

[Jessie wrote] Still can't find a way to create a hidden anchor that isn't
specifically visible on screen.

You generally wouldn't want to do this unless the anchor becomes visible
when focused -- if this wasn't the case then you'd have a violation of
Focus Visible SC 2.4.7. Any time you are considering using off-screen
text consider how users with other disabilities such as low vision,
cognitive disabilities, or keyboard-only users might be affected or could
benefit from the screen reader specific technique you are about to apply.

Jonathan

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
Sent: Thursday, May 15, 2014 8:10 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Announcing Region Labels on OSX

Definitely good advice all around.

We don't use that class for anything functional or actionable. Just for
text that isn't displayed visually, but probably should be... form labels,
"missing" headings, panel descriptions etc. Although we do use it to
compliment icon-fonts inside of anchors or buttons. But the anchor itself
is onscreen.

I hadn't heard about clip being used specifically for VO iOS focus issues.
it does work on VO-iOS for reading text only. Still can't find a way to
create a hidden anchor that isn't specifically visible on screen.


On Thu, May 15, 2014 at 3:32 PM, Paul J. Adam < <EMAIL REMOVED> > wrote:

> 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
> >>>>> > >>>>> > >>>>> > >>>>
> >>>> > >>>> > >>>> > >>>>
> >>> > >>> > >>> list messages to <EMAIL REMOVED>
> >>
> >> > >> > >> list messages to <EMAIL REMOVED>
> >>
> > > > > > list messages to <EMAIL REMOVED>
>
> > > list messages to <EMAIL REMOVED>
>
messages to <EMAIL REMOVED>