Prototype submission
Check the webpage you developed for Assignment 2. Make sure that the page conforms to
W3C's Web Content Accessibility Guidelines (WCAG) 2.0. Submit the resulting page on BB on or
before midnight Tuesday 1 April, 2014.
Grading criteria: Your page will be audited for the following. So make sure you have already
audited it using the following guidelines before resubmitting the page.
-----------------------------------------------------------------------------------------------------------Primary Steps for the Audit:
1. Use WAVE toolbar to check for errors (Fix any errors you find and include the
final results in your submission)
The wave tool bar enabled me to realize some of the errors in my website. There
weren’t many errors, but only 2 accessibility errors. The first error was that a form
element had two labels associated with it and I fixed that by changing one of the
labels. The second error was that one form label was missing.
2. Use the WAVE toolbar to disable Style sheet and check the organization. Does
it make sense?
Yes, when I disabled the style sheet, the webpage made sense in term of its
organization. All the elements were accessible when tabbing through them
3. Check out for fly out menus / menus can be used by tabbing. All the menu
items should be reachable one after the other using TAB key and shift + TAB to
go back the order.
All items in the website are reachable using the TAB key.
4. Use color contrast analyzer to check the contrast of key elements on the page.
-----------------------------------------------------------------------------------------------------------Other audit guidelines:
Please check your page for each of the following to make sure there are no residual accessibility
issues.
1. Text:
a. Use Open Type Face fonts such as Arial or Verdana on all web pages, minimum
text size equivalent to12 points.
b. Use text underline style for hyperlinks only.
c. Avoid using stylized fonts in the website unless absolutely necessary.
Examples of stylized fonts; Italic, Strike Through and Drop Shadow.
Prototype submission
2. Images
a. Images used in the website should include brief, appropriate descriptions of the
image in the ALT attribute of the image tag element. WCAG 2.0 (A) 1.1.1
b. Avoid text inside images. Text should be separated from the graphics or photos.
Corporate logos and branding are an exception. WCAG 2.0 (AA) 1.4.5, WCAG 2.0
(AAA) 1.4.9
3. Headings
a. All visible headings should be consistently tagged with heading tags.
b. Nest headings in the proper order according to hierarchal levels.
Example: <H1> <H2> <H3>
c. Using descriptive headings help users find specific content and orient themselves
within the Web page.
d. Avoid repeating headings as this confuses AT users
e. Avoid using image of text as headings
f. Consistently use Heading Elements in all Web pages;
Titles: H1, Main Headings: H2, Sub Headings: H3
4. Tables
a. Avoid using Tables for the purpose of web page layout. Tables should be used for
presenting tabular data. Always use DIV elements with CSS styling for webpage
layout. WCAG 2.0 (A) 1.3.1
b. Table Header element should be used to label rows or columns of data. Identify
table headers by using the TH (table header). Avoid leaving Table Header cells
blank, especially with columns of data. Reference, Guideline: WCAG 2.0 (A) 1.3.1
c. Provide a Caption element for all tables. If the Table has a title, avoid placing it
outside the table. Use Caption for titling tables.
<CAPTION>Table title</CAPTION> Reference, Guideline: WCAG 2.0 (A) 1.3.1
d. The Table Summary attribute is required in all tables. It is used to describe the
purpose of each table readable only by screen reader users. If there is no table
title (Caption), Title and Description will be required in the “Summary” attribute.
<TABLE border="1" summary="Table Description"> Reference, Guideline: WCAG
2.0 (A) 1.3.1
5. Forms and Labels
a. Explicitly associate form controls and their labels with the label element.
Code Sample: <label for="cn1"><B> First Name: </B></label>
Prototype submission
<input type="text" name="name" id="cn1">
Reference, Guideline: WCAG 2.0 (A) 1.3.1
b. Group Form Controls and Labels: Divide large blocks of information into more
manageable groups where natural and appropriate. Consider grouping long lists
of selections into a hierarchy. If there are logical groupings of form controls, use
FIELDSET with LEGEND on each group.
Example; Radio Button and check box form controls: The common issue with
radio buttons and check boxes is that the label next to the form control is read
and the question / container label is not by screen readers. FIELDSET with
LEGEND elements as tested, reads label and questions while the user Tabs
through the form controls
Note: Consider using Combo Boxes over Radio Buttons. They are more usable.
Reference, Guideline: WCAG 2.0 (A) 1.3.1
c. Use the title attribute to label form controls when the visual design cannot
accommodate the label (for example, if there is no text on the screen that can be
identified as a label) or where it might be confusing to display a label. User
agents, including assistive technology, can speak the title attribute.
Example Code:
<input type="text" title="Type search term here" value="Type search term
here"/> <input type="submit" value="Search"/>
Reference, Guideline: WCAG 2.0 (A) 1.3.1
6. Color contrast
a. Colour Contrast: Flash, Videos, Photos, Graphics and Web Page Design.
Make sure all foreground and background elements have sufficient Contrast.
Examples of high contrast: Black on Yellow or Navy Blue on White.
b. Avoid the use of Gradient Backgrounds that go from light to dark. It will be very
difficult to use foreground elements that will contrast properly.
c. Avoid using the following color combinations, they offer little or no contrast;
Red and Blue
Red and Green
Blue and Green
Med Grey and Red
Med Grey and Green
Med Grey and Blue
Light Grey and Med Grey
White and Med Grey
White and Yellow
White and Orange
Prototype submission
d. Avoid using Red or Orange text; these colours are either not visible to some
people with vision loss or very difficult to read by people with colour blindness.
The highest percentages of people who tend to be affected are seniors. WCAG
2.0 (AA) 1.4.3
Contrast (Minimum): The visual presentation of text and images of text has a
contrast ratio of at least 4.5:1 .Reference, Guideline: WCAG 2.0 (AA) 1.4.3,
------------------------------------------------------------------------------------------------------------