nooodle/noodleapp — pull request #132 by Marco-Zehe (2013-03-08 10:54:37+00:00)
Title: Make the messages list screen reader accessible.

The change in active item via the j and k keys can now be tracked via screen readers.

1. Added a role of "listbox" to the "messages" ol item. This causes screen readers to treat it as a widget one can interact with like with an input, AKA known as forms mode or focus mode.
2. Made each list item within a group by assigning them a role of "group", and giving them a condensed form of the contained post via aria-label. Group is the only compound widget that I found that works in both Firefox and Safari, and doesn't cause the contained children accessibles to be flattened, making them inaccessible. The aria-label is necessary as to name the group, since for groups, the name must be given explicitly.

3. Made each item focusable, but not contained within the tab order. The child elements like links are still accessible via tab as usual.

4. Caused each group item to receive actual keyboard focus. What keyboard users can do now is use j and k to navigate through their list, and use tab to directly jump into items like the user avatar or the controls to reply etc.