University of Houston-Clear LakeEdit    Search  Home  Login/Logout  
University of Houston-Clear Lake  
<< Disability Services Home

Accessible Web Pages


Overview

The World Wide Web Consortium (W3C) provides recommendations for creating accessible web pages and describes techniques to satisfy Web Content Accessibility Guidelines (WCAG) 2.0, which consist of nested levels A, AA and AAA criteria, with AA considered a goal for many organizations. References: W3C Accessibility, and W3C's Techniques for WCAG 2.0.


Accessible web pages consider users with disabilities that include

  • Blindness, low vision, color blindness
  • Compromised reading ability
  • Focus/distractability issues particularly with color, movement or unpredictable layout
  • Hearing impairment
  • Hand movement limitations
  • Seizures due to photosensitivity and rapid light/color changes

Some users rely on screen readers, magnify the viewing screen (200-600%), turn off css and javascript/jquery, turn off colors, remove image displays, use their own stylesheets, and do not use a mouse. Users who do not use screen readers depend on pages to be set up with sufficent luminosity/contrast, easy-to-read font sizes and styles, ample white space between lines and borders, predictable layouts, and user-controlled movement/sound for image galleries, video and audio.

Getting the Mindset

Lenghtly checklists and automated checking for WCAG 2.0 are very limited and do not ensure accessibilty for a web page and the documents (i.e., pdf, doc, and ppt) it links to.


For example: What should the headings/outline be for a specific page? What should the alts/descriptions be for each image? What items should be logically grouped together in a particular fieldset on a form? Is there enough white space between two columns of text or some images, or a set of links? When js and css are disabled, did anything important become unavailable? Can a user tab through links and form fields in the correct order on a page? Is a page easily navigated or does it contain distracting/confusing items? Reference: WebAIM's WCAG 2.0 Checklist and disclaimer.

The more knowledgeable a developer becomes about how people with disabilities manage webpages, the more intuitive it is to implement accessibility. So, knowing more about the end users with disabilities speeds up developement. A couple of ways to gain this mindset are listed below:

click to play

Tool Summary

While multiple browsers and a variety of tools can be used to assist with creating accessible webpages, the Firefox browser is used with the following tools:

    1. Firefox add-in toolbar: Web Developer (by Chrispederick.com), available on Chrome
    2. Firefox add-in tool: Fangs (by Peter Krantz)
    3. Firefox add-in toolbar: Juicy Studios toolbar
    4. Firefox add-in toolbar: WAVE toobar, available on Chrome
    5. Vision Australia's standalone program:  Colour Contrast Analyser

Note: To access Fangs, click Tools from the Menu bar.
In order to see the Menu bar, right click in an empty area in the top (like beside a tab) and check to display the menu bar.

The image below shows Web Developer, WAVE and Juicy Studios toolbars with Fang under Firefox's Tools menu:

Techniques and Recommendations

The top topics, techniques, and recommendations for web developers to use when creating accessible webpages at UHCL are based on W3C's recommendations for WCAG 2.0 and the experiences of UHCL Disability Services with our students, faculty and staff.

1. Heading Tags

Title, Sections and Subsections with h1 - h6 Tags

Screen reading programs, like Jaws, use heading tags to convey the structure of a web page, with <h1> - <h3> being most important. Blind users rely on heading tags and do not use the visual cues of larger-sized text when scanning a page. Use heading tags in a simlar way as an outline where

  • <h1> or the highest level heading = visually displayed title on page, only one per page
  • <h2> or the next lower heading = main sections below <h1>
  • <h3> - <h6> = subsections

Headings do not have to appear "in order" as it is possible to have an < h3> physically placed before the sole <h1>

Heading Example and Verification

Example: Page Structure and Site Design has one <h1>, three <h2>, and 10 <h3> headings as follows:

  1. <h1>6 Page Structure Page Structure and Site Design</h1>
    1. <h2>Page headers</h2>
      1. <h3>Home link</h3>
      2. <h3>Global navigation</h3>
      3. <h3>Breadcrumb navigation</h3>
      4. ...
    2. <h2>Scan columns</h2>
      1. <h3>Left or right scan columns for navigation?</h3>
      2. <h3>Mailing address and contact information</h3>
      3. <h3>Advertising and the scan columns</h3>
    3. <h2>The content area</h2>
      1. <h3>Page footers</h3>
      2. <h3>Books by Patrick J. Lynch and Sarah Horton</h3>

Verification: Use one of the following:

  1. Web Developer add-on (by Chrispederick.com) for Firefox or Chrome to View Document Outline
  2. Fangs (by Peter Krantz) to view the Heading List as shown below:

2. Images

Alt for Decorative vs. Meaningful Images

  1. For images that are simply decorative, use null alt, <img alt="" />.
    Example: <img src="spacer.gif" alt="" />
  2. For images with meaningful content, including links, use <img alt="short description of purpose" />
    Example: <a href="http://www.npr.org /"><img src="nprlogo_138x86.gif" alt="NPR" /></a> would become Link Graphic NPR in a screen reader indicating the graphic is a link to NPR.
  3. Don't use longdesc attribute. It's better to either put the content of longdesc as a visible link so the descriptive page is available to all users, or put the description information directly on the page itself.

Images with Meaningful Graphical Text

Images with meaningful graphical text should be reserved for logos and branding icons. The alt attribute should convey the graphical text.

Meaningful text, like the date and location of an event, should not be in a graphic. CSS can be used to style text to complement a graphic.

Images as Headings

Images as Headings are not advised. Low vision users may have difficulty. If an image is absolutely required to be used as a heading because text is not an option, developers can display the image for visual users and write the text version of the heading off the screen for users with screen readers.

In the example below, a text version of an h1 is written off the screen:

/* .hidden allows screen readers to read text that is not visible on a display */

.hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<h1 class="hidden">UHCL Students</h1>

Image Verification and References

Verification: Turn off image displays and show all alts using Web Developer for Firefox or similar tool.

References: Jim Thatcher: Text Alternative for Images, and WebAIM: Creating Accessibile Images

3. CSS, JS, and Mouse Requirements

Page Degrades Gracefully When CSS and JS Turned Off

Not all CSS, JS and JQuery coding allows for graceful degradation.

When CSS and JS (which includes JQuery) are disabled, the page may look different, but the meaningful content must be available.

Graceful degradation does not include purely decorative content, which can possibly be a gallery of images, nor does it include optional client-side form field validation. It does mean that all headings, form fields and navigation links should be available and in correct reading order.

To test, turn off all JavaScript and CSS via the browser or browser add-on, like Web Developer.

User Can Tab to Links and Form Fields in Order

A user should move from link to link and from form field to form field on a web page with a keyboard. A mouse cannot be required.

To test, go to the top part of a webpage and step thru using the tab key. To step back, use Shift+Tab.

While tabbing through the page, the links and form fields should be displayed in order as follows:

  • Links have a(dotted) box.
    If the status bar is enabled, the content of the link is shown in the status bar at the bottom of the page. (The status bar is an optional toolbar on most browsers.)
  • Form field borders are highlighted and the cursor is inside the field.

4. Forms

<id> and <label>

<id> and <label> logically link the displayed text of a form field with its input.

WebAIM's Creating Accessible Forms provides examples of using <id> and <label> with text, checkboxes, radio buttons and drop down and includes the following example:
<label for="name">Name:</label>
<input id="name" type="text" name="textfield" />

Verification: WebAIM's WAVE is available in multiple formats including:

  1. WAVE toobar for Firefox
  2. wave.webaim.org for web page, uploaded HTML file, or pasted HTML code

<fieldset> and <legend>

<fieldset> and <legend> define a set of inputs that are related. The inputs could be a radio button response, or a set of inputs relating to a person's contact information A legend is rather like a label or caption position above the fieldset.

Fieldsets can be nested within each other.

Both fieldsets and legends have default styling that can be modified by the web developer.

Example 1: The following example shows fieldset around three text inputs for Student Contact Info:

<fieldset>
<legend>Student Contact Info</legend>
<p>
<label for="student_name">Name</label><br \>
<input id="student_name" type="text" size="50" name="Student Name">
</p>
<p>
<label for="student_email">Email</label><br \>
<input id="student_email" type="text" size="50" name="Student Email">
</p>
<p>
<label for="student_phone">Phone(s)</label><br \>
<input id="student_phone" type="text" size="50" name="Student Phone">
</p>
</fieldset>

Example 2: WebAIM's Creating Accessible Forms provides examples using fieldset with checkboxes and radio buttons and includes the following radio button example:

<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight" />
<label for="overnight">Overnight</label><br />
<input id="twoday" type="radio" name="shipping" value="twoday" />
<label for="twoday">Two day</label><br />
<input id="ground" type="radio" name="shipping" value="ground" />
<label for="ground">Ground</label>
</fieldset>

title Attribute

Do not include the title attribute with form fields.

The title attibute has not been consistently adopted by browsers and accessibility applications. In some cases, title causes confusing repetition in a form.

Title can be used when labeling an iframe (iframe title="School Calendar") and when a user can input data into a table (i.e., Paciello Group's labelling of form controls in data tables).

5. Tables: Layout, Simple Data and Complex

Tables Read in Row-Order

Tables are read in row order. A screen reader starts at the first cell in the first row of the table and reads across cells in each column until the end of the row. The reader then begins on the first cell of the second row and reads across. This is repeated until the end of the table is reached.

The table below is read as Column A, Column B, Column C, 1, 2, 3, 4, 5, 6.

Column A Column B Column C
1 2 3
4 5 6

Table Tags

The table tags used depend on the complexity of the table. Two handy references are w3c's HTML Tables wiki and WebAIM Tables. The table tags and attributes are summarized below:

  1. Use <table summary="">, <tr>, <td> in all tables.
    While summary="" is not a requirement, it can be helpful with some applications. Summary is a quick description that is not displayed on the webpage and is different than a <caption>.
    Example: summary="car mileage data by model, make and year"
  2. Consider having a visible description/interpretation of a data table that would be available to all viewers.
  3. Use one <caption> in data tables.
    Caption is displayed for all views and applications used for accessibility treat <caption> as the table's title.
  4. Use <th> for table headings in all data tables.
    Within a <tr> tag, the <th> tag is read as a table heading by screen readers.
  5. Use <th scope="row"> or <th scope="col"> in most data tables.
    Scope identifies individual entries in table headings.

    In some complex data table cases, header and id are used in lieu of scope. References and Example: WebAIM Tables
  6. Optional structure tags are
    1. One header <thead>
    2. One footer <tfoot>
    3. One or more body sets using <tbody>

Table Example and Verification Tool

Simple Data Table Example: The following example from http://webaim.org/techniques/tables/ shows the use of <tbody>, <tr>, and <th scope="col"or "row">

<table>
<caption>Shelly's Daughters</caption>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</tbody>
</table>

Verification Tool: Juicy Studio Add In for Firefox
Table Inspector identifies table headings as shown in the display below:

6. Text: Easy-to-Read Fonts, Spacing, Alignment

Font Choice

Sans-serif fonts like Tahoma, Verdana and Arial are typically the easiest to read. Other fonts should be used with care, particularly those that have stylized or cursive text.

  1. No italics (<em>), unless necessary. Consider using <strong> instead of <em>.
  2. No blinking or moving text.
  3. Limit fonts to 2-3 styles (font-families).
  4. Don't use all caps for sentences or phrases with more than two - three words.
  5. Depending on the font, consider 12 - 13px as the smallest size for text as shown below:

    Fonts 12px

    Verdana: The Ice Cream Shoppe will open for business in July. 0123456789

    Arial: The Ice Cream Shoppe will open for business in July. 0123456789

    Tahoma: The Ice Cream Shoppe will open for business in July. 0123456789

    sans-serif: The Ice Cream Shoppe will open for business in July. 0123456789

    Fonts 13px

    Verdana: The Ice Cream Shoppe will open for business in July. 0123456789

    Arial: The Ice Cream Shoppe will open for business in July. 0123456789

    Tahoma: The Ice Cream Shoppe will open for business in July. 0123456789

    sans-serif: The Ice Cream Shoppe will open for business in July. 0123456789

White Space Between Lines of Text and Edges

In order to enable users to read and scan, provide ample white space around text as follows:

  1. Break up long paragraphs.
    Consider using a bolded introduction of a few words to highlight paragraph content.
  2. Give ample padding between text, images and borders, including the edges of a monitor (i.e., left-padding: 16px;)
    Consider the cell padding needed in a table to enable clear viewing of a single cell. (i.e., padding: 6px;)
  3. Default paragraph spacing usually provides good white spacing between lines of text.
  4. For lists, consider specifying padding-bottom: 6px with <li>.
    It provides more spacing than the default, but still keeps the bullets visually grouped together.

Text Alignment

When considering text alignment, predictability is key. Where does a user expect to see the next line of text?

  • Justify: Never.
    Since justify adds spacing to force text to fill a column width, the spacing for words occurs unpredictably.
  • Left align: Best.
    The default, left-aligned text for most text.
  • Center: Use sparingly.
    Centered text requires a user to find the beginning of each line, use this sparingly, perhaps for headings, captions, and very brief text descriptions.
  • Right align: Use sparingly.
    Right aligned text is typically used in table to show a dollar amount.

Text References

7. Links

Underline Links Only

When links are included with text, underline the links, and avoid underlining other text unless it is required in order to be grammatically correct.

References:

  1. W3C's F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
  2. WebAIM Link Appearance: Underlining

Meaningful Link Names

Ambigious links are confusing and do not clearly identify a link's target as required by WCAG. Click here is a common example of an ambigious link.

A clearly named link conveys the meaning of the link. Directions to UHCL is a meaningful link name.

Note: The [Expand All] links on this page are ambigious. However, in this case, [Expand All] is an optional link to facilitate sighted users navigating the page.

8. Contrast/Luminosity for Text, Links and Images

Sufficent Contrast

Non-decorative web page content requires sufficient contrast/luminosity. The highest level of contrast is black and white, with black text on white background preferred.

Text size does make a difference when considering contrast and luminosity. W3C has defined formulas for determining sufficent contrast for 14pt and 18pt text sizes.

The following table from Accessibility and Usability at Penn State illustrates color schemes with too little contrast and ones with sufficient contrast:

Overly Subtle Color Schemes
Color Scheme Too Little Contrast Sufficient Contrast

gray/white

gray on white

gray on white

dark gray/light gray

light gray on dark gray

light gray on dark gray

teal/white

teal on white

teal on white

sea green/green

sea green on green

sea green on green

orange/white

orange on white

red-orange on white

Contrast and Luminosity Tools

WCAG 1.0 considers color brightness/difference, while WCAG 2.0 uses luminosity. For individual items, the following tools are available:

  1. Colour Contrast Analyser is an easy tool to use because the user can pick colors from open web pages and/or windows using the eyedropper, and then get a pass/fail luminosity result. The program does have to be downloaded
  2. Snook allows users to enter either a hex color value and to use sliders to adjust color components.
  3. Juicy Studio's Luminosity Colour Contrast Ratio Analyser does not require a download, but you must input the hex value of colors. To find a hex value for a color, go to w3schools.com's Color Names Supported by All Browsers.

For web page evaluation, use Juicy Studio Add In for Firefox . The Colour Contrast Analyzer summarizes text contrast and luminosity failures on a web page. By evaluating all foreground and background text colors, potential problems at a page level can be identified. It doesn't adjust for all text sizes or any dynamic text changes like color change on hover.

Contrast References

  1. Vision Australia's Color Contrast Analyser 2.2 for Web Pages provides a download for their tool and gives a detailed explaination of the standards for contrast.
  2. W3C's Techniques for WCAG 2.0: Guideline 17, Guideline 18 and Guideline 145

9. Movement and Sound on a Page

Pause and Play Controls for Slideshows, Video and Audio

When a page opens, allow the viewer to control movement and sound with clearly identifiable controls to pause and play. This includes images, marquees, videos, audio, and anything blinking. A user must be able to tab to each of these controls.

A page should not open with automatic movement or sound unless a user has clicked a link with the expectation of automatic movement and/or sound.

Captioning and Transcripts

Audio must have text equivalent information availalble. For videos, the ideal solution is to have captioning that corresponds to the images/audio selection. When captioning is not available, provide a transcript, usually in .doc format. A lenghty transcript can be broken up into sections that correspond to the video or audio. (Reference Creating Accessible Word Documents.)

Tools

10. Skip to Content

Overview

A web page usually consists of general site navigation, images and text followed by page specific information like the displayed title (<h1> or <h2>), and page-specific text and links. Skip to Content enables a screen reader user to skip repetitive general information and go directly to the page specific information. In some cases, there can be multiple layers of skipping repetitive content. For example there can be a Skip to Content, Skip Navigation, and Skip to Footer.

Headings and Skip to Content

That said, Skip to Content's adoption has been uneven. As a result, screen reader users often examine the internal page headings (outline) when making decisions about a particular page. A user considers headings and links, and then jumps to the area of interest on the page.

Implementations for Skip to Content

Even with headings, Skip to Content has significant benefit particularly when the same implementation technique for Skip to Content is used throughout a website. Implementations include the following:

  1. Visible: Having a visible Skip to Content link at the top of the page can benefit all users.

    Example: Go to 456 Berea St's Skip links: visible or hidden?. The Skip to main content link is off to the upper right and is not intrusive. Clicking the link takes the user to the displayed title, Skip links:visible or hidden?, which is a heading 1.



  2. Not Visible: Use an invisible single pixel graphic with an alt="Skip to Content" (older)

  3. Not Visible: Write the Skip to Content link offscreen using .hidden CSS class.

    Sample code:
    /* .hidden allows screen readers to read text that is not visible on a display */
    .hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
    <a class="hidden" href="#content">Skip to Content</a>
    ...
    <a name="content"><h1>Main Content<h1></a>

  4. Visible on Focus: The Skip to Content link is hidden until a user tabs to it.

    Example: WebAIM's Skip Navigation Links with slight text modifications:



    When tabbed, Skip to main content is visible. When clicked, the user bypasses the repeated navigation:
  5. There are three steps to implement a Skip to Content that is visible on focus.
    First, define the CSS for id skip in the head:

    #skip a, #skip a:hover, #skip a:visited 

    position:absolute; 
    left:0px; 
    top:-500px; 
    width:1px; 
    height:1px; 
    overflow:hidden;


    #skip a:active, #skip a:focus 

    position:static; 
    width:auto; 
    height:auto; 
    }

    Second, in the body, put id skip immediately before the general page information and reference #content as the start of the page specific information.

    <div id="skip">
    <a href="#content">Skip to Main Content</a>
    </div>

    Third, identify content in the body.

    <a name="content"><h1>Main Content</h1></a>

References

11. Important Considerations

Scrolling

Scrolling up and down is strongly preferred and is easier than scrolling horizontally. Therefore, it is much better to have a longer narrower page, than a wide one that requires scrolling horizontally. If a large table would cause a user to scroll right, it is better to create multiple tables instead.

Styling with &nbsp and <br>

Screen readers read characters, including spaces and underlines. Use CSS styling (i.e., padding-right: 2em; or border-bottom: black solid 1px;) to avoid the numbing verbal repetition of space, space, space, or underscore, underscore, underscore.

Screen readers cannot jump to paragraph sections visually delimited by <br>.
Instead of <br> <br>, use <p>,

Abbrevations

Screen readers say abbreviations as words. It's a good practice to introduce an abbreviation in the beginning of the body of text with its acronym in parenthesis following it. Consider the following:

  1. Force an abbreviation to be read by a screen reader by using . or a blank space as a separator for the letters in an alt.
    Example:
    alt="UHCL" reads as a single word, whereas
    alt="U H C L" reads as separate letters.

  2. Use <abbr> to create a tooltip for abbreviations.
    Example: <abbr title="University of Houston-Clear Lake">UHCL</abbr>
    Note: The inconsistency in browser support for <abbr> or <acronym> now favors <abbr> with HTML 5 supporting <abbr> and not <acronym>. While IE historically supported <acronym>, IE 8 and IE 8 in compatibility mode support <abbr>.

Title and Language Specifications

  1. Specify the main language in the html tag.
    Example: <html ... xml:lang="en" lang="en">
    Indicates the language of the page is English.
  2. Use the title element to define a title as part of the page properties.
    Example: <head>... <title>Page Title Here</title> ... </head>
    Reference: H25: Providing a title using the title element
  3. Specify a different language used in a section with lang= and the appropriate language code.
    Example: <body>... <div lang="fr" >...</div>... </body>
    Reference: Declaring language in HTML

 
 Date Updated: 02-OCT-2013
UHCL footer   

  Accessibility  |   Best Viewed  |   Clery Act  |   Compact with Texans  |   Emergency Information  |   Maps & Directions  
  State Website Linking and Privacy Policy  |   UH System  |   Public Information  |   Fraud Reporting  |   MySafeCampus  
   
pargo2.uhcl.edu