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
[email protected] Inclusive Design Institute
OCAD University
_______________________________________________________
fluid-work mailing list - [email protected]
To unsubscribe, change settings or access archives,
see http://fluidproject.org/mailman/listinfo/fluid-work
