Increasing the Accessibility of the Web through style sheets,

Mar 25, 2003 - (mobile and voice), for electronic agents such as indexing robots, and etc. In an accompanying document, Techniques for "W3C WAI Page .... side-by-side, all tables that lay out text in parallel, word-wrapped columns require.
Télécharger le PDF
24KB taille 4 téléchargements 264 vues
commentaire
Report
Increasing the Accessibility of the Web through style sheets, scripts,...

http://trace.wisc.edu/docs/style_scripts_plugins/style_scripts_plugin...

Increasing the Accessibility of the Web through style sheets, scripts, and "plug-ins" Wendy Chisholm Mark Novak [email protected] Trace R&D Center 2107 Engineering Centers Bldg. 1550 Engineering Dr. Madison, WI 53706

Abstract The W3C WAI Page Authoring Guidelines (Vanderheiden, et al, 1998a) contains nineteen general concepts that Web page authors should follow to make their pages more accessible and usable, not only to people with disabilities, but for newer page viewing technologies (mobile and voice), for electronic agents such as indexing robots, and etc. In an accompanying document, Techniques for "W3C WAI Page Authoring" (Vanderheiden, et al, 1998b), each of the Page Authoring Guidelines are further explained, with one or more techniques that may be used to satisfy the guideline. In this paper/presentation, we will talk about and demonstrate how scripts and style sheets can be implemented today, and still work on systems that do not support scripts and style sheets ("Transform gracefully"). We also talk about and demonstrate how the data in a table can be presented and navigated both via scripting and by an accompanying application ("Context and navigation").

Introduction The W3C WAI Page Authoring Guidelines demonstrate that there are three basic concepts to create accessible Web sites: 1. Make sure pages transform gracefully across users, techniques, and situations. 2. Provide context and orientation information for complex pages or elements. 3. Maximize usability by following good design practices. The document stresses that "Accessibility does not mean minimal page design, it means thoughtful page design (Vanderheiden, et al, 1998a)." Therefore, newer technologies such as scripts and style sheets should not be avoided, but designed and used with care. In this paper/presentation, we will show how scripts and style sheets can be used to increase the accessibility of a page. We will also show how marking up a table according to the HTML 4.0 specification will allow other programs and eventually browsers, to restructure the data in a table to allow a user to understand and navigate the table via speech, the keyboard, etc. Note. We use many acronyms in this paper. Fear not, they are defined at the end.

Ensuring that scripts transform gracefully In the WAI Page Authoring Guidelines, under the first category "A. Make sure pages transform gracefully across users, techniques, and situations," the ninth guideline states: "

1 of 5

25/03/2003 12:59

Increasing the Accessibility of the Web through style sheets, scripts,...

http://trace.wisc.edu/docs/style_scripts_plugins/style_scripts_plugin...

A.9 Ensure that pages using newer W3C features (technologies) will transform gracefully into an accessible form if the feature is not supported or is turned off. Some more recent features that are not completely backwards compatible include frames, scripts, style sheets, and applets. Each release of HTML has included new language features. For example, HTML 4.0 added the ability to attach style sheets to a page and to embed scripts and applets into a page. Older browsers ignore new features and some users configure their browser not to make use of new features. These users often see nothing more than a blank page or an unusable page when new features do not transform gracefully. For example, if you specify an image as the source of a frame (via the "src" attribute), then there is no simple way to attach alt-text (see A.1) to that image. As is more often the case, people are finding ways to use scripts to create animated text effects. One such example was created on the WebReview site as a demonstration of how to create dynamic HTML (WebReview, 1998). In its original state, the page did not transform as gracefully as it could - making it confusing when read without style sheets. After changing the order of how the document was structured, the page transforms very gracefully. (i.e., it is readable). This assumes that a user can turn scripts off or that a browser does not support scripts.

Navigating tables "The table problem" Screen readers have many problems with tables. As of today, only one screen reader (that we know of) can take the multiple columns of a table and display them in one column This works fine if a table only contains a few columns of text, like a newspaper. Other screen readers typically read an entire row as one sentence, thus running information from cells together into one intelligible phrase. This becomes even more confusing when it is a table of numbers (a bus schedule for example). For this type of table, it is necessary for a user to be able to navigate the table by cell. Current browsers and screen readers do not typically have the ability to use the keyboard to navigate within the table. Even if a user can configure a screen reader to read a data cell at a time, they probably cannot get the corresponding row and column header information associated with a particular data cell. They also may not be aware of when they have navigated into or out of a data table. To help solve these issues, the WAI Page Authoring Guidelines (Vanderheiden, et al, 1998a), under the second category "B. Provide context and orientation information for complex pages or elements," the third guideline states: B.3 Ensure that tables (not used for layout) have necessary markup to be properly restructured or presented by accessible browsers and other user agents. Many user agents restructure tables to present them. Without appropriate markup, the tables will not make sense when restructured. Tables also present special problems to users of screen readers. These guidelines benefit users that are accessing the table through auditory means (e.g., an Automobile PC which operates by speech input and output) or viewing only a portion of the page at a time (e.g., users with blindness or low vision using speech or a braille display, or other users of devices with small displays, etc.). Techniques: 1. Provide summaries for tables (via the "summary" attribute on TABLE). [Priority 3] 2. Identify headers for rows and columns (TD and TH). [Priority 2] 3. Where tables have structural divisions beyond those implicit in the rows and columns, use appropriate markup to identify those divisions (THEAD, TFOOT, TBODY, COLGROUP, the "axis" and "scope" attributes, etc.). [Priority 2]

2 of 5

25/03/2003 12:59

Increasing the Accessibility of the Web through style sheets, scripts,...

http://trace.wisc.edu/docs/style_scripts_plugins/style_scripts_plugin...

4. .Provide abbreviations for header labels (via the "abbr" attribute on TH). [Priority 3] The following current interim technique is discussed in guideline A.12. ("Use interim accessibility solutions so that assistive technologies and older browsers will operate correctly."): 5.Until user agents and screen readers are able to handle text presented side-by-side, all tables that lay out text in parallel, word-wrapped columns require a linear text alternative (on the current page or some other). [Priority 2]

Scripts to navigate tables We looked at solving "the table problem" using a client side JavaScript. Our approach was to: 1. experiment with JavaScript to determine what information was available within the TABLE element of HTML 4, the DOM, and the event model of Microsoft Internet Explorer 4.0; 2. if possible, collect all this information into a structure or format that maintained the row/column header integrity; 3. and, allow navigation within this structure while providing individual cell data information to the user. To associate row/column header information with each data cell, we used an approach recommended in the HTML 4.0 specification (Raggett, et al, 1998). Essentially the steps in pseudo code would be as follows: 1. from a given data cell, iterate left until a row header is found 2. from a given data cell, iterate up until a column header is found 3. in both cases, stop if the edge of the table is reached -or- if another data cell is encountered after a header cell. Note, even though additional Table information is sometimes available in the HTML 4.0 standard (e.g., headers attribute, axis attribute, etc.), this information was collected but not used for our experimental scripts.

Use of a separate plug-in or executable program to navigate tables Our next approach was to use the extended object model exposed by IE 4, and access a Web page using a combination of C++ and COM via an executable program. Advantages to this approach: 1. 2. 3. 4.

not limited to running within a Web page not limited to running within a particular internet domain (security) access to keyboard and mouse information ahead of the browser if needed access to additional System resources (file system, hardware ports, display, etc.) if needed

Since the introduction of IE 3, Microsoft has supported a component architecture that allows increasing levels of access and control over their browser from an external application. Using COM, an external application can attach to IE and perform a variety of tasks, such as limiting the internet addresses one can access, or provide an audio indication when a page has completed loaded. Using COM also allows an external application to access the DOM and the event model of IE, and therefore access and possibly control all the elements of a Web page. Our approach was to develop an application that would again look to address the problems encountered by individuals with a visual disability when they try to navigate and understand data tables on a Web page. The application developed used the same structure as tried when experimenting with tables using JavaScript. In addition, we were also able to collect header and anchor/link information.

3 of 5

25/03/2003 12:59

Increasing the Accessibility of the Web through style sheets, scripts,...

http://trace.wisc.edu/docs/style_scripts_plugins/style_scripts_plugin...

Terminology and Technologies used in this presentation Cascading Style Sheets (CSS) A set of rules describing how a page ought to be presented (bold/italic, color, alignment, etc.) Document Object Model (DOM) Object models are sometimes described as the "manual" for how to use objects. Dynamic HTML (DHTML) A suite of technologies that allow a Web developer access to all the elements on a Web page. DHTML would encompass DOM, CSS including the ability to position elements, and the event model exposed in the browser. Hypertext Markup Language (HTML) The predominant language used to create World Wide Web pages. In the most recent release, HTML 4.0, several accessibility features were added. Java For our purposes, an object-oriented programming language. Programs written in Java are compiled into byte-code, and then must run inside a Java Virtual Machine (JVM). Most of the newer browser versions include a JVM, as do some operating systems. JavaScript For our purposes, is a scripting language, whose development and syntax have been influenced by object based technology. JavaScript is also an interpreted language, meaning it is not run through a compiler. There are two places you might find JavaScript, but we are only going to be talking about client-side JavaScript.: client-side - for example, scripts run from within a browser server-side - scripts which execute on the server end Microsoft's Component Object Model (COM) A software architecture that allows applications to be built from components. COM defines both a standard way to organize functions within a software component and a standard way to call these functions, which allows componets written using various programming languages to inter-operate. Microsoft Internet Explorer (IE) A Web browser. Web Access Initiative (WAI) An initiative that works with W3C working groups to resolve and prevent accessibility issues within W3C specifications and technologies. World Wide Web Consortium (W3C) An international industry consortium that maintains a repository of information about the World Wide Web, creates implementations to embody and promote standards, and provides other demonstrations of new technology.

References 1. Flanagan, David. (1998) JavaScript, The Definitive Guide Third Edition. O'Reilly & Associates, Inc., 101 Morris Street, Sebastopol, CA 95472 2. Microsoft (1998) The Component Object Model: Technical Overview. Available: http://www.microsoft.com/com/wpaper/Com_modl.asp 3. Raggett, Dave; Le Hors, Arnoud; Jacobs, Ian. (1998) HTML 4.0 Specification. Available: http://www.w3.org/TR/REC-html40/ 4. Vanderheiden, Gregg C.; Chisholm, Wendy A.; Jacobs, Ian. (1998a) WAI Accessibility Guidelines: Page Authoring. Available: http://www.w3.org/WAI/GL/WD-WAI-PAGEAUTH.html 5. Vanderheiden, Gregg C.; Chisholm, Wendy A.; Jacobs, Ian. (1998b) Techniques for "WAI Guidelines: Page Authoring". Available: http://www.w3.org/WAI/GL/wai-gl-techniques.html 6. WebReview. (1998) The Company. Available: http://www.webreview.com

4 of 5

25/03/2003 12:59