dorian (Official Rep) April 30, 2014 19:21

Ways to make sure widgets are keyboard navigable

Sent by an ABCD OpenScholar meeting attendee:

Thanks for the presentations today about various "container" widgets today. In the meeting, I asked if the accordion widget was keyboard navigable and no one had an answer so I just wanted to report that I did a quick test and it does seem to be keyboard navigable.

To test, in Safari (for OS X) I enabled "Press Tab to highlight each item on a web page" then tried moving through the contents of one of the presented examples, Dorm Amenities | Freshman Dean's Office. When navigating the page with the keyboard, I could use the Tab key to get to the accordion widget but then had to use the up and down arrow keys to navigate the individual items (arrow keys are a common part of web page keyboard navigation). When navigating by keyboard, pressing Enter/Return triggers the onClick event for whatever page element has "focus," same as a mouse click would and in the accordion widget it does expand and collapse the selected content.

Usability could be further improved, it's hard to tell which item in the widget has focus (the triangle color changes very slightly), but it's really good that the content can be reached without a mouse or "touch" (on a mobile device).

Looking at the page source, it looks like this accessibility has been been enabled by adding ARIA standard attributes. It's really great that attention was paid to the usability of the widget's design. Another technique is to use an HTML "focusable element" as the element to be clicked or a focusable element within the element. Which HTML elements are focusable "out of the box?" I don't have the complete list but the element , , and all are. For example, each item in the accordion widget has an header element that you click to show or hide content in a . The headers are semantically appropriate so you wouldn't want to replace them with a different element but you could wrap the contents in an element and link it to the id of the div to be displayed/hidden, e.g. Apley Court. Alternately, instead of using an empty span with a CSS background image to show the triangles, you could make the triangle image a part of the page content, e.g. Apley Court. Because the image is now a focusable element, an onClick event bound to the parent element will still be triggered when the image has focus and Enter/Return is pressed. Wrapping some or all of the contents in a element is a a third way, I don't know all the pros and cons to each option.
2 people like
this idea