End to End analysis of Guideline 2.4

Analysis of the table below:

Technology Independent Doc has a "Bread Crumbs" suggestion, don't map to cleanly to any particular success criteria. There are a ton of CSS techniques that I think apply to Guideline 2.4. (Practically all of them!).  I left out the CSS "units of measure" 2.9 , 2.10 and Raster image 2.11 but they might also apply. And 2.13 Text Style effects might also apply.

  Guideline Technology Independent
Doc		 HTML Techniques CSS
Guideline 2.4
2.4: Facilitate the ability of users to orient themselves and move within the content. 		     
Success Criteria 1: none      
Success Criteria 2:

Level 2 Success Criteria for Guideline 2.4

  1. Different structural elements look or sound different from each other and from body text. [V]
  2. In documents greater than 50,000 words or sites larger than 50 perceived pages, at least one of the following is provided. [V]
    Editorial Note: What's a perceived page? What if it's a voice XML application? How does it apply to Web applications? Why 50 and 50,000?
    1. hierarchical structure,
    2. table of contents (for pages) or site map (for sites),
    3. alternate display order (for pages) or alternate site navigation mechanisms (for sites).
  3. Large blocks of material that are repeated on multiple pages, such as navigation menus with more than 8 or more links, can be bypassed by people who use screen readers or who navigate via keyboard or keyboard interface. [V]

 

This technique satisfies guideline(s):

Task:

Ensure that structure and/or alternate navigation mechanisms have been added to facilitate orientation and movement in content.

 

 

This technique satisfies guideline(s):

  • Guideline 2.4 Facilitate the ability of users to orient themselves and move within the content.

Task:

Use a 'bread crumbs' widget to allow users to orient themselves in the content

Probably named after Hansel and Gretel this navigation widget allows users to orient

Use the link element to describe the structure of your document.

Content developers should use the link element and link types (refer to [HTML4] 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 elements might be included in the head of chapter 2 of a book:

Editorial Note: Include screen shots from iCab here.

<code section

 themselves in a site, and have some understanding of where they are in the information space. It also provides an excellent method to allow users to backtrack without getting lost. A bread crumbs widget normally consists of a series of links representing levels higher up in the directory tree up to the very root. These are presented as either a list or a series of links seperated commonly by '>'. Users are able to see where they are and what items lie directly above them in the tree.

Example:

You are here: Site root > First Directory > Second Directory > Current location

 

9.4 Link Groups

Task:

Group links structurally and identify the group with the title attribute.

Group links via one of the following mechanisms (in descending order of preference):
  • ul or ol
  • div
  • map

When links are grouped into logical sets (for example, in a navigation bar that appears on every page in a site) they should be marked up as a unit. Navigation bars are usually the first thing someone encounters on a page. People who are sighted are often able to ignore navigation parts and start reading the content of the page. Someone using a screen reader must first listen to the text of each link in the navigation bar before reading the interesting content. There are several ways to mark up content so that a user with a screen reader can jump over the navigation bar and avoid reading all of the links.

Although graphical menus and link groups are accessible when alt attributes are used, there are advantages to creating navigation menus that are completely text-based. Graphical text is not easily scalable. The size of graphical text cannot be increased easily by those who may need a larger font. Alternatively, text based menus allow for relative font sizes to be used on menu links. Relative font sizes can be easily increased in most browsers without the use of assistive technology.

Editorial Note: The above paragraph outlines benefits for using text-based navigation. It may be appropriate to expand these ideas into an optional technique in a future draft.

9.7 Hide link groups

Task:

Provide a style sheet that allows users to hide the set of navigation links.

CSS to hide link groups

 

2.5 Specifying colors

Task:

Use CSS properties to specify colors

Use the following CSS properties to specify colors:
  • 'color', for foreground text color.
  • 'background-color' ,for background colors.
  • 'border-color', 'outline-color' for border colors.
  • For link colors, refer to the :link, :visited, and :active pseudo-classes.

2.6 Foreground and background contrast

Task:

Ensure that foreground and background colors contrast well.

To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale). Also try taking the printout and copying it for two or three generations to see how it degrades. This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are too small or indistinct to hold up well.

Editorial Note: Still want to recommend this test? Instead could recommend brewer palette or other techniques.

2.7 Specifying fore- and background colors

Task:

If specifying a foreground color, always specify a background color as well (and vice versa).

2.8 Conveying information through multiple means (not just color)

Task:

Ensure that information is not conveyed through color alone

For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links).
Example:
For instance, in this document, examples are styled by default (through style sheets) as follows:
  • They are surrounded by a border.
  • They use a different background color.
  • They begin with the word "Example" or "Deprecated Example".
  • They also end with the phrase "End example", but that phrase is hidden by default with 'display: none'. For user agents that don't support style sheets or when style sheets are turned off, this text helps delineate the end of an example for readers who may not be able to see the border around the example.

2.12 Formatting and positioning of text

Task:

Use CSS2 properties to control the formatting and position of text

 
  • Indentation: 'text-indent'. Do not use the BLOCKQUOTE or any other structural element to indent text.
  • Letter/word spacing: 'letter-spacing', 'word-spacing'.
  • White space: 'white-space'. This property controls the white space processing of an element's content.
  • Text direction: 'direction', 'unicode-bidi'.
  • The :first-letter and :first-line pseudo-elements allow authors to refer to the first letter or line of a paragraph of text.

2.14 Creating rules and borders

Task:

Use style sheets to create rules and borders.

Rules and borders may convey the notion of "separation" to visually enabled users but that meaning cannot be inferred out of a visual context.

Use these CSS properties to specify border styles:

  • 'border', 'border-width', 'border-style', 'border-color'.
  • 'border-spacing' and 'border-collapse' for tables.
  • 'outline, 'outline-color', 'outline-style', and 'outline-width' for dynamic outlines.

<code...>

4.1 Creating layout, positioning, layering, and alignment

Task:

Use style sheets to create layout, positioning, layering, and alignment.

Layout, positioning, layering, and alignment should be done through style sheets (notably by using CSS floats and absolute positioning):
  • 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. Use 'text-align: center' instead of the deprecated CENTER element.
  • 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces (&nbsp;).
  • 'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects. The positioning properties may be used to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more.
  • The 'empty-cells' property allows users to leave table cells empty and still give them proper borders on the screen or on paper. A data cell that is meant to be empty should not be filled with white space or a non-breaking space just to achieve a visual effect.

4.3 Providing good structural markup for graceful degradation

Task:

@@something about using structural markup and document order

Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. The order in which items appear on a screen may be different than the order they are found in the source document.

 

2.12 ???????????? (maybe this matches better with Guideline 4.1)

Formatting and positioning of text
Task:
Use CSS2 properties to control the formatting and position of text


Indentation: 'text-indent'. Do not use the BLOCKQUOTE or any other structural element to indent text.

Letter/word spacing: 'letter-spacing', 'word-spacing'.

White space: 'white-space'. This property controls the white space processing of an element's content.

Text direction: 'direction', 'unicode-bidi'.

The :first-letter and :first-line pseudo-elements allow authors to refer to the first letter or line of a paragraph of text.


Example:
When letters are separated by whitespace they are read as individual letters. Thus, "H E L L O" will be read by a screen reader as the individual letters, 'H', 'E', 'L', 'L', 'O' rather than the word "hello." Create the same visual effect with the 'word-spacing' property applied to "HELLO". Text without spaces will be transformed effectively to speech.

@@example showing use of "word-spacing
Example:
This example shows how to use style sheets to create a drop-cap effect.

<code>

4.5 Using ACSS to create auditory presentation

Task:

@@

CSS2's aural properties provide information to non-sighted users and voice-browser users much in the same way fonts provide visual information.

The following properties are part of CSS2's aural cascading style sheets.

  • 'volume' controls the volume of spoken text.
  • 'speak' controls whether content will be spoken and, if so, whether it will be spelled or spoken as words.
  • 'pause', 'pause-before', and 'pause-after' control pauses before and after content is spoken. This allows users to separate content for better comprehension.
  • 'cue', 'cue-before', and 'cue-after' specify a sound to be played before and after content, which can be valuable for orientation (much like a visual icon).
  • 'play-during' controls background sounds while an element is rendered (much like a background image).
  • 'azimuth' and 'elevation' provide dimension to sound, which allows users to distinguish voices, for example.
  • 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' control the quality of spoken content. By varying these properties for different elements, users can fine-tune how content is presented aurally.
  • 'speak-punctuation' and 'speak-numeral' control how numbers and punctuation are spoken, which has an effect on the quality of the experience of aural browsing.

Furthermore, the 'speak-header' property describes how table header information is to be spoken before a table cell.

Example:
This example shows how various sound qualities (including 'voice-family', which is something like an audio font) can let a user know that spoken content is a heading.

14.2 Grouping form controls

Task:

Use the fieldset and legend elements in HTML 4 to group form controls logically.

Content developers should group information where natural and appropriate. When form controls can be grouped into logical units, use the fieldset element and label those units with the legend element.

Editorial Note: Try to make this less subjective, i.e. replace "natural," "appropriate," and "logical units" with something more objective.

14.3 Grouping options of select elements

Task:

Use the optgroup to group options logically under the select element.

Content developers should group information where natural and appropriate. For long lists of menu selections (which may be difficult to track), content developers should group select items (defined by option ) into a hierarchy using the optgroup element. Specifies a label for the group of options with the label attribute on optgroup.

2.12 ???????????? (maybe this matches better with Guideline 4.1)

Formatting and positioning of text
Task:
Use CSS2 properties to control the formatting and position of text


Indentation: 'text-indent'. Do not use the BLOCKQUOTE or any other structural element to indent text.

Letter/word spacing: 'letter-spacing', 'word-spacing'.

White space: 'white-space'. This property controls the white space processing of an element's content.

Text direction: 'direction', 'unicode-bidi'.

The :first-letter and :first-line pseudo-elements allow authors to refer to the first letter or line of a paragraph of text.


Example:
When letters are separated by whitespace they are read as individual letters. Thus, "H E L L O" will be read by a screen reader as the individual letters, 'H', 'E', 'L', 'L', 'O' rather than the word "hello." Create the same visual effect with the 'word-spacing' property applied to "HELLO". Text without spaces will be transformed effectively to speech.

@@example showing use of "word-spacing
Example:
This example shows how to use style sheets to create a drop-cap effect.

<code>

4.5 Using ACSS to create auditory presentation

Task:

@@

CSS2's aural properties provide information to non-sighted users and voice-browser users much in the same way fonts provide visual information.

The following properties are part of CSS2's aural cascading style sheets.

  • 'volume' controls the volume of spoken text.
  • 'speak' controls whether content will be spoken and, if so, whether it will be spelled or spoken as words.
  • 'pause', 'pause-before', and 'pause-after' control pauses before and after content is spoken. This allows users to separate content for better comprehension.
  • 'cue', 'cue-before', and 'cue-after' specify a sound to be played before and after content, which can be valuable for orientation (much like a visual icon).
  • 'play-during' controls background sounds while an element is rendered (much like a background image).
  • 'azimuth' and 'elevation' provide dimension to sound, which allows users to distinguish voices, for example.
  • 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' control the quality of spoken content. By varying these properties for different elements, users can fine-tune how content is presented aurally.
  • 'speak-punctuation' and 'speak-numeral' control how numbers and punctuation are spoken, which has an effect on the quality of the experience of aural browsing.

Furthermore, the 'speak-header' property describes how table header information is to be spoken before a table cell.

Example:
This example shows how various sound qualities (including 'voice-family', which is something like an audio font) can let a user know that spoken content is a heading.


 
         
Success Criteria 3:

Level 3 Success Criteria for Guideline 2.4

  1. Information is provided that would indicate at least one logical sequence in which to read a document. [I]
  2. Diagrams are constructed so that they have structure that users can access. [I]
  3. Logical tab order has been created. [I]
    Editorial Note: "logical tab order" may not be testable.
  4. There is a statement associated with the content asserting that items from the following list were considered: [V]
    1. Breaking up text into logical paragraphs,
    2. Dividing documents, especially very long ones, into hierarchical sections and subsections with clear and informative titles,
    3. Supplying an informative title for each page or resource that can be accessed independently (for example, from a search results page),
      Editorial Note: If the requirement for informative titles is testable (in Guideline 3.1) and remains a Level 2 success criteria, then consider dropping this criteria.
    4. Supplying a unique title for each page or resource that can be accessed independently (for example, from a search results page),
    5. Revealing important non-hierarchical relationships, such as cross-references so that the relationships are represented unambiguously in the markup or data model.
      Editorial Note: Are there any others?
  5. Structural emphasis is evident on at least the following displays:
    1. black and white monitor,
    2. low resolution screens (160 x 160 pixels),
    3. "mono" audio playback devices.

    [V]

 

   2.1 The title element.
Task:
Use the title element to describe the document.

All documents, including individual frames in a frameset, should have a title element that defines in a simple phrase the purpose of the document.

Note that the (mandatory) title element, which only appears once in a document, is different from the title attribute, which applies to almost every HTML 4.01 element.

Example:
This example defines a document's title.

<code section>

8.3 Linear reading order of tables

Task:

Create a logical reading order of cells in layout tables.

Editorial Note: Instead of providing a linear text alternative, ensure that the table can be linearized.

Tables used to lay out pages where cell text wraps pose problems for older screen readers that do not interpret the source HTML or browsers that do not allow navigation of individual table cells. These screen readers will read across the page, reading sentences on the same row from different columns as one sentence.

For example, if a table is rendered like this on the screen:

 <code

This might be read by a screen reader as:

There is a 30% chance of Classes at the University rain showers this morning, of Wisconsin will resume but they should stop before on September 3rd. the weekend.

Screen readers that read the source HTML will recognize the structure of each cell, but for older screen readers, content developers may minimize the risk of word wrapping by limiting the amount of text in each cell. Also, the longest chunks of text should all be in the last column (rightmost for left-to-right tables). This way, if they wrap, they will still be read coherently. Content developers should test tables for wrapping with a browser window dimension of "640x480".

Editorial Note: 

Internationalization issues with recommending longest text in last column? Wrapping less of an issue these days? Can test wrapping by increasing font size or resizing window, don't need to give exact dimensions do we?

Since table markup is structural, and we suggest separating structure from presentation, we recommend using style sheets to create layout, alignment, and presentation effects. Thus, the two columns in the above example could have been created using style sheets. Please refer to the section on style sheets for more information.

It is usually very simple to linearize a table used to layout a page - simply strip the table markup from the table. There are several tools that do this, and it is becoming more common for screen readers and some browsers to linearize tables.

However, linearizing data tables requires a different strategy. Since data cells rely on the information provided by surrounding and header cells, the relationship information that is available visually needs to be translated into the linear table.

For example, specify the column layout order. The natural language writing direction may affect column layout and thus the order of a linearized table. The dir attribute specifies column layout order (e.g., dir="rtl" specifies right-to-left layout).

Editorial Note: also the case for layout tables?

Editorial Note: Provide an example

Editorial Note: again, there are tools to help produce linearized versions of data tables. We will provide a link

This markup will also help browsers linearize tables (also called table "serialization"). A row-based linear version may be created by reading the row header, then preceding each cell with the cell's column header. Or, the linearization might be column-based. Future browsers and assistive technologies will be able to automatically translate tables into linear sequences or navigate a table cell by cell if data is labeled appropriately. The WAI Evaluation and Repair Tools Working Group maintains a list of tools some of which help authors determine if tables will linearize in a readable order. Refer to [WAI-ER].

Quicktest! To get a better understanding of how a screen reader would read a table, run a piece of paper down the page and read your table line by line.

 

10.8 ASCII art

Task:

Provide a means to skip over multi-line ASCII art.

Avoid ASCII art (character illustrations) and use real images instead since it is easier to supply a text equivalent for images. However, if ASCII art must be used provide a link to jump over the ASCII art.

If the ASCII art is complex, ensure that the text equivalent adequately describes it.

14.1 Tab order in forms

Task:

Create a logical tab order through links, form controls, and objects.

Editorial Note: Describe use of accesskey. Indicate whether links, form controls, and objects have their own "tabspaces" or whether they share a common one.

 


 

 CSS 4.1 good here too
Informative

 

Who Benefits from Guideline 2.4 (Informative)

  • When the logical structure is provided in markup or a data model,
    • Users with physical disabilities can use structure to more easily jump between paragraphs, chapters, sections etc.
    • Users with cognitive disabilities can use structure (chapter titles, headers, etc.) to provide more context for the text that follows them. They also provide warning of a change in context and reorient the user to the new focus.
    • Users with blindness or low vision can jump from header to header to get an overview or to more quickly "skim" to the section they are interested in.
    • Readers with low vision can sometimes (depending on display technology) change how chapter titles and headers are displayed to make them more visible and easier to use when skimming the document.
    • the content can be presented on a variety of devices because the device software can choose only those elements of the content that it is able to display and display them in the most effective way for that device.
  • Providing different navigation mechanisms can provide a better match between different people's skills, background knowledge, visual vs. text orientation, and the type of information they are seeking at the moment.
  • Individuals with cognitive disabilities may find it easier to ask for what they want than to deduce its location from categorical choices.
  • Individuals with low vision or blindness may find search techniques that fetch everything that relates to a topic of interest to be easier than techniques that require them to scan lists or content for the items.
  • Presentation that emphasizes structure:
    • enables users with cognitive and visual disabilities to orient themselves within the content,
    • enables all users to move quickly through the content and notice major content divisions
    • enables all users, but particularly users with visual or cognitive disabilities to focus on important content,
    • enables all users, but particularly users with visual or cognitive disabilities to distinguish the different types of content.

Examples of Guideline 2.4 (Informative)

  • Example 1: documentation for a product.

    Identifying chapters in the structure of a book is appropriate and accepted use of labeling the structure. Within the chapters, headings identify (label) changes in context and highlight ideas contained in the following text. Subtle differences between the appearance of the chapter title and the section headings helps the user understand the hierarchy and relationship between the title and headings. The difference might be font size and margin indentation when presented visually, and spoken in a different voice or preceded by a sound when presented auditorily.

  • Example 2: a scalable image of a bicycle.

    Lines and a circle (spokes and rim) are grouped into a "wheel." Lines in a triangle that attach to each wheel are grouped into a "frame."

  • Example 3: user interface.

    User interface controls are divided into organized groups.

  • Example 4: a data table.

    Groups of rows or columns are labeled with headers.

  • Example 5: an audio presentation.

    An audio rendering of a document, generated according to a style sheet, uses a different, more formal voice to read titles and headers so the listener can easily identify the words as a title and not part of the running text.