[contents] [checkpoint map] _________________________________________________________________ W3C Techniques for User Agent Accessibility Guidelines 1.0 W3C Working Draft 27-August-1999 This version: http://www.w3.org/WAI/UA/WAI-USERAGENT-TECHS-19990827 (plain text, postscript, pdf, gzip tar file of HTML, zip archive of HTML) Latest version: http://www.w3.org/WAI/UA/WAI-USERAGENT-TECHS Previous version: http://www.w3.org/WAI/UA/WAI-USERAGENT-TECHS-19990809 Latest "User Agent Accessibility Guidelines 1.0": http://www.w3.org/WAI/UA/WAI-USERAGENT Editors: Jon Gunderson Ian Jacobs Copyright © 1999 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. _________________________________________________________________ Abstract This document provides techniques for implementing the checkpoints defined in "User Agent Accessibility Guidelines 1.0". These techniques address the accessibility of user interfaces, content rendering, program interfaces, and languages such as HTML, CSS and SMIL. This document is part of a series of accessibility documents published by the Web Accessibility Initiative. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C. This is a W3C Working Draft for review by W3C Members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or Members of the WAI User Agent (UA) Working Group. While User Agent Accessibility Guidelines 1.0 strives to be a stable document (as a W3C Recommendation), the current document is expected to evolve as technologies change and content developers discover more effective techniques for designing accessible Web sites and pages. This document has been produced as part of the Web Accessibility Initiative and intends to improve user agent accessibility for all users. The goals of the User Agent Guidelines Working Group are discussed in the Working Group charter. A list of the UA Working Group participants is available. A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR. Please send comments about this document to the public mailing list: w3c-wai-ua@w3.org. Table of Contents * 1 Priorities * 2 How the Techniques are Organized + 2.1 Examples * 3 User agent accessibility + 3.1 Access to content + 3.2 Device independence + 3.3 User control of style + 3.4 Viewports, Selection, and Focus + 3.5 Navigation and searching + 3.6 Context and orientation + 3.7 Keyboard access + 3.8 Configuration + 3.9 Documentation * 4 Interfaces and conventions + 4.1 System conventions + 4.2 Testing UA operation with platform standards + 4.3 Accessibility interfaces + 4.4 The document object model + 4.5 Information for assistive technologies * 5 Support for HTML accessibility + 5.1 Equivalent information + 5.2 Links + 5.3 Tables + 5.4 Frames + 5.5 Scripts + 5.6 Multimedia * 6 Support for CSS accessibility * 7 Support for SMIL accessibility * 8 Appendix: Accessibility features of some operating systems * 9 Appendix: Loading assistive technologies for DOM access * 10 Appendix: Checkpoint Map * Acknowledgments * References * Services _________________________________________________________________ 1 Priorities Each checkpoint in this document is assigned a priority that indicates its importance for users. [Priority 1] This checkpoint must be implemented by user agents as a native feature or through compatibility with assistive technology, otherwise one or more groups of users with disabilities will find it impossible to access information. Satisfying this checkpoint is a basic requirement for some individuals to be able to use the Web. [Priority 2] This checkpoint should be implemented by user agents as a native feature or through compatibility with assistive technology, otherwise one or more groups of users will find it difficult to access information. Satisfying this checkpoint will remove significant barriers to accessing Web documents. [Priority 3] This checkpoint may be implemented by user agents as a native feature or through compatibility with assistive technology, to make it easier for one or more groups of users to access information. Satisfying this checkpoint will improve access to the Web for some individuals. The checkpoints in this document are numbered to match their numbering in User Agent Accessibility Guidelines 1.0. 2 How the Techniques are Organized This document is organized as follows: User Agent Accessibility This section introduces some general techniques to promote accessibility in user agent functionality. Interfaces and Conventions This section addresses user agent support for standard programming interfaces, operating system conventions, and W3C specifications. HTML Techniques This section explains how to implement features of HTML (refer to [HTML40], [HTML32]). CSS Techniques This section explains how to implement features of CSS1 and CSS2 (refer to [CSS1], [CSS2]). SMIL Techniques This section explains how to implement features of SMIL (refer to [SMIL]. A checkpoint map has been provided for navigation of the techniques. For each checkpoint, the map includes its definition (as it appears in the "User Agent Accessibility Guidelines 1.0") and links to applicable techniques for the checkpoint. In addition, the beginning of each section of this document lists the checkpoints that are addressed in that section. 2.1 Examples This document contains a number of examples that illustrate accessible solutions in HTML, CSS, etc. 3 User agent accessibility A list of assistive technologies and browsers designed for accessibility is available at the WAI Web site (refer to [USERAGENTS]). 3.1 Access to content Checkpoints in this section: 3.1, 3.2. It is not sufficient to convert a rendering intended for one medium into a rendering for a different medium (e.g., a graphical rendering to speech) since structural information is lost. Examples: table cells, nested lists (want to know where list item ends). Also, serial access to content not always convenient, so we need additional mechanisms to select and receive content. 3.1.1 Where does content come from? Some combination of document source, style sheets (which may hide content or generate content), and user agent additions (which may add contextual information or dynamic information such as whether a link has been visited). In addition, the user agent may want to provide "intelligent" access to content to simplify the view or to convey models more familiar to users than what is conveyed by the DTD alone. Also, make available information about abbreviation and acronym expansions. (@@How much rationale to include here?@@). In Amaya ([AMAYA]) for access to attribute values: Place the cursor at the element in question, open/swap to the structure view. You are shown list of attributes and values. Another technique: select the element (press escape in Linux), then the attributes are all available from the attributes menu. For alt, I can also look at the alternate view, which renders alt text instead of images - a lynx-like view. All the views are synchronized for navigation (and for editing). 3.1.2 What does access mean? Access means that the user agent renders selected content. Content includes alternative equivalents (e.g., attribute values). In the simplest case, the user agent renders the document (e.g., two-dimensional graphical layout, audio stream, line-by-line braille stream) and the user has access to the entire rendering. But this is not sufficient and so the user agent must provide navigation mechanisms that allow the user to set the selection/focus and then request the selected content (or information about the content - refer to another section...). User interface issues + How to indicate what piece of content one wants to access? + How does the user agent present the information? + How does the user configure the user agent to present associated contextual information? Refer to the section on navigation for different navigation techniques (serial, direct, tree, etc.). Structured v. Unstructured selection. + Users may want to select content based on the rendering structure alone (i.e., that amounts to selecting across element borders). + Users may want to select content based on structure (e.g., a table cell). Contextual information In addition to providing information about content, user agents should provide contextual information. Examples: table cell coordinates or header information. Or list item number within nested lists. Contextual information includes language of content as well. 3.1.3 Changes in content language Checkpoints in this section: 3.3. 3.1.4 Changes over time Checkpoints in this section: 3.4. * Provide time-dependent information in a time-independent manner, such as a static list of links that are time-dependent and occupy the same screen real estate. * Allow the user to control the timing of changes. * Allow the user to navigate sequences of related links that vary over time. 3.2 Device independence Checkpoints in this section: 1.2, 1.1, 1.3, 1.4, 1.5, 1.6 For non-text or replaced content: * Look for the "alt" attribute (e.g., on IMG in HTML). * Look for the "title" attribute * If the replaced content is text (e.g., a "text" element in SMIL), use the text content. For client-side image maps: * Look for the "alt" attribute * Look for the "title" attribute 3.3 User control of style To ensure accessibility, users must have final control over certain renderings. For text and color: Checkpoints in this section: 5.1, 5.2, 5.3, 5.4, 5.5, and 5.6. * For changing text size, allow font size changes or provide a zoom mechanism. [Ed. These may be rendered in a variety of ways. How do we specify rendering?] Implement CSS ([CSS1], [CSS2]) including the CSS2 cascade order and user style sheets. The CSS2 cascade order ensures that user style sheets with "!important" take precedence over author style sheets, giving users final control. Style sheets give authors design flexibility while offering users final control over presentation (refer also to [WAI-WEBCONTENT], checkpoint 3.3). CSS should be implemented by user agents that implement CSS for text that it renders. CSS includes properties for audio, braille (fixed and refreshable), screen, and print rendering, and all relevant properties for supported output media should be implemented. Note that in the CSS cascade order, markup is given less weight than style sheet rules. Thus, an author may use both presentation markup and style sheets, and user agents that support style sheets will prefer the latter. A user style sheet can be implemented through a user interface, which means that the user may not have to understand how to write style sheets; they are generated or the user agent acts as though they were. For an example of this, refer to the style sheets implementation of Amaya ([AMAYA]), which provides a GUI-based interface to create and apply internal style sheets. The same technique could be used to control a user style sheet. For images, applets, and animations: Checkpoints in this section: 4.2 and 5.7. Background images may be controlled by the use of local style sheets, and more effectively if these can be dynamically updated. Animation rate depends on the players used. User agents that provide native rendering of animation (for example a movie player, a driver for animated GIF images, or a java machine) should enable the control of animation rates, or at least allow the user to stop, and to play frame-by-frame, as well as straight rendering. A user agent could provide control of the general timing of a presentation, combined with the ability to select from available tracks manually. An issue to bear in mind is that when animation is synchronized with audio, a user may need the ability to play the animation separately from the associated audio. For time-based presentations: Implement user controls to start, atop, rewind and pause presentations, and where multiple tracks are supported, to choose which tracks should be rendered. SMIL ([SMIL]) provides for a number of these features. A SMIL implementation should provide for direct user control, as well as activation of the controls through a published API, for developers of assistive technologies. For user agents rendering audio: Checkpoints in this section: 5.11, 5.13, 5.9, 3.9, 3.8, and 5.12. On selecting from among available description tracks. SMIL ([SMIL]) allows users to specify captions in different languages. By setting language preferences in the SMIL player, users may access captions (or audio) in different languages. The G2 player from Real Networks currently allows users to specify which language they prefer, which can be evaluated in a SMIL ([SMIL]) document to choose from among text or audio tracks. Currently only one language can be indicated which does not permit choosing, for example, English spoken audio with Spanish captions. The Quicktime player currently permits turning on and off any number of tracks individually, which can include audio, video, and text. For user agents rendering video: Checkpoints in this section: 5.8, 5.10, 5.9, and 3.8. Implement the CSS positioning and/or SMIL layout languages. Allow the user to freeze a presentation, manually move and resize component video tracks (including captions, subtitles and signed translations) and to apply CSS stylesheets to text-based presentation and SVG. For user agents rendering speech: Checkpoints in this section: 5.15, 3.8, and 5.14. CSS2 ([CSS2] properties for speech can allow users to control speech rate, volume, and pitch. These can be implemented by allowing the user to write and apply a local style sheet, or can be automatically generated by means of (accessible) user controls, which should also be controllable through an API. [Editor: @@CMN- I vaguely recall seeing an example of this implemented in Java through the Accessibility API. Has anyone else seen this, or did I make it up?@@] User interface: Checkpoints in this section: 5.16. * Allow the user to select large or small buttons and controls (and ensure that these values are applied consistently across the user interface) @@CMN: Opera does this.@@ * Allow the user to control features such as menu font sizes, or speech rates - this may be achieved through use of operating system standards. * Allow the user to regroup buttons and controls, and reorder menus (@@CMN: MS Word does this. This is also related to reconfiguring commands, etc.@@) 3.3.1 Feature control Checkpoints in this section: 4.1, 4.3, 4.4, 4.10, 4.9, and 4.5. [Ed. Add note here that while useful to turn off support, say for all images, it's also useful to be able to view one particular image.] User agents may: * Allow users to turn of support for spawned viewports entirely * Prompt them before spawning a viewport For example, user agents may recognize the HTML construct target="_blank" and spawn the window according to the user's preference. Checkpoints in this section: 4.14. Period page refresh can be achieved with the following markup in HTML: The user agent should allow the user to disable this type of page refresh. Checkpoints in this section: 4.13. Although no HTML specification defines this behavior formally, some user agents support the use of the META element to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Instead of this markup, authors should use server-side redirects (with HTTP). User agents can provide a link to another page rather than changing the page automatically. 3.4 Viewports, Selection, and Focus 3.4.1 Highlighting the viewport, selection, and focus Checkpoints in this section: 9.1. * If colors are used to highlight the current viewport, selection, or focus, allow the user to set preferred colors and to ensure sufficient contrasts. * If the current viewport is a window, allow the user to cause the window to pop to the foreground. * If the current viewport is a frame or the user doesn't want windows to pop to the foreground, use colors, reverse videos, or other visual clues to indicate the current viewport. For speech or braille output, render the title or name of a frame or window and indicate changes in the current viewport. 3.4.2 Tracking selection and focus Checkpoints in this section: 10.2 and 8.2. 3.5 Navigation and searching Checkpoints in this section: 8.7 Configuration of navigation, navigating sets of items (but not always linear, e.g., tables). 3.5.1 Navigation of active elements Checkpoints in this section: 8.4. Sequential navigation includes all active elements. User agents might provide other navigation mechanisms limited to a particular type of element. For example "Find the next table" or "Find the previous form". The following checkpoints suggest some types of navigation. * Serial navigation. It is important that application developers maintain a logical keyboard navigation order. The navigation order is defined as the order of navigation among components and component elements via the keyboard. Generally users navigate by tabbing between components or groups and using the arrow keys within a component group or component's elements. The ability to tab between software components is a key feature in the implementation of keyboard accessibility. (Cross-reference to keyboard access.) Buttons of common functionality, such as a set of radio buttons used to set the location of a panel (top left, bottom left, and so on.), should be grouped together so the first element of the visible group can be tabbed to. Allow the user to use the arrow keys to navigate to each end of the group. * How to indicate that something is in tabbing order in Java: A component is inclusive in the tabbing order when added to a panel and its isFocusTraversable() method returns true. A component can be removed from the tabbing order by simply extending the component, overloading this method, and returning false. * For active elements, one way or two way. * In a table, up/down and left/right. Direct navigation: Excessive use of serial navigation can reduce the usability of software for both disabled and non-disabled users. As a developer, you need to determine the point at which tabbing gets in the way and provide a keyboard alternative. This is done through the use of keyboard Mnemonics and Accelerators. * Need for element identification. * Access by position in document. * Access by element content (e.g., first letter). * In a table, access to cell based on coordinates. 3.5.2 Navigation of document structure Checkpoints in this section: 8.6 * DOM is minimal (tree nav) * Best navigation will involve a mix of source tree information and rendered information. * May use commonly understood document models rather than strict DTD navigation. E.g., nesting headers in HTML. * Goal of simplifying the structure view as much as possible. * Allow the user to control level of detail/ view of structure. * Depth first as well as breadth first possible. Up/down nav as well. * Navigation of synchronized multimedia: allow users to stop, pause, fast forward, advance to the next clip, etc. 3.5.3 Table navigation Checkpoints in this section: 8.3 Users of non-graphical rendering technologies and users with learning disabilities, when browsing a page, should be able to quickly determine the nature of a table located on a page. The able-bodied user is able to visually examine the table and extract a sense of the table contents with a quick scan of the cells. Users with blindness or low vision, or users who have difficulty translating printed material may not able to do this. Providing table summary information, when first moving the point-of-regard to a table allows the nature of a table to be easily determined. An auditory rendering agent, when the point-of-regard moves to a table, might say, "Table: Tax tables for 1998," thus identifying the nature of the table. The user could then use keyboard commands to move the point of regard to the next logical block of information, or use a different command to "burrow" into the table. The "burrow" command should have an opposite "pop" command, which would move the point of regard from an individual cell to the table as a whole, so that the user can leave a table from any cell within it, rather than navigating to the end. If the user "pops" up to look over the summary information, it should be possible to "burrow" back to the same cell. When navigating a table that contains another table, this strategy can avoid confusion. For example, if each row of a table contained five cells, but the second row contained a 4x4 table in the third cell, a user could be disoriented when the row did not end as expected. However, when the point of regard moved to the third cell of the table, a compliant browser would report that this was a table, and describe its contents. The user would have the option of navigating to the forth cell of the parent table, or burrowing into the table within this cell. When rendering tabular information, the fact that it is tabular information should be apparent. For a graphical user agent, such information is commonly made obvious by the border attribute. However, for a non-graphical agent, such information must also be made appreciable. As the user agent shifts the point of regard to a table, it should first provide information about the entire table. This information might be the Caption, Title, or Summary information of the table. Access to this information would allow the user to determine whether or not to examine the contents of the table, or to move the point of regard to the next block of content. In many data tables, the meaning of the contents of a cell are related to the contents of adjacent cells. For example, in a table of sales figures, the sales for the current quarter might be best understood in relation to the sales for the previous quarter, located in the adjacent cell. In order to provide access to contextual information for individuals using non-graphical browsers, or for individuals with certain types of learning disabilities, it is necessary for the user agent to allow the point of regard to be moved from cell to cell, both right/left and up/down via keyboard commands. The most direct method of performing such navigation would be via the cursor keys, though other navigation strategies might be used. Users of graphical browsers can easily locate cells within a table that are at the intersection of a row and column of interest. To provide equivalent access to users of non-graphical browsers, equivalent means of navigation should be provided. The search function of a browser will allow the user to locate key terms within a table, but will not allow the user to find cells that are at the intersection of rows and columns of interest. Techniques: * An advanced search mode might provide entries for header information, allowing the user to find information at the intersection of columns and rows using the key terms. * A search mode might allow the user to search for key terms that are related to key header terms, allowing searches to be restricted to specific rows or headers within a table. The header information visible in a TH cell may be abbreviated, in which case it should be user preference to see the "abbr" value if any or the full contents. Axis information may also help the user search into confined portions of the table. Column groups and row groups are other confining partitions of a table in which a search may be limited. Software: * Table navigation script from the Trace Center * 3.5.4 Searching Checkpoints in this section: 8.5. * Element content * Attribute content * Patterns * Search the source view. * For forms, allow users to find required controls. Allow users to search on labels as well as content of some controls. * For multimedia presentations: + Allow users to search and examine time-dependent media elements and links in a time-independent manner. For example, present a static list of time-dependent links. + Allow users to search closest timestamp from a text stream or a media elements or links and find other media elements active at the same time. + Allow users to view a list of all media elements or links of the presentations sorted by start or end time or alphabetically. 3.5.5 View navigation Checkpoints in this section: 8.1, 9.3. [Ed. @@CMN: For example, Opera does allow the user to navigate between views - in it's case various windows, as does emacs-w3. Other systems rely on the Operating System to do it - in MSWindows and the X window system there are keyboard and mouse driven methods for moving among open windows.] 3.6 Context and orientation 3.6.1 Status information Checkpoints in this section: 10.4 and [##Tnotify-resource-nav]. 3.6.2 Element context Checkpoints in this section: 9.4. 3.6.3 Links * Address broken link handling so that it doesn't disorient users. For example, leave viewport as is and notify user. Checkpoints in this section: 9.5 and 9.6. 3.6.4 Tables Checkpoints in this section: 9.9 and 9.8. 3.6.5 Form controls Checkpoints in this section: 9.10, 10.6, 9.7. * For labels explicitly associated with form controls (e.g., "for" attribute on LABEL in HTML), make available label information when the user is navigating among the form controls. Statement of form submission problems from Gregory Rosmaita: Point A: As a user, I do not want to be prompted time I submit a form, provided that I submitted the form by activating its submit button. If, however, I simply hit the ENTER or the RETURN key from within a FORM control (i.e., rather than explicitly activating the SUBMIT mechanism), I would like the UA to request confirmation before submitting the form content. Point B: As a user, I do NOT want the form content automatically submitted if I inadvertently press the ENTER or RETURN key. PROBLEM STATEMENT FOR POINT B: Inadvertently pressing the RETURN or ENTER key is quite a prevalent phenomenon amongst users of every level of expertise - especially those who often find it necessary to switch between user agents. Lynx, for example, uses the ENTER key within FORMs as a means of exposing drop-down (or pop-up, depending upon your point of view) SELECT menus. Thus, when one encounters a SELECT menu using Lynx, one: exposes the content of the menu by pressing the ENTER key, and then is able to navigate between OPTIONs using the up and down arrows or via Lynx's text-search feature. When one finds the appropriate OPTION, it is selected by pressing ENTER, which causes the selected item to be displayed in the SELECT menu listbox. The problems posed by the default "submit on enter" feature of most GUI browsers, is not limited to the SELECT menu problem outlined above. Lynx (as well as several other text-based browsers) uses the ENTER/RETURN key as a means of toggling several FORM controls, such as the selection of checkboxes and radio buttons. Moreover, I would like to stress that the "Auto-Submit-On- Enter" feature is not only quite problematic for one operating in an eyes-free environment, but for those unaccustomed to using online forms, and for those unfamiliar with a particular user agent's default key- bindings for forms, as well as those (like myself and countless others) who surf the web using a variety of browsers, often switching from browser to browser -- ALT- TAB-ing from Lynx32 to MSIE to Opera, for example -- in order to better comprehend the contents of a page or while attempting to navigate an poorly structured site or a poorly marked-up form Point C: As a speech user, I am constantly frustrated and misdirected by the use of javascript and event handler controlled pseudo-forms, wherein the user is presented with a menu (in the form of a listbox in GUI browsers), and is redirected to a different viewport upon selection of an OPTION. PROBLEM STATEMENT FOR POINT C: The markup behind such pseudo-forms is a mix of javascript (in particular the "function switchpage(select)" command) and HTML FORM controls, which utilize HTML4's event handler script attributes (in particular the "onchange" event handler attribute has been defined. An example (gleaned from the document source for one website follows: