HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`HTML Techniques for Web Content Accessibility
`Guidelines 1.0
`
`W3C Note 6 November 2000
`
`This version:
`http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/
`(plain text, PostScript, PDF, gzip tar file of HTML, zip archive of HTML)
`Latest version:
`http://www.w3.org/TR/WCAG10-HTML-TECHS/
`Previous version:
`http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20000920/
`Editors:
`Wendy Chisholm, W3C;
`Gregg Vanderheiden, Trace R & D Center University of Wisconsin -- Madison;
`Ian Jacobs, W3C
`
`Copyright ©1999 - 2000 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C
`liability, trademark, document use and software licensing rules apply.
`
`Abstract
`This document describes techniques for authoring accessible Hypertext Markup
`Language (HTML) content (refer to HTML 4.01 [HTML4] [p. 54] ). This document is
`intended to help authors of Web content who wish to claim conformance to "Web
`Content Accessibility Guidelines 1.0" ([WCAG10] [p. 54] ). While the techniques in
`this document should help people author HTML that conforms to "Web Content
`Accessibility Guidelines 1.0", these techniques are neither guarantees of
`conformance nor the only way an author might produce conforming content.
`This document is part of a series of documents about techniques for authoring
`accessible Web content. For information about the other documents in the series,
`please refer to "Techniques for Web Content Accessibility Guidelines 1.0"
`[WCAG10-TECHS] [p. 54] .
`Note: This document contains a number of examples that illustrate accessible
`solutions in CSS but also deprecated examples that illustrate what content
`developers should not do. The deprecated examples are highlighted and readers
`should approach them with caution -- they are meant for illustrative purposes only.
`
`1
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 1 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`Status of this document
`This version has been published to correct some broken links in the previous
`version.
`The 6 November 2000 version of this document is a Note in a series of Notes
`produced and endorsed by the Web Content Accessibility Guidelines Working Group
`(WCAG WG). This Note has not been reviewed or endorsed by W3C Members. The
`series of documents supersedes the single document 5 May 1999 W3C Note
`Techniques for Web Content Accessibility Guidelines 1.0. The topics from the earlier
`document have been separated into technology-specific documents that may evolve
`independently. Smaller technology-specific documents allow authors to focus on a
`particular technology.
`While the "Web Content Accessibility Guidelines 1.0" Recommendation
`[WCAG10] [p. 54] is a stable document, this series of companion documents is
`expected to evolve as technologies change and content developers discover more
`effective techniques for designing accessible Web content.
`The history of changes to the series of documents as well as the list of open and
`closed issues are available. Readers are encouraged to comment on the document
`and propose resolutions to current issues. Please send detailed comments on this
`document to the Working Group at w3c-wai-gl@w3.org; public archives are
`available.
`The English version of this specification is the only normative version. Translations
`of this document may be available.
`The list of known errors in this document is available at "Errata in Web Content
`Accessibility Guidelines." Please report errors in this document to
`wai-wcag-editor@w3.org.
`The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C)
`makes available a variety of resources on Web accessibility. WAI Accessibility
`Guidelines are produced as part of the WAI Technical Activity. The goals of the Web
`Content Accessibility Guidelines Working Group are described in the charter.
`A list of current W3C Recommendations and other technical documents is
`available.
`
` 6 Nov 2000 18:04
`
`
`
`2
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 2 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`Table of Contents
`
`Abstract
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`Status of this document
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`1 Document structure and metadata
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`1.1 Metadata
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`1.2 Structural grouping
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`2 Language information
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`2.1 Identifying changes in language
`.
`.
`.
`.
`.
`.
`.
`.
`.
`2.2 Identifying the primary language
`.
`.
`.
`.
`.
`.
`.
`.
`.
`3 Text markup
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`3.1 Emphasis
`.
`.
`.
`.
`.
`.
`.
`.
`.
`3.2 Acronyms and abbreviations
`.
`.
`.
`.
`.
`.
`.
`.
`.
`3.3 Quotations
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`3.4 Markup and style sheets rather than images: The example of math
`3.5 Eight other structural elements (to identify citations, code fragments,
`deleted text, and others)
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`4 Lists
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`4.1 Use style sheets to change list bullets
`.
`.
`.
`.
`.
`.
`.
`5 Tables
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`5.1 Tables of data
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`5.2 Tables for layout
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`5.3 Linearizing tables
`.
`.
`.
`.
`.
`.
`.
`5.4 Backward compatibility issues for tables
`.
`.
`.
`.
`.
`.
`.
`6 Links
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`6.1 Link text
`.
`.
`.
`.
`.
`.
`.
`.
`.
`6.2 Grouping and bypassing links
`.
`.
`.
`.
`.
`.
`.
`.
`.
`6.3 Keyboard access
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`6.4 Anchors and targets
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`7 Images and image maps
`.
`.
`.
`.
`.
`.
`7.1 Short text equivalents for images ("alt-text")
`.
`.
`.
`.
`.
`.
`7.2 Long descriptions of images
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`7.3 Ascii art
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`7.4 Image maps
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`7.5 Color in images
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`7.6 Animated images
`.
`.
`.
`.
`.
`.
`.
`.
`8 Applets and other programmatic objects
`8.1 Text and non-text equivalents for applets and programmatic objects
`8.2 Directly accessible applets
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`9 Audio and video
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`9.1 Audio information
`.
`.
`.
`.
`.
`.
`.
`.
`.
`9.2 Text equivalents for multimedia
`.
`.
`.
`.
`.
`.
`.
`.
`.
`9.3 Embedding multimedia objects
`
`.1
`
`
`.2
`
`.5
`
`.5
`
`.8
`
`.9
`
`.9
`
`.10
`
`.10
`
`.10
`
`.11
`
`.11
`.12
`
`.13
`
`
`.13
`
`.14
`
`.16
`
`.16
`
`.21
`
`.21
`
`.22
`
`.22
`
`.22
`
`.24
`
`.25
`
`.25
`
`.25
`
`.25
`
`.26
`
`.28
`
`.29
`
`.32
`
`.32
`
`.32
`.32
`
`.33
`
`.34
`
`.34
`
`.34
`
`.35
`
`3
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 3 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`10 Frames
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`10.1 Providing a frame title
`.
`.
`.
`.
`.
`.
`.
`10.2 Describing frame relationships
`.
`.
`.
`.
`.
`10.3 Writing for browsers that do not support FRAME
`10.4 Frame sources
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`10.5 Using FRAME targets
`.
`.
`.
`.
`.
`.
`.
`10.6 Alternatives to frames
`.
`.
`.
`.
`.
`.
`.
`11 Forms
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`11.1 Keyboard access to forms
`.
`.
`.
`.
`.
`.
`11.2 Grouping form controls
`.
`.
`.
`.
`.
`.
`.
`.
`11.3 Labeling form controls
`.
`.
`.
`.
`.
`.
`.
`11.4 Graphical buttons
`.
`.
`.
`.
`.
`11.5 Techniques for specific controls
`.
`.
`.
`11.6 Backward compatibility issues for forms
`.
`.
`.
`12 Scripts
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`12.1 Graceful transformation of scripts
`.
`.
`.
`.
`12.2 Scripts that cause flickering
`.
`.
`.
`12.3 Scripts that cause movement and blinking
`.
`.
`12.4 Directly accessible scripts
`.
`.
`.
`.
`.
`.
`.
`.
`12.5 Alternative presentation of scripts
`.
`.
`.
`.
`12.6 Page updates and new windows
`.
`.
`.
`.
`13 Index of HTML elements and attributes
`.
`.
`.
`.
`Elements
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`Attributes
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`14 References
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`15 Resources
`.
`.
`.
`.
`.
`.
`.
`.
`15.1 Other guidelines
`.
`.
`.
`.
`.
`15.2 User agents and other tools
`.
`.
`.
`.
`.
`15.3 Accessibility resources
`.
`.
`.
`.
`.
`.
`.
`.
`.
`16 Acknowledgments
`.
`.
`
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`.
`
`.35
`
`
`.36
`
`.36
`
`.38
`
`.38
`
`.39
`
`.40
`
`.41
`
`.41
`
`.41
`
`.43
`
`.43
`
`.44
`
`.44
`
`.45
`
`.45
`
`.45
`
`.45
`
`.46
`
`.47
`
`.47
`
`.48
`
`.48
`
`.51
`
`.54
`
`.54
`
`.55
`
`.55
`
`.55
`
`.56
`
` 6 Nov 2000 18:04
`
`
`
`4
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 4 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`1 Document structure and metadata
`Content developers should use structural markup and use it according to
`specification. Structural elements and attribute (refer to the index of HTML elements
`and attributes [p. 48] to identify them) promote consistency in documents and supply
`information to other tools (e.g., indexing tools, search engines, programs that extract
`tables to databases, navigation tools that use heading elements, and automatic
`translation software that translates text from one language into another.
`
`1.1 Metadata
`Checkpoints in this section:
`
`13.2 Provide metadata to add semantic information to pages and sites.
`[Priority 2]
`
`Some structural elements provide information about the document itself. This is
`called "metadata" about the document -- metadata is information about data.
`Well-crafted metadata can provide important orientation information to users. HTML
`elements that provide useful information about a document include:
`
`1.1.1 TITLE: The document title.
`Note that the (mandatory) TITLE element, which only appears once in a document,
`is different from the "title [p. 52] " attribute, which applies to almost every HTML 4.01
`element. Content developers should use the "title" attribute in accordance with the
`HTML 4.01 specification. For example, "title" should be used with links to provide
`information about the target of the link.
`
`1.1.2 The ADDRESS element
`This element can be used to provide information about the creator of the page.
`
`1.1.3 The META element
`Checkpoints in this section:
`
`7.4 Until user agents provide the ability to stop the refresh, do not create
`periodically auto-refreshing pages. [Priority 2] ,
`7.5 Until user agents provide the ability to stop auto-redirect, do not use markup
`to redirect pages automatically. Instead, configure the server to perform
`redirects. [Priority 2] .
`
`This element can specify metadata for a document including keywords, and
`information about the author. Please refer to the section on automatic page refresh
`for information on why META should not be used to redirect or auto-refresh pages.
`
`5
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 5 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`The following are deprecated HTML examples. The first changes the user’s page
`at page at regular intervals. Content developers should not use this technique to
`simulate "push" technology. Developers cannot predict how much time a user will
`require to read a page; premature refresh can disorient users. Content developers
`should avoid periodic refresh and allow users to choose when they want the latest
`information.
`Deprecated example.
`
`<META http-equiv="refresh" content="60">
`<BODY>
`<P>...Information...
`</BODY>
`
`End example.
`The following HTML example (using the META element) forwards the user from
`one page to another after a timeout. However, users should not redirect users with
`this markup since is non-standard, it disorients users, and it can disrupt a browser’s
`history of visited pages.
`Deprecated example.
`
`<HEAD>
`<TITLE>Don’t use this!</TITLE>
`<META http-equiv="refresh" content="5;
` http://www.example.com/newpage">
`</HEAD>
`<BODY>
`<P>If your browser supports Refresh,
`you’ll be transported to our
`<A href="http://www.example.com/newpage">new site</A>
`in 5 seconds, otherwise, select the link manually.
`</BODY>
`
`End example.
`
`1.1.4 The !DOCTYPE statement
`Checkpoints in this section:
`
`3.2 Create documents that validate to published formal grammars. [Priority 2]
`
`Validating to a published formal grammar and declaring that validation at the
`beginning of a document lets the user know that the structure of the document is
`sound. It also lets the user agent know where to look for semantics if it needs to. The
`W3C Validation Service validates documents against a whole list of published
`grammars.
`It is preferable to validate to W3C grammars. Refer to the Technologies Reviewed
`for Accessibility.
`
` 6 Nov 2000 18:04
`
`
`
`6
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 6 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`1.1.5 The LINK element and navigation tools
`Checkpoints in this section:
`
`13.9 Provide information about document collections (i.e., documents
`comprising multiple pages.). [Priority 3]
`
`Content developers should use the LINK [p. 50] element and link types (refer to
`[HTML4] [p. 54] , section 6.12) to describe document navigation mechanisms and
`organization. Some user agents may synthesize navigation tools or allow ordered
`printing of a set of documents based on such markup.
`Example.
`The following LINK [p. 50] elements might be included in the head of chapter 2 of
`a book:
`
` <LINK rel="Next" href="chapter3">
` <LINK rel="Prev" href="chapter1">
` <LINK rel="Start" href="cover">
` <LINK rel="Glossary" href="glossary">
`
`End example.
`
`1.1.6 The LINK element and alternative documents
`Checkpoints in this section:
`
`6.5 Ensure that dynamic content is accessible or provide an alternative
`presentation or page. [Priority 2]
`
`The LINK element may also be used to designate alternative documents.
`Browsers should load the alternative page automatically based on the user’s
`browser type and preferences. For example, use the LINK element as follows:
`Example.
`User agents that support LINK will load the alternative page for those users whose
`browsers may be identified as supporting "aural","braille", or "tty" rendering.
`
` <HEAD>
` <TITLE>Welcome to the Virtual Mall!</TITLE>
` <LINK title="Text-only version"
` rel="alternate"
` href="text_only"
` media="aural, braille, tty">
` </HEAD>
` <BODY><P>...</BODY>
`
`End example.
`
`7
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 7 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`1.2 Structural grouping
`Checkpoints in this section:
`
`12.3 Divide large blocks of information into more manageable groups where
`natural and appropriate. [Priority 2]
`
`The following HTML 4.01 mechanisms group content and make it easier to
`understand.:
`
`Use FIELDSET [p. 49] to group form controls into semantic units [p. 41] and
`describe the group with the LEGEND [p. 50] element.
`Use OPTGROUP [p. 50] to organize long lists of menu options into smaller
`groups. [p. 42] .
`Use tables for tabular data [p. 16] and describe the table with CAPTION [p. 49] .
`Group table rows and columns [p. 16] with THEAD [p. 51] , TBODY [p. 51] ,
`TFOOT [p. 51] , and COLGROUP [p. 49] .
`Nest lists [p. 13] with UL [p. 51] , OL [p. 50] , and DL [p. 49] .
`Use section headings (H1 [p. 49] - H6) to create structured documents and
`break up long stretches of text. Refer to the following section for more
`information.
`Break up lines of text into paragraphs (with the P [p. 50] element).
`Group related links. Refer to the section Grouping and bypassing links [p. 24]
`
`All of these grouping mechanisms should be used when appropriate and natural,
`i.e., when the information lends itself to logical groups. Content developers should
`not create groups randomly, as this will confuse all users.
`
`1.2.1 Section headings
`Checkpoints in this section:
`
`3.5 Use header elements to convey document structure and use them according
`to specification. [Priority 2]
`
`Long documents are often divided into a variety of chapters, chapters have
`subtopics and subtopics are divided into various sections, sections into paragraphs,
`etc. These semantic chunks of information make up the structure of the document.
`Sections should be introduced with the HTML heading elements (H1 [p. 49] -H6).
`Other markup may complement these elements to improve presentation (e.g., the
`HR [p. 49] element to create a horizontal dividing line), but visual presentation is not
`sufficient to identify document sections.
`Since some users skim through a document by navigating its headings, it is
`important to use them appropriately to convey document structure. Users should
`order heading elements properly. For example, in HTML, H2 elements should follow
`H1 elements, H3 elements should follow H2 elements, etc. Content developers
`should not "skip" levels (e.g., H1 directly to H3). Do not use headings to create font
`
` 6 Nov 2000 18:04
`
`
`
`8
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 8 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`effects; use style sheets to change font styles for example.
`Note that in HTML, heading elements (H1 - H6) only start sections, they don’t
`contain them as element content. The following HTML markup shows how style
`sheets may be used to control the appearance of a heading and the content that
`follows:
`Example.
`
` <HEAD>
` <TITLE>Cooking techniques</TITLE>
` <STYLE type="text/css">
` /* Indent heading and following content */
` DIV.section2 { margin-left: 5% }
` </STYLE>
` </HEAD>
` <BODY>
` <H1>Cooking techniques</H1>
` ... some text here ...
` <DIV class="section2">
` <H2>Cooking with oil</H2>
` ... text of the section ...
` </DIV>
`
` <DIV class="section2">
` <H2>Cooking with butter</H2>
` ... text of the section ...
` </DIV>
`
`End example.
`See also the section on links [p. 22] .
`
`2 Language information
`
`2.1 Identifying changes in language
`Checkpoints in this section:
`
`4.1 Clearly identify changes in the natural language of a document’s text and
`any text equivalents (e.g., captions). [Priority 1]
`
`If you use a number of different languages on a page, make sure that any
`changes in language are clearly identified by using the "lang [p. 52] " attribute:
`Example.
`
` <P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>,
` she entered both the room, and his life, forever. <Q>My name
` is Natasha,</Q> she said. <Q lang="it">Piacere,</Q>
` he replied in impeccable Italian, locking the door.
`
`9
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 9 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`End example.
`Identifying changes in language are important for a number of reasons:
`
`1. Users who are reading the document in braille will be able to substitute the
`appropriate control codes (markup) where language changes occur to ensure
`that the braille translation software will generate the correct characters
`(accented characters, for instance). These control codes also prevent braille
`contractions from being generated, which could further confuse the user. Braille
`contractions combine commonly used groups of characters that usually appear
`in multiple cells into a single cell. For example, "ing" which usually takes up
`three cells (one for each character) can be contracted into a single cell.
`2. Similarly, speech synthesizers that "speak" multiple languages will be able to
`generate the text in the appropriate accent with proper pronunciation. If changes
`are not marked, the synthesizer will try its best to speak the words in the primary
`language it works in. Thus, the French word for car, "voiture" would be
`pronounced "voter" by a speech synthesizer that uses English as its primary
`language.
`3. Users who are unable to translate between languages themselves, will be able
`to have unfamiliar languages translated by machine translators.
`
`2.2 Identifying the primary language
`Checkpoints in this section:
`
`4.3 Identify the primary natural language of a document. [Priority 3]
`
`It is also good practice to identify the primary language of a document, either with
`markup (as shown below) or through HTTP headers.
`Example.
`
` <HTML lang="fr">
` ....rest of an HTML document written in French...
` </HTML>
`
`End example.
`
`3 Text markup
`The following sections discuss ways to add structure to pieces of text.
`
`3.1 Emphasis
`Checkpoints in this section:
`
`3.3 Use style sheets to control layout and presentation. [Priority 2]
`
` 6 Nov 2000 18:04
`
`
`
`10
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 10 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`The proper HTML elements should be used to mark up emphasis: EM [p. 49] and
`STRONG [p. 50] . The B [p. 48] and I [p. 49] elements should not be used; they are
`used to create a visual presentation effect. The EM and STRONG elements were
`designed to indicate structural emphasis that may be rendered in a variety of ways
`(font style changes, speech inflection changes, etc.)
`
`3.2 Acronyms and abbreviations
`Checkpoints in this section:
`
`4.2 Specify the expansion of each abbreviation or acronym in a document
`where it first occurs. [Priority 3]
`
`Mark up abbreviations and acronyms with ABBR [p. 48] and ACRONYM [p. 48]
`and use "title [p. 52] " to indicate the expansion:
`Example.
`
` <P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!
`
`End example.
`This also applies to shortened phrases used as headings for table row or columns.
`If a heading is already abbreviated provide the expansion in ABBR. If a heading is
`long, you may wish to provide an abbreviation, as described in Data Tables [p. 16] .
`Example.
`
` ...
` <TH>First name</TH>
` <TH><ABBR title="Social Security Number">SS#</ABBR>
` ...
`
`End example.
`
`3.3 Quotations
`Checkpoints in this section:
`
`3.7 Mark up quotations. Do not use quotation markup for formatting effects such
`as indentation. [Priority 2]
`
`The Q [p. 50] and BLOCKQUOTE [p. 48] elements mark up inline and block
`quotations, respectively.
`Example.
`This example marks up a longer quotation with BLOCKQUOTE [p. 48] :
`
` <BLOCKQUOTE cite="http://www.example.com/loveslabourlost">
` <P>Remuneration! O! that’s the Latin word for three farthings.
` --- William Shakespeare (Love’s Labor Lost).
` </P>
` </BLOCKQUOTE>
`
`11
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 11 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`End example.
`
`3.4 Markup and style sheets rather than images: The example
`of math
`Checkpoints in this section:
`
`3.1 When an appropriate markup language exists, use markup rather than
`images to convey information. [Priority 2]
`
`Using markup (and style sheets) where possible rather than images (e.g., a
`mathematical equation) promotes accessibility for the following reasons:
`
`Text may be magnified or interpreted as speech or braille.
`Search engines can use text information.
`
`As an example, consider these techniques for putting mathematics on the Web:
`
`Ensure that users know what variables represent, for example, in the equation
`"F = m * a", indicate that F= Force, m = mass, a = acceleration.
`For straightforward equations, use characters, as in "x + y = z"
`For more complex equations, mark them up with MathML ([MATHML] [p. 54] ) or
`TeX. Note. MathML can be used to create very accessible documents but
`currently is not as widely supported or used as TeX.
`Provide a text description of the equation and, where possible, use character
`entity references to create the mathematical symbols. A text equivalent must be
`provided if the equation is represented by one or more images.
`
`TeX is commonly used to create technical papers which are then converted to
`HTML for publication on the Web. However, converters tend to generate images,
`use deprecated markup, and use tables for layout. Consequently, content providers
`should:
`
`1. Make the original TeX (or LaTeX) document available on the Web. There is a
`system called "AsTeR" ([ASTER] [p. 55] ) that can create an auditory rendition
`of TeX and LaTeX documents. Also, IBM has a plug-in for Netscape and
`Internet Explorer that reads TeX/LaTeX documents and some of MathML (refer
`to [HYPERMEDIA] [p. 55] ). Note. These tools work primarily in the English
`environment and may not work so well with speech synthesizers whose primary
`language is not English.
`2. Ensure that the HTML created by the conversion process is accessible. Provide
`a single description of the equation (rather than "alt" text on every generated
`image as there may be small images for bits and pieces of the equation).
`
` 6 Nov 2000 18:04
`
`
`
`12
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 12 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`3.5 Eight other structural elements (to identify citations, code
`fragments, deleted text, and others)
`The HTML 4.01 specification defines the following structural elements for
`miscellaneous markup needs:
`
`CITE [p. 49]
`Contains a citation or a reference to other sources.
`DFN [p. 49]
`Indicates that this is the defining instance of the enclosed term.
`CODE [p. 49]
`Designates a fragment of computer code.
`SAMP [p. 50]
`Designates sample output from programs, scripts, etc.
`KBD [p. 50]
`Indicates text to be entered by the user.
`VAR [p. 51]
`Indicates an instance of a variable or program argument.
`INS [p. 50]
`Indicates text inserted into a document.
`DEL [p. 49]
`Indicates text deleted from a document.
`
`4 Lists
`Checkpoints in this section:
`
`3.6 Mark up lists and list items properly. [Priority 2]
`
`The HTML list elements DL [p. 49] , UL [p. 51] , and OL [p. 50] should only be
`used to create lists, not for formatting effects such as indentation. Refer to
`information on CSS and tables for layout in the CSS Techniques
`[WCAG10-CSS-TECHNIQUES] [p. 54] .
`Ordered lists help non-visual users navigate. Non-visual users may "get lost" in
`lists, especially in nested lists and those that do not indicate the specific nest level
`for each list item. Until user agents provide a means to identify list context clearly
`(e.g., by supporting the ’:before’ pseudo-element in CSS2), content developers
`should include contextual clues in their lists.
`For numbered lists, compound numbers are more informative than simple
`numbers. Thus, a list numbered "1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1," provides more
`context than the same list without compound numbers, which might be formatted as
`follows:
`
`13
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 13 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`1.
` 1.
` 2.
` 1.
` 3.
`2.
` 1.
`
`and would be spoken as "1, 1, 2, 1, 2, 3, 2, 1", conveying no information about list
`depth.
`[CSS1] [p. 54] and [CSS2] [p. 54] allow users to control number styles (for all lists,
`not just ordered) through user style sheets.
`Example.
`The following CSS2 style sheet shows how to specify compound numbers for
`nested lists created with either UL or OL elements. Items are numbered as "1", "1.1",
`"1.1.1", etc.
`
`<STYLE type="text/css">
` UL, OL { counter-reset: item }
` LI { display: block }
` LI:before { content: counters(item, "."); counter-increment: item }
`</STYLE>
`
`End example.
`Until either CSS2 is widely supported or user agents allow users to control
`rendering of lists through other means, authors should consider providing contextual
`clues in unnumbered nested lists. Non-visual users may have difficulties knowing
`where a list begins and ends and where each list item starts. For example, if a list
`entry wraps to the next line on the screen, it may appear to be two separate items in
`the list. This may pose a problem for legacy screen readers.
`
`4.1 Use style sheets to change list bullets
`To change the "bullet" style of unordered list items created with the LI [p. 50]
`element, use style sheets. In CSS, it is possible to specify a fallback bullet style
`(e.g., ’disc’) if a bullet image cannot be loaded.
`Example.
`
`<HEAD>
`<TITLE>Using style sheets to change bullets</TITLE>
`<STYLE type="text/css">
` UL { list-style: url(star.gif) disc }
`</STYLE>
`</HEAD>
`<BODY>
`<UL>
` <LI>Audrey
` <LI>Laurie
` <LI>Alice
`</UL>
`
` 6 Nov 2000 18:04
`
`
`
`14
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 14 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`End example.
`To further ensure that users understand differences between list items indicated
`visually, content developers should provide a text label before or after the list item
`phrase:
`Example.
`In this example, new information is communicated through text ("New"), font style
`(bold), and color (yellow bullet, red text on yellow background).
`
`<HEAD>
`<TITLE>Bullet styles example</TITLE>
`<STYLE type="text/css">
` .newtxt { font-weight: bold;
` color: red;
` background-color: yellow }
` .newbullet { list-style : url(yellow.gif) disc }
`</STYLE>
`</HEAD>
`<BODY>
`<UL>
` <LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI>
` <LI> 401(k)</LI>
`</UL>
`</BODY>
`
`End example.
`
`4.1.1 Images used as bullets
`Checkpoints in this section:
`
`1.1 Provide a text equivalent for every non-text element (e.g., via "alt",
`"longdesc", or in element content). This includes: images, graphical
`representations of text (including symbols), image map regions, animations
`(e.g., animated GIFs), applets and programmatic objects, ASCII art, frames,
`scripts, images used as list bullets, spacers, graphical buttons, sounds (played
`with or without user interaction), stand-alone audio files, audio tracks of video,
`and video. [Priority 1]
`
`Avoid using images as bullets in definition lists created with DL [p. 49] , DT [p. 49]
`, and DD [p. 49] . However, if this method is used, be sure to provide a text
`equivalent for the images.
`Deprecated example.
`
`15
`
`
`
` 6 Nov 2000 18:04
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 15 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`<HEAD>
`<TITLE>Deprecated example using image in DL lists</TITLE>
`</HEAD>
`<BODY>
`<DL>
` <DD><IMG src="star.gif" alt="* ">Audrey
` <DD><IMG src="star.gif" alt="* ">Laurie
` <DD><IMG src="star.gif" alt="* ">Alice
`</DL>
`
`End example.
`Content developers should avoid list styles where bullets provide additional
`(visual) information. However, if this is done, be sure to provide a text equivalent
`describing meaning of the bullet:
`Deprecated example.
`
`<DL>
`<DD><IMG src="red.gif" alt="New:">Roth IRA</DD>
`<DD><IMG src="yellow.gif" alt="Old:">401(k)</DD>
`</DL>
`
`End example.
`
`5 Tables
`This section discusses the accessibility of tables and elements that one can put in a
`TABLE [p. 51] element. Two types of tables are discussed: tables used to organize
`data, and tables used to create a visual layout of the page.
`
`5.1 Tables of data
`Content developers may make HTML 4.01 data tables more accessible in a number
`of ways:
`
`Providing summary information
`Identifying row and column information
`
`5.1.1 Providing summary information
`Checkpoints in this section:
`
`5.5 Provide summaries for tables. [Priority 3]
`5.6 Provide abbreviations for header labels. [Priority 3]
`
`Provide a caption via the CAPTION [p. 49] element. A table caption describes
`the nature of the table in one to three sentences. Two examples:
`1. "Cups of coffee consumed by each senator."
`2. "Who spends the most on pollution cleanup?"
`A caption may not always be necessary.
`If a CAPTION is not provided, use the "title" attribute on the TABLE element to
`
` 6 Nov 2000 18:04
`
`
`
`16
`
`ACCESSIBE LTD EXHIBIT 1013
`Page 16 of 56
`
`

`

`HTML Techniques for Web Content Accessibility Guidelines 1.0
`
`describe the nature of the table in a few words.
`Provide a summary via the "summary [p. 52] " attribute. Summaries are
`especially useful for non-visual readers. A summary of the relationships among
`cells is especially important for tables with nested headings, cells that span
`multiple columns or rows, or other relationships that may not be obvious from
`analyzing the structure of the table but that may be apparent in a visual
`rendering of the table. A summary may also describe how the table fits into the
`context of the current document. If no caption is provided, it is even more critical
`to provide a summary. Two examples:
`1. "This table charts the number of cups of coffee consumed by each senator,
`the type of coffee (decaf or regular), and whether taken with sugar."
`2. "Total required by pollution control standards as of January 1, 1971.
`Commercial category includes stores, insurance companies and banks.
`The table is divided into two columns. The left-hand column is ’Total
`investment required in billions of dollars’. The right--hand column is
`’Spending’ and is divided into three sub-columns. The first sub-column is
`titled ’1970 actual in millions of dollars’, the second is ’1971 planned in
`millions of dollars’, and the third is ’Percent change, 1970 versus 1971.’ The
`rows are industries." [NBA, 1996].
`Provide terse substitutes for header labels with the "abbr [p. 52] " attribute on
`TH. These will be particularly useful for future speaking technologies that can
`read row and column labels for each cell. Abbreviations cut down on repetition
`and reading time.
`
`5.1.2 Identifying rows and column information
`Checkpoints in this section:
`
`5.1 For data tables, identify row and column h