Keyboard-A11y Plugin demo: Screen Reader experience problems

[Cheetham, Anastasia]

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