Use markup rather than images  
WAI / WCAG 1.0 Priority 2 checkpoint 3.1
 
 
Issue Description

The page contains images that might contain information that is not appropriately marked up in HTML.
For example, MathML may be used to mark up mathematical equations, and style sheets to format text and control layout.
It is best to avoid using images to represent text. A better choice would be to use text and style sheets.

 
 
How to check

If the image contains

  • text that is rendered graphically in a fancy font, use the CSS properties for fonts to achieve a similar effect;
  • a mathematical formula, then use MathML to encode it; see the W3C page on MathML [http://www.w3.org/Math/] .
 
 
Issue Explanation

The W3C states (http://www.w3.org/TR/WCAG10-CORE-TECHS/#structure [http://www.w3.org/TR/WCAG10-CORE-TECHS/#structure] ):

When designing a document or series of documents, content developers should strive first to identify the desired structure for their documents before evaluating how the documents will be presented to the user. Distinguishing the structure of a document from how the content is presented offers a number of advantages, including improved accessibility, manageability, and portability.

Identifying what is structure and what is presentation may be challenging at times. For instance, many content developers consider that a horizontal line communicates a structural division. This may be true for sighted users, but to unsighted users or users without graphical browsers, a horizontal line may have next to no meaning. For example, in HTML content developers should use the HTML 4.01 heading elements (H1-H6) to identify new sections. These may be complemented by visual cues or other means such as horizontal rules, but should not be replaced by them.

The opposite holds true as well. Content developers should not use structural elements to achieve presentation effects. For instance in HTML, even though the BLOCKQUOTE element may cause indented text in some browsers, it is designed to identify a quotation, not to create a presentation side-effect. BLOCKQUOTE elements used for indentation confuse users and search robots alike, who expect the element to be used to mark up block quotations.

To determine if content is structural or presentational, create an outline of the document. Each point in the hierarchy denotes a structural change. Use structural markup to mark these changes and presentational markup to make them more apparent visually and aurally. Notice that horizontal rules will not appear in this outline and therefore are not structural, but presentational. Note: This quick test addresses chapter, section, and paragraph structure. To determine structure within phrases, look for abbreviations, changes in natural language, definitions, and list items.

In another document (Web Content Accessibility Guidelines 1.0 [http://www.w3.org/TR/WCAG10/] ) it says:

Guideline 3. Use markup and style sheets and do so properly.
Mark up documents with the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes.

Using markup improperly (not according to specification) hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices [...] .

Content developers may be tempted to use (or misuse) constructs that achieve a desired formatting effect on older browsers. These practices cause accessibility problems. It is best to consider whether the formatting effect is critical enough to warrant making the document inaccessible to some users.

At the other extreme, content developers must not sacrifice appropriate markup because a certain browser or assistive technology does not process it correctly. For example, it is appropriate to use the TABLE element in HTML to mark up tabular information even though some older screen readers may not handle side-by-side text correctly (refer to checkpoint 10.3). Using TABLE correctly and creating tables that transform easily (refer to guideline 5) makes it possible for software to render tables in a way other than as two-dimensional grids.