Draft general technique for SC 1.3.5 (reading order)

Here's a very old piece of work that might serve as a draft general technique for 1.3.5 (reading order).

This might work for either (or both) of the techniques Becky suggested drafting:
1. Including meaning-critical sequences in the programmatically determined reading order AND
2.  preserving meaning-critical sequences in alternate presentations.

This was originally written in October 2004 when the reading-order SC was listed under GL 2.4-- it probably needs a good deal of work.

Some of the markup is from the techniques dtd in use at the time. Pls ignore...


<technique>
<description>Visual design often gives important cues to the content's organization-its structure. However, complex layouts may be difficult to interpret for people who have learning disabilities or cognitive impairments and for older users. A page that appears well organized visually may be difficult to understand for someone who is blind.
<p>These difficulties may be reduced or avoided by:</p>
<ulist>
<item><p>using markup to clearly define the sections of the document and their purpose; </p></item>
<item><p>Using ordered lists for sections, subsections, and paragraphs as appropriate;</p></item>
<item><p> ordering content in the source document so that it makes sense when read aloud; and</p></item>
<item><p>using a style sheet to control visual and auditory presentation, including a style sheet to create an effective visual arrangement that may be different from the spoken order of the content.</p></item>
</ulist>
<p>To summarize, correct use of structural markup ensures that standards-compliant user agents can determine the order in which the content should be presented, even when the user agent must adapt the presentation to meet the needs of people with disabilities.</p>
<Resources>
<see also>
<HTML Techniques>
<ulist>
<item><p><loc href="">Section headings</loc></p></item>
<item><p><loc href="">Header misuse</loc></p></item>
<item><p><loc href="">CSS instead of presentational markup </loc></p></item>
<item><p><loc href="">Ordered lists</loc></p></item>
<item><p><loc href="">Linear reading order of tables</loc></p></item>
<item><p><loc href="">Link groups</loc></p></item>
<item><p><loc href="">The link element and navigation tools</loc></p></item>
</ulist>
</HTML Techniques>
<CSS Techniques>
<ulist>
<item><p><loc href="">Creating layout, positioning, layering, and alignment</loc></p>
<p><ednote><edtext>It would be good to have a technique about ordering DIV elements in the source document to create a linearized reading order.</edtext></ednote></p></item> 
<item><p><loc href="">Positioning (float, position)</loc></p></item>
<item><p><loc href="">Providing additional structural information</loc></p>
<p><ednote><edtext>CSS Technique 6.2 has important user agent issues; the :before and :after pseudoclasses are not supported by IE, so this technique should not be used to provide really important structural information.]</edtext></ednote></p></item>
<item><p><loc href="">Providing structural markup for graceful degradation</loc></p></item>
<item><p><loc href="">Creating auditory presentations</loc></p></item>
</ulist>
</CSS Techniques>
</see also>
</resources>
</technique>
Visual layout
Design task
Use visual design to make clear how the content is organized.
The visual layout of Web pages may be quite complex. For example, it is common for Web pages to include
* a header that contains graphics and text identifying the site and the organization it represents as well as multiple navigation links; 
* navigation links down either side of the screen; 
* a footer containing links to copyright information, policies, and other legal notices; 
* a "main" content area divided into several columns, including text and other material such as photographs, charts, decorative images, form controls, buttons, sidebars, animations, etc. 
Effective visual design is an important tool in helping users perceive the organization of the page.
* Use fonts, color, and positioning to identify related items (for example, a group of links, news items about related topics). 
* Use graphics and white space to break lengthy text into smaller, more readable units. 
* Use color, size, and position to draw the user's eye to important information or interface elements (for example, links or buttons that allow the user to proceed to the next step in a sequence). 
Note that use of HTML tables to control layout is deprecated in WCAG 2.0. The Working Group recognizes that it may be some time before Web designers can completely eliminate use of layout tables, developers are strongly encouraged to control layout with Cascading Style Sheets (CSS).
Resources
HTML Techniques
5.12 CSS instead of presentational markup
5.13 Use non-deprecated presentational markup
5.8 Misuse of blockquote
6.2 Abuse of list markup
8.1 Layout tables (deprecated)
8.2 Table elements allowed in layout tables
8.3 Summaries of layout tables
CSS Techniques
7.2 Specifying colors
8.2 Specifying font characteristics
9.1 Creating stylized text with CSS rather than using raster images
13.3 Conveying semantics via presentation
 
<technique>
<short-name>Sections of documents</short-name>
<applies to>
<guideline idref="">
</guideline>
</applies to>
<task>
Divide documents into hierarchical sections and subsections with clear and informative titles.</task>
<description>
<p>Users can take advantage of functionality built into user agents (including assistive technology) to gain an overview of the document's organization and to navigate easily from section to section.</p>
<p>If you are updating an existing document, you may wish to make an outline of the content, or use a tool such as the Accessibility Toolbar to display the heading structure of the document. The heading structure should serve as an outline of the content, showing what the document contains and how it is organized. If the outline does not appear to serve this purpose, one or more of the following steps may be necessary:</p>
<ulist>
<item><p>to modify the outline to reflect the document's organization more accurately; </p></item>
<item><p>to add material the outline reveals to be needed; or even</p></item> 
<item><p>to delete content which the outline shows to be unnecessary. </p></item>
</ulist>
<p>When planning new Web documents, determine the sections into which content will be organized, and use the appropriate markup to identify the sections. Make an outline to define the logical organization or hierarchy of the sections; ensure that all the content is included in the appropriate place in the outline. If you find that your page includes content that does not seem to fit within the outline, you may wish either to revise the outline so that it includes the proper headings-or put the "outlying" content in a more appropriate place on the site.</p>
<Resources>
<see also>
<HTML Techniques>
<ulist>
<item><p><loc href="">Section headings</loc></p></item>
<item><p><loc href="">Header misuse</loc></p></item>
</ulist>
</HTML Techniques>
<CSS Techniques>
<ulist>
<item><p><loc href="">Specifying font characteristics</loc></p></item>
<item><p><loc href="">Creating stylized text with CSS rather than using raster images</loc></p></item>
</ulist>
</CSS Techniques>
</see also>
</resources>
</technique>


"Good design is accessible design."

Dr. John M. Slatin, Director 
Accessibility Institute
University of Texas at Austin 
FAC 248C 
1 University Station G9600 
Austin, TX 78712 
ph 512-495-4288, fax 512-495-4524 
email jslatin@mail.utexas.edu 
Web http://www.utexas.edu/research/accessibility

Received on Tuesday, 3 January 2006 17:30:02 UTC