Text/Link Accessibility for Screen Readers

Text

We begin by considering how JAWS 4.51 will read a simple web page with text formatting. If one listens to the first test page in JAWS, one could conclude several things about how JAWS reads text:

Title bar - read aloud
Type of heading - read aloud
Number of headings and number of links on page - read aloud at beginning
Font tags - Not read aloud nor is their effect in terms of font, size, or color indicated. However, the keystroke combination Insert+5 will read the color of the text and the background.
Hidden text - Text which is made the same color as the background of the page through the use of font tags is read as normal text thus it appears this "hidden text" technique can be used to provide guidance to the user of a screen reader where one does not want this guidance to be visible in the browser. One possible application of this would be in the use of frames where one could put hidden text in that indicates the purpose of the frame (see the frames section).
<b> and <strong> are both read identically, with some emphasis
<i> and <em> appear to be read the same as normal text
Words will occasionally be mispronounced -- for example if the pronunciation is dependent on the context (two pronunciations of "read")

The next sample is exactly the same as the first sample except that the line at the end is changed to have two misspellings. The effect in this case is dramatic: all of the earlier text to be skipped and only the sentence with the problem is read. If this is generally true, it suggests that spellchecking and proofreading of a web page is crucial for accessibility.

Some of the guidance regarding accessibility and text that applies to screen readers is as follows:

Use header elements (h1-h6) to convey document structure rather than for font effects. The rationale for this is that users of a screen reader usually don't care and aren't told about fonts but they do care about document structure. Preserving header elements for document structure means that screen reader users can interpret header elements to refer to structure.
Similarly, use <blockquote> only for quotations but not simply for indentation effects. For the latter, you can use the Cascading Style Sheets (CSS) properties of margin-left and margin-right. The rationale is the same as for header elements; i.e. users of a screen reader don't care about appearance but do care about structure and meaning. The blockquote has a clearly defined association with block quotations (those that go on for several lines) and using it for indentation leads to ambiguity in interpretation by those using screen readers.
Identify the primary natural language of a document (Checkpoint 4.3) and clearly identify changes in the natural language of a document's text and any text equivalents (Checkpoint 4.1) To do both of these, one can use the lang attribute. For example, <HTML lang="fr"> would mean that the primary language of the document (since the HTML tag refers to the entire document) is French. Language codes can be specified for sections of the document by specifying the lang attribute for the HTML element for that section. SPAN tags can be used to define a section if no HTML tag describes the entire section. For example, if an entire paragraph constitutes a section, the lang attribute could be added to the P tag. Language codes (which are two letters) can be optionally followed by a subcode, e.g. lang="en-US" would specify the U.S. version of English.
Use logical elements (em, strong) rather than presentational elements (b, i) -- however, our limited tests of these show little, if any, difference in their treatment by JAWS
Specify the expansion of each abbreviation or acronym in a document when it first occurs (Checkpoint 4.2) Mark up abbreviations and acronyms with ABBR and ACRONYM and use "title" to indicate the expansion. For example, <P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>! and <ABBR title="Social Security Number">SS#</ABBR>. <acronym> has no inherent effect on text display but is supported beginning in Netscape 6 and Internet Explorer 4. <abbr> also has no inherent effect on text display but can be used as a selector in a style sheet. It is supported beginning in Netscape 6 and Internet Explorer 5.5 These tags can be useful for screen readers, translation systems, and search engines.
Mark up quotations. For an inline quote, use <q cite=url>Put quote here</q>where URL is the source document from which the quotation was taken. For a longer quote use blockquote instead of q. Q is supported beginning with Netscape 6 and Internet Explorer 4.
For ordered lists that are nested within other ordered lists, use compound numbers. For example, a list numbered 1, 1.1., 1.2, 2, is more informative than a list numbered 1, 1, 2, 2. Unfortunately this can't be done with HTML but can be done with CSS2 (from HTML Techniques for Web Accessibility Guidelines 1.0):

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

Some of the guidance advocating the use of CSS for accessibility purposes

[Use style sheets to control layout and presentation (Checkpoint 3.3) (e.g. use CSS font property instead of the font tag) and
Use relative rather than absolute values in markup language attribute values and style sheet property values (Checkpoint 3.4)]

does not seem to be apply to screen readers but to permit browser users to use their own style sheet for other kinds of visual disabilities that can be addressed by magnification, color change, etc. When text is formatted with CSS, users can utilize their own style sheets to format text to meet their needs. This allows users with limited vision or colorblindness to change the size or color of text, for example. By contrast, if HTML is used to format text, this formatting overrides all CSS styles, including user-defined styles.

However, CSS2 introduces aural CSS which controls how a page would be read just as fonts control how it is displayed. If CSS is already been used to control appearance, addition of CSS aural features is easier than if HTML formatting is used.

Links

Navigation links are often displayed at the top of a page or down the left side of the page. This means that a screen reader will read the links before getting to the content of the page. Since these links are often repeated from page to page, it is important to provide a method to skip repetitive navigational links. There are several methods to do this:

Link a small transparent image at the beginning of the links to an anchor just past the links and before the main content. The alt text description for this image would read "skip to content" or "skip navigation." Example. (The Dreamweaver accessibility report will produce an error message for ../images smaller than 2x2 pixels so if this report is to be used, one may want to use a 2x2 image to avoid this message.)
Create a "Skip Navigation" text link instead of the image link above but with the same function
Put the links in one frame and the content in another (see frames section)

Last revised; April 22, 2003, comments to William Pegram, wpegram@nvcc.edu