如何使这个 javascript 应用程序可访问？

Question

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.

Answer 1

Simplest way to do this is perhaps to have a series of checkboxes, each with a unique ID, paired with a label:

<input id="chk01" type="checkbox"/><label for="chk01">File1.txt</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.

Answer 2

I would suggest you use a javascript framework to help with accessibility in conjunction with WAI-ARIA For examples of accessible jQuery see https://github.com/fnagel/jQuery-Accessible-RIA/wiki and for examples of accessible drag and drop with WAI-ARIA see http://dev.opera.com/articles/view/accessible-drag-and-drop/

Answer 3

First - make sure your basics are covered. The Web Content Accessibility Guidelines (WCAG) don't cover interactivity well, but many of its points remain applicable to web applications.

Next - learn about the ARIA standard for Accessible Rich Internet Applications. This will cover a lot of the interactivity you're trying for.

Some relevant links:

• http://webaim.org/ for common accessibility problems, plus some invaluable surveys of screen reader usage
• http://www.w3.org/WAI/intro/wcag.php - overview of WCAG 2.0
• http://www.w3.org/WAI/intro/aria.php - overview of ARIA

There are a number of books on accessibility, which tend to get outdated fairly fast. Sadly, I'm not aware of any book-length discussions of ARIA -- it's still in development. Try reading the specs.

Last but not least -- get a screen reader and learn to use it. Formal compliance with accessibility standards is great, but nothing beats real testing. NVDA is a free and fully featured screen reader that has decent support for ARIA: http://nvda-project.org/

Hope this helps.

Answer 4

When browsing through the files, you can navigate using the arrow keys.

Building upon a previous answer that neglected this feature, wrap the entire widget in a div with role=application. This notifies the screen reader that JavaScript will be used and will allow the user to navigate the widget with the arrow keys while using a screen reader. The excerpt below details how to design the widget to be accessible. Yes, it's not the simplest solution, but it is the most complete. Take your pick.

Description: A widget that allows the user to select one or more items from a list of choices. ( listbox ). Keyboard Interaction:

• Tab : When a list is tabbed to, select the first item if nothing else is already selected. A second tab will take the user out of the widget to the next tab stop on the page.
• Up/down arrows navigate up and down the list.
• Shift+Up Arrow and Shift+Down Arrow move and extend the selection.
• Typing letter or several letters to navigate (same letter goes to each item starting with that, different letters go to first item starting with that entire string).
• Shift+F10 : If the current item has an associated context menu, then this key combination will launch that menu.
• Selection
  • Checkbox - Space toggles checkboxes, if the list items are checkable
  • Selectable List Items
    • Space acts as a toggle to select and deselect the current item. If previous items have been selected, it also deselects them and selects the current item.
    • Shift+Space selects contiguous items from the last selected item to the current item.
    • Ctrl+Arrow moves without selecting.
    • Ctrl+Space selects non-contiguous items and adds the current selected item to all previously selected items.
    • Ctrl+A - It is recommended a checkbox, link or other method be used to select all. The Ctrl+A key could be used to provide the shortcut key.

It is recommended the developer use different styling for the selection when the list is not focused (hint: non-active selection is often shown with a lighter background color).

WAI-ARIA Roles, States, and Properties:

• The listbox container has a role of listbox .
• Each entry in the listbox should have a role option and should be DOM children of listbox .
• If is not a DOM child of listbox, then it should be referenced in the listbox by aria-owns .
• If all items in the listbox are not DOM children of the listbox, then set their aria-setsize and aria-posinset accordingly; otherwise, this information cannot be computed for context by the user agent.
• If the listbox is not part of another widget, then it should have a visible aria-label referenced on the listbox by aria-labelledby .
• Each selected list item should have aria-selected ="true".

Examples:

Single select listbox

Listbox in an iframe

Refer to the authoring practices for accessible widgets for examples and more information.

Answer 5

From what I understand, YUI has a large amount of support for ARIA.

See:

http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y

Make sure your solution conforms to ARIA:

http://www.w3.org/WAI/intro/aria.php

HTH