Keyboard-A11y Plugin demo: Screen Reader experience problems

[Richards, Jan]

Hi Anastasia,

Hmmm, what about role=radiogroup?

-Jan





-- 
(Mr) Jan Richards, M.Sc.
jrichards at ocad.ca | 416-977-6000 ext. 3957 | fax: 416-977-9844
Inclusive Design Research Centre (IDRC) | http://inclusivedesign.ca/
Faculty of Design | OCAD University


> -----Original Message-----
> From: fluid-work-bounces at fluidproject.org [mailto:fluid-work-
> bounces at fluidproject.org] On Behalf Of Cheetham, Anastasia
> Sent: November 26, 2010 2:55 PM
> To: Fluid Work
> Subject: Keyboard-A11y Plugin demo: Screen Reader experience problems
> 
> 
> I've been working on improving the screen reader experience of the Keyboard
> Accessibility Plugin demo, and I'm running into a problem.
> 
> A quick reminder: The demo shows a list of image thumbnails which can be
> selected for viewing in the main viewing area. There is a five-star ranking
> widget that can be used to rank each image. The set of thumbnails and the
> five-star widget have been made keyboard-accessible using the plugin.
>     http://build.fluidproject.org/infusion/demos/keyboard-
> a11y/html/keyboard.html
> 
> The problem is the five-star widget. Semantically, it is a slider, but the
> markup I'm using (five images inside a div) does not conform to the markup
> that the ARIA slider role and attributes work with (a single "thumb" element
> that gets moved). As a result, while the screen readers say "slider" when
> focus gets to the widget, that's about all that happens. The changes to aria-
> valuenow are not spoken because focus is not on the containing element (which
> is where the property is set), it's on one of the stars. It might technically
> "work" to make each individual star into a slider with a fixed valuenow, but
> it's just wrong. I could force focus to stay on the div, but then I wouldn't
> really have much use for the keyboard-a11y plugin, which is the whole point of
> the demo.
> 
> If I forego the slider and just rely on alt text on the images (i.e. "one
> star", "two stars"...), the problem is there's no indication of what the
> currently *selected* value is. The aria-selected state could help, but that
> only works if it's inside certain particular aria roles, none of which are
> quite semantically appropriate for this widget.
> 
> So I'm proposing that we simply remove the five-star widget from the demo
> altogether. This would make the demo quite small, but it would simplify it and
> avoid a whole lot of shenanigans that have nothing to do with the keyboard-
> a11y plugin.
> 
> What do people think of the idea of removing the five-star widget from the
> demo? Does anyone have any other suggestions for making the screen reader
> experience work for the widget?
> 
> --
> Anastasia Cheetham     Inclusive Design Research Centre
> acheetham at ocad.ca            Inclusive Design Institute
>                                         OCAD University
> 
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work