Keyboard-A11y Plugin demo: Screen Reader experience problems

Richards, Jan jrichards at
Fri Nov 26 20:32:44 UTC 2010

Hi Anastasia,

Hmmm, what about role=radiogroup?


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

> -----Original Message-----
> From: fluid-work-bounces at [mailto:fluid-work-
> bounces at] 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.
> 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            Inclusive Design Institute
>                                         OCAD University
> _______________________________________________________
> fluid-work mailing list - fluid-work at
> To unsubscribe, change settings or access archives,
> see

More information about the fluid-work mailing list