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" 1.9 , 1.10 and Raster image 1.11 but they might also apply. And 1.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
|
2.4.1 Navigation mechanismsThis technique satisfies guideline(s):Task:Ensure that structure and/or alternate navigation mechanisms have been added to facilitate orientation and movement in content.
2.4.2 Bread crumbsThis technique satisfies guideline(s):
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
2.4 The
|
9.4 Link GroupsTask:Group links structurally and identify the group with the
Group links via one of the following mechanisms (in descending order of
preference):
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 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 groupsTask:Provide a style sheet that allows users to hide the set of navigation links.
CSS to hide link groups
|
1.5 Specifying colorsTask:Use CSS properties to specify colors
Use the following CSS properties to specify colors:
1.6 Foreground and background contrastTask: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. 1.7 Specifying fore- and background colorsTask:If specifying a foreground color, always specify a background color as well (and vice versa). 1.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:
1.12 Formatting and positioning of textTask:Use CSS2 properties to control the formatting and position of text
1.14 Creating rules and bordersTask: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:
<code...> 3.1 Creating layout, positioning, layering, and alignmentTask: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):
3.3 Providing good structural markup for graceful degradationTask:@@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.
1.12 ???????????? (maybe this matches better with Guideline 4.1)Formatting and positioning of text 3.5 Using ACSS to create auditory presentationTask:@@
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.
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.
3.5 Using ACSS to create auditory presentationTask:@@
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.
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
|
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 tablesTask: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 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 artTask: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 formsTask: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)
Examples of Guideline 2.4 (Informative)
|