How to Test for usability

These are direct solutions from the Federal 508 standard, so make your website 508 compliant.

(a) Alt Text on non-text page elements.  If your image has text on it, your alt text needs to say everything that your image says.  If you use special non-web-friendly fonts for logos, and you’ve made images out of these fonts, the alt text on those images needs to as descriptive as the image is.  If your image is a picture of Evans Hall at sunset, your alt text should be “photo of Evans Hall at sunset.” This is forced in the CMS, mostly, although people do tend to find ways to get around it.

How to Add Alt Text in the CMS

Outside the CMS:

DON’T

<img src=”assets/oulogo.gif” />

DO

<img src=”assets/oulogo.gif” alt=”OU Interlocking Logo”/>

(b) All video needs to be captioned or a complete transcript should be provided for the deaf.  For the blind, video description voice-over would be helpful.  We will go in depth on how to do this in another post.  That is a huge topic.

(c) Keep Color blindness in mind during the design process.  Provide sufficient contrast to make sure that it is readable, particularly by those with red/green color blindness.

If your header looks like this:

3p_cs_redgreen

people with a certain type of red green color blindness could in fact, see this:

3p_cs_protanope

or even this:

3p_cs_deuterope

To check your images, run them through this resource: http://www.vischeck.com/vischeck/

(d) Make sure your page is readable with CSS turned off.  This is how a screen reader will read it.  Are all menu items in order?  Is the content readable?

NO:

Badly formed html

YES:

Well formed html

(e & f) Alt text on Client Side Image maps is required.

Below is what the Web Communications header looks like in the CMS.  There are two image maps.  There is one on the OU logo and one on the Web Communications logo.  If you select “Map” on the image dialog, and then select “Edit”, specify which map you’d like to edit (below, the OU logo is chosen), then add the descriptive text similar to “The University of Oklahoma home page” in the “Text” field.  Image maps are extremely ugly and unreadable in source code, so any description for the link is necessary.

Image Map in the CMS

Outside of the CMS, here’s what it should look like, in something like Dreamweaver:

Dreamweaver Image map example

(g & h) Tables – data tables have columns and/or row headers to that cells are properly identified via screenreader or other assistive technologies.  These take some work to be accessible, since the IDs and headers are not defaulted, nor are the summaries and captions.  You actually have to do the work and put those in yourself.  It helps a user understand the data within the context of the column and row that it is in, making the information much more valuable.

The Third Place Coffee Report
Coffee Latte Espresso Sub-totals
Fall Semester
September Week 37.74 112.00 45.00
December Week 27.28 112.00 45.00
Sub-totals 65.02 224.00 90.00 379.02
Spring Semester
February Week 96.25 109.00 36.00
May Week 35.00 109.00 36.00
Sub-totals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

<table summary=”This table summarizes the coffee drinks purchased in the fall and spring semesters”>
<caption>The Coffee Report </caption>
<tbody><tr>
<th id=”Coffee”>Coffee</th>
<th id=”Latte”>Latte</th>
<th id=”Espresso”>Espresso</th>

<tr>
<th id=”Fall Semester”>Fall Semester</th>
<th id=”September Week”>September Week</th>
<td headers=”Fall Semester September Week for Coffees”>37.74</td>
<td headers=”Fall Semester September Week for Lattes”>112.00</td>
<td headers=”Fall Semester September Week for Espresso”>45.00</td>

</table>

(i) Frames.  Please tell me you aren’t still using frames!  But if you are, PLEASE label them.  It disorients those who use a screen reader if you don’t know which frame you are in, since they act as independent pages.

(j) Don’t use flashing text on your page.  Not only is it tacky, it is a danger to those with epilepsy.  If you absolutely have to use flashing text, keep it either under 2Hz, or more than 55 Hz.

(k) If you make your website all in flash, and you cannot provide adequate accessible forms of content any other way, You MUST provide a text-only equivalent of your site.

(l) Scripting functionality to display content.  Please ensure that the content in question is accessible to the screenreader, or provide equivalent accessible content.

(m) Required Plug-ins.  If you post a bunch of PDFs on your site, provide a link to download the software required to read such documents.

(n) Forms (audio captcha, form layout is consistent, simple and easily navigated).  Wufoo recommended in the CMS.  Also, please wrap each field and caption within a label tag, so that a visually impaired person can decipher which data goes in what field.

<form id=”nameform” name=”nameform” method=”post” action=”">
<label>Name
<input type=”text” name=”Name” id=”Name” />
</label>
<input type=”submit” name=”find” id=”find” value=”Find” />
</form>

(o) Skip nav for screenreaders – so that repetitive menus can be skipped by the screenreader.  Should be the first link on the page.  Doesn’t have to display on the page, but can be visible in the HTML, and hidden using CSS.

</body>
<a href=”#content” style=“height:0; width:0; position:absolute; left:-100px; z-index:0;”>Skip to content.</a>
<div> <ul>
<li><a href=”/web.html”>Home</a></li>
<li><a href=”/current.html”>Current Students</a></li>
<li><a href=”/staff.html”>Staff</a></li>
<li><a href=”/events.html”>Events</a></li>
<li><a href=”/map.html”>Location Map</a></li>
<li><a href=”/about_us.html”>About Us</a></li>
<li><a href=”/apply.html”>Apply Now!</a></li>
</ul></div>
<div>
<h1>Welcome to The University of Oklahoma</h1>
</div>
<body>

More to consider

  • ALT TEXT ON LINKS.  If a link is not descriptive, you must insert alt text to make it descriptive.

DO NOT:

Click here to read more about accessibility

DO:

Read more about Accessibility.

Alternatively, you can add alt text to your  <a> tag, like this:

Accessibility

(The source html is where you would put the description)

<a href=”http://www.ou.edu/webcomm” alt=”link to read more about accessibility” >Accessibility</a>

This is not intuitive in the CMS, but is possible.

  • Links open in new window must be specified.

Example:

Read more about Accessibility (Link opens in new window).

  • Must be navigable by keyboard.  Please test without your mouse to make sure all links are clickable, and all functionality is working with keyboard shortcuts (tab, space, enter, etc.)

For a list of other wonderful resources that may help you, read Amanda’s blog about Accessibility Resources.

Even if you think your website is fully accessible, it doesn’t hurt to double check. Chances are you will find something to make more clear in your content. Don’t hesitate to give us a call at WebComm or the Disability Resource Services office if you have any questions or concerns about the accessibility on your website.

Comments

2 Responses to “Making Your Web Content More Accessible”

  1. Amanda on January 10th, 2011 6:49 pm

    This is super helpful! Great work, Libby!

  2. Erin on May 20th, 2011 2:27 pm

    Passing along a resource about how to make Microsoft Office docs more accessible. http://chronicle.com/blogs/profhacker/how-to-create-accessible-microsoft-office-files/32591

Leave a Reply