Accessibility - Part 3
General Rules of Accessibility
Visit W3.org's Accessibility Guidelines/Checktableand for further detail/how-tos/explanations: http://www.w3.org/TR/UAAG10-TECHS/intro.html
Main concepts to concentrate on:
- alt tags for images,
- captions for movies,
- use lists to define any list (links, etc. - you can use CSS to format the bullets, spacing, etc.),
- use CSS instead of font tags
- use headings (h1, h2, h3) in proper order in your document to outline the structure (use CSS to adjust the font styles); this helps for when style sheets are turned off or when readers are scanning the documents for an outline, in addition to other benefits.
- test without a mouse
- test without images
- be consistent (don't change the navigation on every page)
- inform user when your opening a new window or pop-up
- Tables: linearize, include row and column headers, summary, scope
- use label tags in forms
- User can operate your site from a keyboard alone (no mouse), including event handlers (such as onMouseOver - use onfocus, onkeydown in addition)
- Every non-text element (image, presentation, media, alert) must have a text equivalent: use captions and narration for slides, movies, Flash; use ALT tags for all images and graphical menu items.
- User should have access to all content
- use captions, abbreviation, acronym and description tags
- allow dynamically changing elements to be viewed or configured time-independent; user can stop and resume the media or adjust the time intervals
- allow text view of media elements
- use "summary" attribute on tables - Avoid or toggle (allow user to turn on or off or view only by request) the following elements that may reduce accessibility:
- background images
- audio, video, animated images
- animated or blinking text
- scripts
- automatic content retrieval
- Follow the links to view techniques on how to make these items more accessible:
- Lists - "contextual" rendering
- Tables - linearizing
- Image Maps
- Frames
- Forms - Ensure user control of rendering (view) and style:
- Allow text size to be scalable
- Offer a range of font families
- Configure text colors, background, border colors
- Slow multimedia or allow user to slow the rate of audio or animation content and to control volume
- Start, stop, pause, and navigate multimedia
- Allow user to apply an alternative style sheet and/or turn off style sheets
View an example of a page that changes only the style sheet associated with it, but retains the same html code with each rendering: http://placenamehere.com/neuralustmirror/200202/fun.php?sheet=04 (8,12,16) - Ensure user control of user interface behavior
- no automatic focus change of the content
- keep viewport on top
- * allow user to confirm or cancel form submission
- Implement interoperable application programming interfaces
- allow read access to the html/xml infoset of a document (by assistive technologies)
- DOM access to html/xml/css content
- * conventional keyboard APIs (For example, the conventional input APIs of the target user agent are for the mouse and keyboard. For touch screen devices or mobile devices, conventional input APIs may include stylus, buttons, and voice. The graphical display and sound card are considered conventional output devices for a graphical desktop computer environment, and each has an associated API.)
- Observe operating environment conventions
- Respect focus and selection conventions
- * Respect input conventions: The default configuration should not include "Alt-F4", "Control-Alt-Delete", or other combinations that have reserved meanings in a given operating environment. Clearly document any default configurations that depart from operating environment conventions.
- * Evaluate the conventional user interface controls on the target platform against any built-in operating environment accessibility functions (see the appendix on accessibility features of some operating systems). Ensure that the user agent operates properly with all these functions. Here is a sample of features to consider:
+ Microsoft Windows offers an accessibility function called "High Contrast." Standard window classes and controls automatically support this setting. However, applications created with custom classes or controls work with the GetSysColor API to ensure compatibility with High Contrast.
+ Apple Macintosh offers an accessibility function called "Sticky Keys." Sticky Keys operate with keys the operating environment recognizes as modifier keys, and therefore a custom control should not attempt to define a new modifier key.
- in menus, indicate what key strokes will activate the functionality, and underline single keys that will work in conjunction with a key such as Alt
- Implement specifications that benefit accessibility
- Make obvious to users features that are known to benefit accessibility. Make them easy to find in the user interface and in documentation.
- Use the CAPTION element (section 11.2.2) for rich table captions.
- Table elements THEAD, TBODY, and TFOOT (section 11.2.3), COLGROUP and COL (section 11.2.4) that group table rows and columns into meaningful sections.
- Attributes scope, headers, and axis (section 11.2.6) which are semantically significant labels that non-graphical user agents may use to render a table in a linear fashion.
- The tabindex attribute (section 17.11.1) for assigning the order of keyboard navigation within a document.
- The accesskey attribute (section 17.11.2) for assigning keyboard commands to interactive elements such as links and form elements.
- Provide navigation mechanisms
- provide content focus for viewports (windows or frames) and allow user to move focus
- provide sequential navigation for forms, tables, lists, units: e.g., "Find the next table" or "Find the previous form." (Excessive use of sequential navigation can reduce the usability of software for both disabled and non-disabled users.)
- no events on focus change
- * provide text search
- * structured navigation: proper use of element names, heading tags, fieldset, list items, tc. - Orient the user
- use table headers, tbody, tfoot, thead elements, summary, scope and axis; summarize table structure, and possible row grouping into multiple table bodies, column groups, header cells and how they relate to data cells, the grouping and spanning of rows and columns that apply to qualify any cell value, cell position information, and table dimensions.
- Highlight selection, content focus, enabled elements, visited links
- Provide outline view:
+ Make available to the user an "outline" view of rendered content, composed of labels for important structural elements (e.g., heading text, table titles, form titles, and other labels that are part of the content). This outline view will provide the user with a simplified view of content (e.g, a table of contents).
+ in HTML, labels include the following:
The CAPTION element is a label for TABLE
The title attribute is a label for many elements.
* The H1-H6 elements are labels for sections that follow
The LABEL element is a label for the form element
The LEGEND element is a label for a set of form elements
* The TH element is a label for a row/column of table cells.
The TITLE element is a label for the document.
- Highlight current viewport (window, link, list item, etc.) - * Use list definitions for any list (control style with CSS), even a list of links or questions
- Allow configuration and customization
- override binds
- single-key access
- navigation should not rely on graphical output - Provide accessible user agent documentation and help
- extended descriptions of screen-shots and flow charts
- text equivalent of audio or non-text elements
- Use the NOFRAMES element when the support/documentation is presented in a FRAMESET
- Provide documentation in small chunks (for rapid downloads) and also as a single source (for easy download and/or printing).
- Provide documentation of accessibility features (Document any features that affect accessibility and that depart from system conventions. Provide a sensible index to accessibility features. For instance, users should be able to find "How to turn off blinking text" in the documentation (and the user interface). The user agent may support this feature by turning off scripts, but users should not have to guess (or know) that turning off scripts will turn off blinking text. )
References:
Webstandards.org
Understanding Web Accessibility
SNOW Web Resources - links on Accessibility, validators, screen readers, definitions
W3C Disabilities matrix This matrix summarizes which checkpoints are expected to benefit users with certain types of disabilities.
W3C's Tools for evaluation, repair and transformation of websites for accessibility
Accessibility features of some operating systems (sticky keys, toggle keys, etc.)
Glossary of terms (in Accessibility Guidelines)
How People with Disabilities Use the Web
Accessibility Resource links and tools
Constructing Accessible Web Sites (book)