<html xmlns:un="http://usablenet.com/namespaces/508_rules">
   <link rel="stylesheet" href="josh.css">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   
      <title>Detailed View for rule: Use markup rather than images</title>
      <!--
  508/W3C Accessibility Suite OEM V2 for Macromedia Dreamweaver
  (C) Copyright 2001-2005 UsableNet Inc. All rights reserved.
  -->
   </head>
   <body bgcolor="#ffffff">
      <div id="Description">
         <table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
            <tr>
               <td valign="top" nowrap="true" class="name">Use markup rather than images</td>
               <td valign="top" nowrap="true" class="compatibility">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
            </tr>
            <tr>
               <td valign="top" align="right" nowrap="true" colspan="2" class="requirements">WAI / WCAG 1.0 Priority 2 checkpoint 3.1</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Description</b><br>
                  
                  <p>The page contains images that might contain information
                     that is not appropriately marked up in HTML.<br>
                     	 For example, MathML may be used to mark up mathematical equations, and
                     style sheets to format text and control 
                     layout. <br>
                     It is best to avoid using images to represent text.  A better choice would be to use text and style sheets.
                     
                  </p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>How to check</b>
                  
                  
                  <p>
                     If the image contains 
                     
                  </p>
                  
                  <ul>
                     
                     <li> text that is rendered graphically in a fancy font, use the CSS
                        properties for fonts to achieve a similar effect;
                     </li>
                     
                     <li>
                        a mathematical formula, then use MathML to encode it; see the <strong>W3C page on MathML</strong>
                        [http://www.w3.org/Math/]
                        .
                        
                     </li>
                     
                  </ul>
                  
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Explanation</b><br>
                  
                  
                  <p>The W3C states (<strong>http://www.w3.org/TR/WCAG10-CORE-TECHS/#structure</strong>
                     [http://www.w3.org/TR/WCAG10-CORE-TECHS/#structure]
                     ):
                  </p>
                  	 
                  <blockquote>
                     	 
                     
                     <p>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.
                     </p>
                     
                     
                     <p>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
                        <strong>complemented</strong> by visual cues or other means such as horizontal
                        rules, but should not be replaced by them.
                     </p>
                     
                     
                     <p>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.
                     </p>
                     
                     
                     <p>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. <strong>Note:</strong> 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.
                     </p>
                     
                  </blockquote>
                  
                  
                  <p>
                     In another document (<strong>Web Content Accessibility Guidelines 1.0</strong>
                     [http://www.w3.org/TR/WCAG10/]
                     ) it says:
                     
                  </p>
                  
                  <blockquote>
                     
                     <p>
                        <strong>Guideline 3.  Use markup and style sheets and do so properly.
                           <br>
                           Mark up documents with the proper structural elements. Control
                           presentation with style sheets rather than with presentation elements
                           and attributes.</strong> 
                        
                     </p>
                     
                     <p>
                        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 [...] . 
                        
                     </p>
                     
                     <p>
                        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. 
                        
                     </p>
                     
                     <p>
                        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.  
                        
                     </p>
                     
                  </blockquote>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>