Im making an FTP client, which will rely a lot on javascript.
When browsing through the files, you can navigate using the arrow keys. I add a class of .selected to the currently selected filename, but how can I make this clear to screenreaders? How do I make them focus on the current filename?
Would the best way be to make every filename an anchor, which will get the focus when the filename is selected? And also, where can I find a good guide on web application accessibility? I know the W3C has a checklist for content accessibility, but most of the points there don’t apply to web apps.
Simplest way to do this is perhaps to have a series of checkboxes, each with a unique ID, paired with a label:
Using this technique, the input is doing the work of exposing a selected-ness for you, while the label takes care of associating it with the name: when focus goes to the checkbox, the screenreader will automatically read out the associated label text. It’s all plain HTML, nothing special required. You’re free of course to add in selection coloring on top of this – so long as you keep it in sync with checkbox state.
It may be possible to do something similar with A tags; you can use WAI-ARIA properties to set role=”listitem” and aria-selected=”true”/”false” as appropriate on the items, with role=”list” on the parent container. A screenreader will then read these out as list items, rather than links. This technique is more involved, however, and would really need to be tested with an actual screen reader (eg JAWS, or the freely-available NVDA) to ensure it works.