Is Your Website Accessible?

Hopefully I can help with these questions and more.

Overview

Color

Color Contrast

W3C Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

The range for color brightness difference is 125. The range for color difference is 500.

Tools

Color - cont.

Color Blind Checker

About Vischeck and how to show different types of color blindness.

Examples:

Text and Font Size

The text and font size on a website can make it difficult for visual people. If the text is too small, in poor color contrast and all jammed together, it makes sites inaccessible.

The more vertical rhythm and letter spacing a page has the easier it is to read.

Items to think about:

Text and Font Size - cont.

Rich Rutter reviewed his logs and noticed that 95% of the people visiting his website had their font size set at the default of “MEDIUM”, which is 16px.

body { font-size: 75%;} - 12px
h1 { font-size: 3em;} - 36px
h2 { font-size: 2em;} - 24px
…
h6 { font-size: 1.125em;} - 14px
p, a, li, … { font-size: 1em;} - 12px
… { line-height: 1.5em; letter-spacing: .125em;} - line height - 18px

Web Typography Articles

Skip Nav

WebAIM article on how to implement skip navigation.

Reasons for skip nav:

<div class="hide"> <a href="#MAINcontent">Skip to Main Content</a> </div>

<body>
<a href="#maincontent">Skip navigation</a>
…
<h1> <a name="maincontent" class="maincontent"></a> Heading</h1>
<p>This is the first paragraph</p>

Skip Nav - cont.

CSS

.hide a, .hide a:hover, .hide a:visited {
position: absolute;
left: 0px;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden;
}

.hide a:active, .hide a:focus {
position: static;
width: auto;
height: auto;
}

Headers

Use headers - H1, H2, H3, H4, H5, and H6.

This will allow people using screen readers to skip around to the important parts of the page using key combinations.

List of Washington, D.C. Libraries - H2

A - top - H3

B - top - H3

C - top - H3

Here is a web page example that uses headings.

Access Keys

Access keys allow people to use the keyboard instead of the mouse to perform certain functions.

Firefox, IE, Opera, and Safari each have their own way of using accesskeys.

Here is an example of three access key combinations you can use for IE:

Text sizing buttons with Small (S), Medium (M), and Large (L) options.

IE utilizes these key combinations to change text size larger or smaller, based on your preferences.

Tables

<table class="sortable" id="library_table" width="725px" align="center" summary="List of Washington, DC, libraries fiscal record information.">
<caption>List of Libraries Fiscal Record Information</caption>
<tr>
<th id="library_name" width="300px">Library Name</th>
<th id="fiscal_year" width="100px">Fiscal Year</th>
<th id="quarter" width="75px">Quarter</th>
</tr>

<tr>
<td headers="library_name">Anacostia Interim Library</td>
<td headers="fiscal_year" align="center">2007</td>
<td headers="quarter" align="center">4</td>
</tr>

Here is the table example for the code above and another table example that is easier to read.

There are other ways to use “TH” in Roger Johansson's article about creating accessible tables.

What makes a form accessible & useable?

FORM

<form action=“add.asp” method=“post” name=“RequestForm” onsubmit=“return checkContactsForm(this);”>

“onSubmit” is used to execute JavaScript to check the form fields in this example.

"GET" is basically for retrieving data, whereas "POST" may involve storing data, updating data, ordering a product, or sending an e-mail. (1)

FIELDSET and LEGEND

FIELDSET - element used to group related fields



LEGEND - element used to provide a caption for a FIELDSET



Registration Information

LABEL

“LABEL” associates content with a form control, either implicit association by wrapping the “LABEL” with form control and the text explicit association



LABELs “FOR” attribute is an “ID” reference to the form control

Where should labels be? Top, Left justified, or Right justified.

Luke W. article about where labels should go and an Eye Scan article that shows data and examples of forms.

IE6 does not understand the implicit association of a label and a form field

INPUT “Text” Control

<input name="address1" id="address1" value="User Name" />

- they can even have values

<input type="password" name="address1" id="address1" value="User Name" />

- same value as above field

TEXTAREA

TEXTAREA - a multiline text form control that requires “ROWS” and “COLS” attributes!

<textarea rows="10" cols="40" name="notes" id="notes" ></textarea>



rows="XX" - tells how many rows to display on page

cols="XX" - tells how many characters wide the textarea will be

DROP DOWN LIST

DROP DOWN LIST - uses the “SELECT” element

<select name="display" id="display">
<option value="Yes">Yes</option>
<option value="No" selected="selected">No</option>
<option value="NA">N/A</option>
</select>



SELECTED=“SELECTED” is used to display your choice.

Don't forget about using “<optgroup label="xyz"> </optgroup>” around other “option” elements. Not all browsers understand the <optgroup>.

TABINDEX


Use “TABINDEX” to allow people with mobility issues to move from field to field.

<input name="address1" id="address1" tabindex="100" />

<input name="address2" id="address12" tabindex="110" />


 

If your source order matches the way a person would tab through the page you might not need to use “TABINDEX”. Once you use tabindex you need to do it on the whole page.

SIZE and MAXLENGTH

<input name="dob" id="dob" size="20" maxlength="10" value="02/24/1963" />

<input name="dob-city" id="dob-city" size="20" maxlength="50" value="" />


Usually the MAXLENGTH field is a lot larger than the SIZE.

You could use CSS to replace the SIZE attribute.

RADIO Buttons

Hide my information.

 

<fieldset class="form_choices">
<legend>Hide my information.</legend>
<label for"visible_1" >Yes</label>
<input type="radio" id="visible_1 value="Yes" checked="checked" />
<label for="visible_2" >No</label>
<input type="radio" id="visible_2" value="No" />
</fieldset>

By applying a bit of CSS in my example form you can make this look like it's just a question and your choices.

CHECKBOX

Pick all that apply.

 

<fieldset class="form_choices">
<legend>Pick all that apply.</legend>
<label for="test" >Yes</label>
<input type="checkbox" id="test" value="Yes" checked="checked" />
<label for="test" >No</label>
<input type="checkbox" id=test" value="No" />
</fieldset>

By applying a bit of CSS in my example form you can make this look like it's just a question and your choices.

READONLY and DISABLED

To protect a field from being typed in or changed use:

A screen reader will skip over them, however it will still read the labels which can be confusing.

FORM Controls in ‘OL’ or ‘UL’

Most people (myself included) place input field(s) in ‘P’ or “DIV’ - sensible choice (except in certain instances).

Use ‘OL’ or ‘UL’ since most forms are lists of questions or form controls anyway.

<ul>
<li> Address Line 1 <input /> </li>
<li> Address Line 2 <input /> </li>
<li> City <input /> </li>
<li> State <input /> </li>
<li> Postal Code <input /> </li>
</ul>

SEARCH

Need label on search box for screen readers to know what they are looking at.

Add an HREF anchor to the search results page and the form to skip all the navigation etc.

<div class="SEARCH">
<form name="Skills_Search" action="searchResults.asp#MAINCONTENT">
<label for="search2">Search</label>
<input name="search2" id="search2" title="Enter search text." />
<input type="submit" value="Search" />
</form>
</div>

To hide the word “Search” just add to the hide class used for the skip navigation.

Please review the search box and search results example.

REQUIRED Fields

All FORMs have at least one required field. You need to have your page look good and still be accessible to screen readers.

To do that we just have to add a few things to the label and a bit of CSS.

<li>
<label for="first_name"><em>Required</em>First Name</label>
<input name="first_name" id="first_name" size="25" maxlength="25" /><span class="req"> *</span>
</li>

CSS

.hide_info a, .hide_info a:hover, .hide_info a:visited, .search label, label em {
position: absolute;
…
overflow: hidden;
}

Please review the required field example.

Error Messages

<li>
<label for="first_url"><em>First</em> URL<strong class="msg2"> must start with HTTP://</strong></label>
<input name="first_url" id="first_url" size="50" maxlength="100" tabindex="4000" />
</li>

CSS

label strong.msg2 {
color: #888;
font-size: .8em;
font-style: normal;
line-height: 2.5;
position: absolute;
top: 0;
right: -33.75em;
}

Please review the error message example.

Validators

Usability should come before validation.

Screen Readers

Fire Vox

Free screen reader extension for Firefox that acts like a screen reader and was created by Charles L. Chen.

Uses

Other Screen Readers

Page Reader

CLiCk Speak

Firefox extension that reads information from a web page.

Created by Charles L. Chen.

Uses

Buttons for CLiCk Speak Firefox extension. First on left is “Speak Selection”, the middle button is “Auto Reading Mode”,and the right is “Stop Speaking”.

Say-Instead Part of CSS3

The new CSS3 property called “say-instead” is used to allow screen readers to pronounce words or phrases correctly. See example below.

Godfather II versus Godfather II

CSS

.sayinstead_godfather2 { say-instead: “The Godfather Part Two”;}

HTML

Godfather II versus <span class="sayinstead_godfather2">The Godfather II</span>

How it should be read

Godfather II versus The Godfather Part Two

I even created an example page for you to use the Fire Vox screen reader on.

Miscellaneous

Resources

Resources - cont.

Questions?

Contact Information

“It’s only words and photos on the internet”

Presentation