Examples Accessibility Audit Report:
Background:
The W3C Web Content Accessibility Guidelines 1.0 establish standards aimed at making online material accessible to users with disabilities. The standards are supported for the most part by most of the popular web browsers available including Internet Explorer and Mozilla.
Online material, as rendered by a web browser, can be interpreted by third party programs in a format which is friendlier to disabled users. The most popular of these is JAWS.
It is important to remember that there are a range of disabilities that can affect web users including mobility impairment, hearing impairment, visual impairment, and permanent and episodic mental health conditions. Different users will have different levels of disability and different levels of computer skills. Thus there is no such thing as the average disabled user.
Accessibility Compliance Checking Tools:
There are a number of free online tools which will run basic checks
of web pages to see how compliant they are against W3C standards. The
most popular of these tools are:
WebXACT (http://webxact2.watchfire.com),
WAVE 3.0 (http://www.wave.webaim.org/index.jsp),
Vischeck (http://www.vischeck.com/vischeck/vischeckURL.php)
AIS
Accessibility Toolbar for IE (http://www.nils.org.au/ais/web/resources/toolbar/)
Whilst these tools are extremely useful they serve as a guide only and must be combined with manual analysis.
Audit Report Methodology:
This audit report has been compiled using automated reports generated by WebXACT, WAVE and Vischeck and has been supplemented with manual analysis. In addition the sites have been viewed using JAWS 4.5.
Report:
1 Key Issues
This section deals with the most important aspects of the website from a disabled user’s point of view. Unless these issues are addressed, most disabled users will have great difficulty in accessing the site.
1.1 Login Page (index.htm)
1.1.1 Form Elements
Problem: The Username and Password textboxes are not accessible via screen readers.
Remedy: Add labels to the Username and Password textboxes.
Example:
<label for="ssousername">Username: (7 digit student ID) </label>
<input type="text" size="20" maxlength="50" id="ssousername" name="ssousername" value="">
<label for="password">Password: (DDMMYY by default) </label>
<input type="password" size="20" maxlength="50" name="password">1.1.2 Table Summaries
Problem: 3 tables do not have a summary of the content contained within them.
Remedy: Add a summary attribute to table tags.
Example 1: Main table
<!--<div style = "float:left;">-->
<table border="0" cellpadding="0" cellspacing="0" width = "228" summary=””>Example 2: Login area
<table border="0" cellpadding="0" cellspacing="0" width="228" summary=”Login area”>Example 3: Login area
<table border="0" cellpadding="0" cellspacing="0" width="100%" summary=””>
1.2 Main Page (main.htm)
1.2.1 Alt text
Problem: 20 images and do not contain alt text and thus cannot be read by a screen reader.
Remedy:
None of the images appear to convey any information and so they can be quickly fixed by doing a search and replace and adding the code alt="" into the image tag.
1.2.2 Table Summaries
Problem: 39 tables do not have a summary of the content contained within them.
Remedy: Add a summary attribute to table tags.
Example 1: Announcements
<table style = "border-collapse:collapse; width:100%; background-color:#fff;" summary=”My Web CT announcements”>Example 2: Timetable
<table style = "width:100%; border-collapse:collapse;" summary=”My Timetable”>Example 3: Timetable
<table style = "margin:0; padding:0; border-collapse:collapse;" summary=”Days of the week”>
1.3 Results page (sis.htm)
1.3.1 Alt text
Problem: 1 image does not contain alt text and thus cannot be read by a screen reader.
Remedy:
Adding the code alt="" into the image tag.
Example:
< img src = "/images/portal_login_bulb.gif" style="vertical-align:middle; margin-left:4px" alt=””>1.3.2 Table Summaries
Problem: 8 tables do not have a summary of the content contained within them.
Remedy: Add a summary attribute to table tags.
Example 1: Results table
< table class="ResultReleaseTable" summary=”Results release table”>
1.4 Mail page (email.htm)
1.4.1 Alt text
Problem: 1 image does not contain alt text and thus cannot be read by a screen reader.
Remedy:
Add the code alt="" into the image tag.
Example 1:
< img src = "/images/portal_login_bulb.gif" style="vertical-align:middle; margin-left:4px" alt=””>1.4.2 Table Summaries
Problem: 9 tables do not have a summary of the content contained within them.
Remedy: Add a summary attribute to table tags.
Example 1: Username and date table
<table class="nameDateTable" summary=”User name and date table”>Example 1: Welcome and unread message table
<table width="50%" summary=”Welcome and unread message table”>
1.5 Library (lib.htm)
1.5.1 Alt text
Problem: 1 image does not contain alt text and thus cannot be read by a screen reader.
Remedy:
Add the code alt="" into the image tag.
Example 1:
<img src = "/images/portal_login_bulb.gif" style="vertical-align:middle; margin-left:4px" alt=””>1.5.2 Link phrases
Problem: link phrases do not make sense when read on their own.
Remedy:
Make sure that the link text contains enough information when read out of context.
Example:
The link
Click <a href="http://www.swin.edu.au/lib">here</a> to go to other Library services.
should read
<a href="http://www.swin.edu.au/lib"> Click here to go to other Library services.</a>
1.5.3 Table Summaries
Problem: 8 tables do not have a summary of the content contained within them.
Remedy: Add a summary attribute to table tags.
Example 1:
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="0"CELLSPACING="0" class="RegionNoBorder" summary=”My library borrowing information”>
1.5.4 Table Headings
Problem: the ‘Other Messages’ table doesn’t have any column headings.
Remedy: Add <TH> tags to the table.
Example:
<tr bgcolor="#dddddd" class=sb><th class="libtd">Code</th><th class="libtd">Details</th><th class="libtd">When</th></tr>
1.6 Swinburne Logout (logout.htm)
1.6.1 Doctype
Problem: There is no doctype statement. The doctype declaration tells the browser how to correctly interpret accessibility features which are contained in the code.
Remedy: Add a doctype statement to the top of the page.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
1.6.2 Document language
Problem: The language of the document is not identified.
Remedy: Add a language statement to the top of the page.
Example:
<html lang="en">
1.6.3 Table Summaries
Problem: 1 table does not have a summary of the content contained within it.
Remedy: Add a summary attribute to table tags.
Example 1:
<table style = "margin-top:0.1em; border-collapse:collapse;" summary=”Logout status”>
1.7 Color contrast
Deuteranope check is OK
Protanope check is OK.
Tritanope check is OK.
1.8 Video / audio
Not applicable.
2 Design/Usability Issues
2.1 Banner
The banner will need to be replaced by a plain red banner. Action: Andrew Normand to provide replacement graphic.
2.2 Login Page (index.htm)
The contrast between the grey text and the background color on the left hand side login area needs to be enhanced. Action: Andrew Normand to provide replacement graphic.
There is generally too much information on this page. The section listing the features of My.Swinburne is good, but the Feedback, Logon and FAQ items would be better placed at the point at which the user is having difficulty, i.e. logon failure.
The titles ‘My.Swinburne’ and ‘My.Swinburne Downtime’ should
not be in red.
2.3 Left hand navigation
The background, font sizes, font colors and table dividers on the
left hand menu needs to be updated to reflect changes which have been
made to the Swinburne style.
2.4 Main Page (main.htm)
The University Favorites and My Favorites panels needs to take on a modular appearance, like the Blackboard modules.
My Timetable and My Result Release dates should have some space on
the right hand side.
2.5 Results page (sis.htm)
The gap between the menu and the results panel should be wider. There is far too much information on the page. It should be reduced by half.
Dynamic information should form part of the results panel. Static information should be presented below.
The background to the Welcome statement should be the same as the
grey below. The results table should be moved up slightly higher.
2.6 Mail page (email.htm)
Only dynamic information should appear within the mail panel. ‘Important things to note should go below with ‘Need help…’.
The background to the Welcome statement should be the same as the
grey below. The results table should be moved up slightly higher.
2.7 Library (lib.htm)
Only dynamic information to appear in the panel, i.e. information down to and including ‘You don’t owe any money to the Library’.
The background to the Welcome statement should be the same as the
grey below. The results table should be moved up slightly higher.
2.8 Help and FAQ
The Quicklinks at the top of screen should be vertical rather than horizontal.
The headings and sub heading are too large.
The background to the Welcome statement should be the same as the
grey below. The results table should be moved up slightly higher.
2.9 Logout
The logout messages should appear in a modular format.