4.1 Use style sheets to change
list bullets

<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>

<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>

3.5 Eight other structural elements
(to identify citations, code fragments, deleted text, and others)

CITE

Contains a citation or a reference to other sources.

DFN

Indicates that this is the defining instance of the enclosed term.

CODE

Designates a fragment of computer code.

SAMP

Designates sample output from programs, scripts, etc.

KBD

Indicates text to be entered by the user.

VAR

Indicates an instance of a variable or program argument.

INS

Indicates text inserted into a document.

DEL

Indicates text deleted from a document.

4 Lists

• 3.6 Mark up lists and list items properly.
  [Priority 2]

1.
  1.
  2.
    1.
  3.
2.
  1.

<STYLE type="text/css">
   UL, OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>

3.3 Quotations

• 
  3.7 Mark up quotations. Do not use quotation markup for formatting effects
  such as indentation. [Priority 2]

<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>

3.4 Markup and style sheets rather
than images: The example of math

• 3.1 When an appropriate markup language exists, use markup
  rather than images to convey information. [Priority 2]

• Text may be magnified or interpreted as speech or braille.
• Search engines can use text information.

• 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]) 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.

1. Make the original TeX (or LaTeX) document available on the Web. There is a
   system called "AsTeR" ([ASTER]) 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]). 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).

3.1 Emphasis

• 3.3 Use style sheets to control layout and presentation.
  [Priority 2]

3.2 Acronyms and abbreviations

• 4.2 Specify the expansion of each abbreviation or acronym in
  a document where it first occurs. [Priority 3]

<P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!

...
  <TH>First name</TH>
  <TH><ABBR title="Social Security Number">SS#</ABBR>
  ...

2.2 Identifying
the primary language

• 4.3 Identify the primary natural language of a document.
  [Priority 3]

<HTML lang="fr">
       ....rest of an HTML document written in French...
    </HTML>

3 Text markup

2.1 Identifying changes in
language

• 4.1 Clearly identify changes in the natural language of a
  document's text and any text equivalents (e.g., captions).
  [Priority 1]

<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.

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.

1.2 Structural grouping

• 12.3 Divide large blocks of information into more manageable
  groups where natural and appropriate. [Priority 2]

• Use FIELDSET to group form
  controls into semantic units and describe the group with the LEGEND element.
• Use OPTGROUP to organize long lists of menu options into smaller
  groups..
• Use tables for tabular data and describe the table
  with CAPTION.
• Group table rows and columns with THEAD, TBODY, TFOOT, and COLGROUP.
• Nest lists with UL, OL, and DL.
• Use section headings (H1 - 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
  element).
• Group related links. Refer to the section Grouping
  and bypassing links

1.2.1 Section
headings

• 3.5 Use header elements to convey document structure and use
  them according to specification. [Priority 2]

<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>

1.1.6 The LINK element and alternative documents

• 6.5 Ensure that dynamic content is accessible or provide an
  alternative presentation or page. [Priority 2]

<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>
 

1.1.6 The LINK element and alternative documents

• 6.5 Ensure that dynamic content is accessible or provide an
  alternative presentation or page. [Priority 2]

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.

1.1.6 The LINK element and alternative documents

• 6.5 Ensure that dynamic content is accessible or provide an
  alternative presentation or page. [Priority 2]

<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>
 

1.1.4 The !DOCTYPE statement

• 3.2 Create documents that validate to published formal
  grammars. [Priority 2]

1.1.5 The
LINK element and navigation tools

• 13.9 Provide information about document collections (i.e.,
  documents comprising multiple pages.). [Priority 3]

Example.

The following LINK 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.2 The ADDRESS element

1.1.3 The META element

• 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] .

<META http-equiv="refresh" content="60">
<BODY>
<P>...Information...
</BODY>

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 Document structure and metadata

1.1 Metadata

• 13.2 Provide metadata to add semantic information to pages
  and sites. [Priority 2]

1.1.1 TITLE: The document
title.

Abstract