Searchbox is here: Alt plus 4
Accessibility information page
|
Navigation begins here
Home (1)|Tutorial|
1. Introduction|
2. Definitions|
5. Structure|
6. Navigation|
7. Appearance|
8. Content|
9. Data|
10. Multimedia|
11. Evaluation|
Structure
In addition to reading text, screen readers and browsers can provide information about the structure of web pages through describing headings, tables, and frames. This is critical for persons who are blind, since visual cues, such as relative text size, colors, positioning on the page, grouping of objects, and so forth, are unavailable to them. Screen readers identify characteristics of text, such as subject hierarchy, links, and table structure, which persons using screen readers can invoke with keyboard commands.
Headings
Headings help describe information on a page since they establish the relative importance of content for those using screen readers. They also benefit sighted users who can see the hierarchy more explicitly, and content writers who are compelled to present information logically.
Code Example:
<h1>How To</h1> <h2>Structure</h2> <h3>Headings</h3>
Remember that screen readers will use the same sequence to read headings that they use for reading text, but without the content, so headings should make sense when read aloud, and should not be redundant. On this site, for example, headings are limited to the primary page heading on the left hand navigation bar, the content page heading and meaningful clusters of information.
Until recently, using tables to structure websites was not recommended, since older screen readers would read text across, and not down, columns. That problem has been largely resolved, according to John Slatin. And tables that structure sites can be made accessible if a few rules are followed.
Still, strictly speaking, style sheets should be used for content positioning rather than tables, as in this website mock-up. Just be aware that the design process is more tedious and results may vary between browsers.
To use tables: First, table parameters should be set using percentages (for width and height) rather than fixed. This enables users to resize the site according to their needs, while ensuring that information remains viewable. This is especially helpful to persons using screen enlargement software since they can reduce the horizontal scrolling they must do by making their browser page long and narrow, while the flow of text remains intact.
Code Example:
<table width="100%" <tr> <td width="7%" height="5%"> </td> <td width="8%" height="5%"> </td> <td width="70%" height="5%" colspan="6"> </td> <td width="15%" height="5%"> </td> </tr>
Second, a summary statement indicating the table's purpose and structure has to be included.
Code Example:
<body> <table width="100%" border="1" cellspacing="0" cellpadding="0" summary="This is a structural table of 6 rows and 3 columns"> <tr>
Nested tables are another matter; assistive technology will read the first cell of a table, and then the entire table in the following cell. If you use nested tables in your website, be sure to check how they are read in a text only format.
Frames are generally not recommended for sites since they are not supported by all adaptive technology equipment. Having said that, frames can be used so long as equivalent content is provided in a No frames section.
Code Example:
Insert code for alternative, frame-based page of website.
