Making Accessible Web Pages -
5 things to think about

Barbara Moore

Information Technology, Director of Web Services

Christine Hayes

University Library, Webmaster

ATI Milestones

September 2007 - All new and updated administrative websites must at a minimum meet Section 508 standards.
September 2008 - All new courses and course content (including websites) must be accessible
May 2009 - All administrative sites that are critical to institutional access should, at a minimum, conform to baseline accessibility standards as defined in Section 508.
May 2012 - All websites at the CSU should fully conform to Section 508.
September 2012 - Instructional materials and instructional websites for all course offerings will be accessible.

What is Web Accessibility?

Designing and creating web pages and sites so they are accessible to ALL users, including those with disabilities.
Making sure your design choices will be perceivable and meaningful to people who use assistive technology.
Avoiding practices that interfere with Assistive Technology, or are device dependant.
Section 508 §1194.22 and §1194.21 of the Rehabilitation Act describes standards for web pages.
16 checkpoints for HTML and 12 more for scripting (like Javascript, PHP, AJAX).

5 Things to Think About

Use Semantic/Structural HTML
Write Good Alt Text for Images
Make Accessible Links
Be Careful with Color
Keep Data Tables Simple

1. Use Semantic Structural HTML

HTML is for describing the structure and meaning of content, not the presentation.
Use HTML tags that describe the structure and semantics of your content.
Don't try to make your page look nice until AFTER you have the structure and semantics right.
Semantic and Structural HTML can be perceived and understood by assistive technology.

HTML Structure

<head> <body> <div>
These make up the skeleton of the page
<div> lets you define block areas of content.
<div> is commonly used to define navigation, main content, footer and other areas within the <body>.
Building New? Avoid layout tables.

Title and Headings

Title - <title> should be meaningful and descriptive of the page content.
Headings - <h1> <h2> <h3> etc.
Every page should have one and only one <h1>.
Heading text should be meaningful and descriptive. Think of them as Table of Contents entries.
Depending on your site <h1> or <h2> ay be the same as the title.
Headings should be nested properly. Don't jump from <h1> to <h3> because you think <h2> looks too bulky.

Paragraphs and Blockquotes

Most of your content will probably be paragraphs <p>
Line breaks <br> or <br /> are not the same as starting a new paragraph.
In many HTML editors, text starts out as a paragraph, but can easily be changed to a different kind of element.
Long quotes should use <blockquote>
<blockquote> should not be used just to indent a paragraph.

Lists

Unordered Lists - <ul> and <li>
Ordered Lists - <ol> and <li>
Definition Lists - <dl>, <dt>and <dd>

List Uses

Lists are easier to scan and read than big bulky paragraphs.
Unordered lists are perfect for navigation menus.
Ordered lists are perfect for Agendas, step-by-step instructions.
Definition lists are great whenever you need to add further info for list items.
Remember:
- A bunch of paragraphs that start with numbers ≠ ordered list.
- A bunch of paragraphs that start with bullets ≠ unordered list.

Test, Test, Test

Make sure you're writing good HTML.
Does it still make sense when styles, images, colors and javascript turned off in your browser?
Does your HTML editor write valid HTML? Use the W3C Validator to make sure.

W3C's HTML Validator - http://validator.w3.org/

Example

An example of semantic, structural HTML in Dreamweaver (First Year Report)

2. Write Good Alt Text for Images

Every non-text element requires an equivalent text alternative.
alt text is what people (or technology) that can't perceive the image will read instead.
All images MUST have alt text.
<img src="myimage.jpg" alt="equivalent text goes here" />
Images should NEVER have missing alt.

Assess the Image

Before writing alt text, assess the image.

What is the purpose of the image?
What information about the image is in the neighboring content?
How would the alt text sound if read aloud within the context of the page?
Is the image:
- Decorative
- Supportive
- Definitive
- or a Link?
If an image alt would convey no extra information, or confuse/distract the message, use an empty alt, alt="".

See Mike Cherim's "The Alt and Accessibility" at http://green-beast.com/blog/?p=81 for further explanation.

3. Make Accessible Links

Links need to make sense on their own AND within the context of the surrounding content.
Assistive Technology can provide the user with a list of all links on a page.
If your site has persistent (repetive) navigation, include a "Skip Navigation" link, or add a heading to the top of the navigation list.
Good link text describes the purpose and nature of the link.
Specifically: good link text tells the user where they'll end up.

Good Link Text Guidelines

Link text should tell the user where they'll go, what they'll get.
If more than one link on a page shares the same link text, all those links should point to the same resource.
If two or more links refer to different targets but share the same link text, use the title attribute to add further info.
Never use link text like:

Images as Links

Sonoma State University

If an image is used as a link, the alt text must be good link text.
If the image is of text, then the alt text must say the same thing as the image.
Good: alt="Sonoma State University"
Bad: alt="SSU"
Bad: alt="SSU Home"
Bad: alt="SSU Logo"
Bad: alt="http://www.sonoma.edu"

4. Be Careful With Color

An image with insufficient foreground and background color contrast may also cause problems for some users.
Good contrast = luminosity contrast ratio of least 5:1
Juicy Studio's Color Contrast Analyzer extension for Firefox makes it easy to test text and background colors.
Snook's Color Contrast Check lets you input and compare any colors.
Sample color contrast page

Sample color contrast page - http://www.sonoma.edu/accessibility/webaccessbility/color.html
Juicy Studio's Color Contrast Analyzer extension for Firefox - http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php
Snook's Color Contrast Check - http://snook.ca/technical/colour_contrast/colour.html

Avoid Color as the Only Indicator

If color is the only thing conveying specific information, people who can't perceive the color difference may not understand the message. This could happen:

on a computer monitor with few colors,
with a text-only reader,
on a handheld device which renders information with with few colors,
for people who are color blind and may not be able to perceive the colors used to convey meaning, or
for people who cannot see the screen at all.
Sample color indicator page

Sample Color Indicator page - http://www.sonoma.edu/accessibility/webaccessbility/colorindicator.html

5. Keep Data Tables Simple

Sample Data Table with 4 columns, 6 rows

Data tables are confusing without the appropriate HTML.
<caption> - a title for the table.
<th> - table heading
scope="col" or scope="row" attribute associates <th> with their rows or columns.
summary attribute - info about the content and meaning of the data.
Note: Tables read top to bottom, left to right, row by row, cell by cell.
Complex tables require other tags and attributes and are very difficult to build accessibly.

Creating a Data Table in Dreamweaver

Build an example table.
Example of a complex data table (so you know what to avoid)
Another Example of a Complex Data Table

Complex Data Table Sample - http://www.tsbvi.edu/technology/web/508/44.htm
Another Sample - http://www.sonoma.edu/accessibility/webaccessbility/complex.html

Now is my page accessible?

If you follow all the above guidelines, your page will probably be accessible.
Can you test it to make sure? Yes...
- Computer-assisted tests can only detect some accessibility problems.
- A human test ("manual evaluation") is needed.
- Call Barbara - we can do a manual evaluation together.

Cynthia Says Portal - http://www.contentquality.com/
CSU Manual Evaluation Process - http://www.calstate.edu/Accessibility/webaccessibility/evaluation/index.shtml

Wait, do I have to manually evaluate every page?

Not necessarily.
Use a template to create pages for your site - Test it to make sure your starter pages are accessible.
As you create new pages from the template, test the content you create until you become familiar with accessible content creation practices.
As you create new types of content, test those to make sure you're not introducing new problems.
Spot check your work as you maintain your site.

Questions?

SSU Accessible Technology Initiative - http://www.sonoma.edu/accessibility/
CSU Accessible Technology Initiative - http://www.calstate.edu/accessibility/