Achieving Accessibility:
Illinois Web Accessibility Standards

Mike Scott, MSF&W Accessibility Solutions
http://www.msfw.com/accessibility
accessibility@msfw.com

Introduction

What is accessibility?

Introduction

Accommodating People with Disabilities

  • People with low vision
  • People who are blind
  • People who can't use their hands
  • People who are deaf
  • People with learning disabilities

Introduction

Why is accessibility important?

Introduction

The Law

Your Users

  • 10 - 20% of Americans...

Introduction

How do I make a web site accessible?

Introduction

Assistive Technology

  • Large Fonts
  • High Contrast
  • Screen Magnifiers (ZoomText, MAGic)
  • Screen Readers (JAWS, Window-Eyes)
  • Speech Recognition (NaturallySpeaking)
  • Closed Captions

Introduction

Accessibility Guidelines

Implementing Accessibility

Illinois Web Accessibility Standards

Version 1.2, February 14, 2002

Coding

1.1 - Use valid, standard web programming code

  • Hypertext Markup Language (HTML) 4.01 & XHTML 1.0
  • Cascading Style Sheets (CSS) Level 1 & 2
  • ECMAscript (ECMA-262) 3
    • JavaScript 1.5
    • JScript 5.5
  • Document Object Model (DOM) Level 1

HTML Syntax

Element Syntax:

  • <tag>content</tag>
  • <tag attribute="value">content</tag>
  • <tag attribute="value">

Examples:

  • <p>This is a paragraph.</p>
  • <a href="http://www.google.com">Google</a>
  • <img src="myimage.gif" alt="My Image">

HTML Syntax

HTML Rules:

  • Use closing tags! (except for empty elements)
  • Tags must be properly nested:
    • Wrong: This is <strong><em>not good</strong></em>
    • Right: This is <strong><em>much better</em></strong>
  • Tags and attributes should be lower case
  • Attribute values should always have "quotes"
  • Use HTML Entities for <, >, &, and sometimes "

HTML Syntax

HTML Document:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>Document Title</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
</head>
<body>
Document Content
</body>
</html>

Structural Markup

1.2 - Use HTML to convey document structure

  • Headings (h1, h2, h3, h4, h5, h6) & Paragraphs (p)
  • Lists — ordered (ol), unordered (ul), definition (dl)
  • Tables (table) — rows (tr), headers (th), data cells (td)
  • Strong (strong) & Emphasized (em)
  • Links (a)

Style Sheets

1.3 - Use style sheets for formatting.

  • Background color & image
  • Border width, style & color
  • Font color, family, size, weight, style, decoration, alignment, indentation, height, spacing...
  • List bullets & numbering
  • Cursor shape
  • Visibility (and more...)

CSS Syntax

Basic Style "Rule":

selector { property: value; }

Multiple & Contextual Selectors:

selector { property: value; property: value; }

selector1, selector2 { property: value; }

selector1 selector2 { property: value; }

CSS Syntax

Selectors:

Selector CSS Example HTML Example
element p {...} <p>
element.class p.warning {...} <p class="warning">
element#id element#warning1 {...} <p id="warning1">
.class .warning {...} <p class="warning">
#id #warning1 {...} <p id="warning1">
pseudo-class a:hover {...} <a href="...">

CSS Syntax

In-line Style:

<tag style="property: value;">

Embedded Style Block:

<style type="text/css">
selector { property: value; }
</style>

External Style Sheet:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

CSS Syntax

Cascading:

p { font-weight: bold; }
p { font-style: italic; }
p { color: red; }

This paragraph is bold, italic & red.

Inheritance:

p { font-weight: bold; }
em { font-style: italic; }
strong { color: red; }

This paragraph is bold; this phrase is italic; this word is red.

Images of Text

2.1 - Avoid using images to display text.


Images:

  • don't respond to Large Fonts...
  • don't respond to High Contrast...

Text:

  • does

Font Sizes

2.2 - Avoid using absolute sizes for fonts.

Absolute sizes:

  • Pixels
  • Points
  • Inches

Relative sizes:

  • Percentages
  • "em"

Foreign Languages

2.3 - Specify the language of text.

  • <html lang="en">
  • <p lang="es">¿Habla español?</p>
  • <p>In France, <span lang="fr">"c'est la vie"</span></p>

ASCII Art

2.4 - Avoid using ASCII art.

  • :-) = "colon dash left parenthesis"
  • --> = "dash dash greater"
  • << previous = "less than less than previous"

Colors

3.1 - Do not convey information by color alone

For example:

Fields marked in red are required:
 

Color Contrast

3.2 - Use contrasting colors

  • Use dark colors on light backgrounds, or vice versa
  • Do not use busy background images
  • Avoid combinations of red and green

Alternate Text

4.1 - Provide "alternate text" for all images.

Alternate (alt) text:

<img src="image.gif" alt="alternate text">

Alt text replaces the image, it does not necessarily describe it.

  • Images containing words - use the same words
  • Images links - identify the link's destination/function
  • Decorative or invisible images - alt="" (empty)

Images with Meaning

4.2 - Provide descriptions for "meaningful" images

  • Graphs
  • Charts
  • Diagrams & important photos

Long Description:

<img src="image.gif" alt="alt text"
longdesc="description.html">

Image Maps

5.1 - Provide alternate text for each area in client-side image maps

(Or, don't use them.)

5.2 - Avoid using server-side image maps

(Really, don't use them.)

Audio, Multimedia & Animation

6.1 - Do not convey information with sound alone

6.2 - Provide text transcripts for audio with speech

7.1 - Provide synchronized captions for multimedia containing speech

7.2 - Provide audio description for multimedia with significant video

8.1 - Avoid flickering, blinking, and unnecessary animation

Link Text

9.1 - Links should be understandable out of context

  • Screen readers "tab" from link-to-link
  • Screen readers offer "links lists"

Imagine:

"Click here, click here, click here, click here..."

Skip Navigation Links

9.2 - Provide a means of skipping navigation links

Options:

  • Standard link (e.g., "Skip to Content")
  • Invisible image w/ alt text (not recommended)
  • Invisible text (beware of visibility & display styles)
  • Dynamic HTML

Small Links

9.3 - Avoid using small images or text as links

  • At least 32 x 16 pixels
  • Standard or enlarged font sizes
  • Avoid placing small links close together
  • Include text with images (e.g., tree views)

HTML Forms

Form Element

<form action="url" method="get|post" name="">
... fields ...
</form>

HTML Forms

Form Elements - Text

  • <input type="text" name="" value="">
  • <input type="password" name="" value="">
  • <input type="hidden" name="" value="">

Optional Attributes:

  • maxlength="#"
  • readonly

HTML Forms

Form Elements - Textarea

  • <textarea name="" cols="#" rows="#"></textarea>

Optional Attributes:

  • readonly

HTML Forms

Form Elements - Checkbox & Radio Button

  • <input type="checkbox" name="" value="">
  • <input type="radio" name="" value="">

Optional Attributes:

  • checked

HTML Forms

Form Elements - Buttons

  • <input type="submit" name="" value="Submit">
  • <input type="reset" name="" value="Reset">
  • <input type="button" name="" value="Button">
  • <button name="">Button</button>  

Optional Attributes:

  • onclick (for scripted events)

HTML Forms

Form Elements - Select & Options

<select name="">
<option value="">Choice 1</option>
<option value="">Choice 2</option>
<option value="">Choice 3</option>
</select>

Optional Attributes:

  • size="#" (for select)
  • multiple (for select)
  • selected (for option)

HTML Forms

Form Elements - Fieldset & Legend

<fieldset>
<legend>Legend</legend>
... form fields ...
</fieldset>

Legend

Form Field Labels

10.1 - Associate labels with all form fields

<label for="fieldId">Label Text:</label>
<input type="text" name="fieldName" id="fieldId">

Examples:

Label Positions

10.2 - Position labels as close as possible to fields

  • Minimize panning for screen magnifier users

Label Instructions

10.3 - Include any instructions within field labels

Example:

  * Do not enter unless instructed

Form Field Titles

When you can't use label, use the title attribute

<input type="text" title="Label Text">

Example:

Product Quantity
Item 1
Item 2

Groups of Fields

For groups of fields, use fieldsets, titles, or selects

Examples:

What is your favorite colour?
What is your favorite colour?

Tab Order

10.4 - Make sure fields are in a logical tab order

  • Consider fields and links
  • Arrange fields appropriately

    and/or

  • Use tabindex: <input type="text" tabindex="1" >
  • Consider usability...

Disabled Fields

Avoid using disabled fields

  • Disabled controls do not receive focus -- screen readers skip them
  • Use readonly on text fields and textareas
  • Use onclick="return false;" on checkboxes & radio buttons
  • Display select's as text fields

Form Field Font Size

Set font size to 100% for form fields

input, textarea, button, select { font-size: 100%; }

  • Enables large font compliance in Internet Explorer

HTML Tables

Basic table structure:

<table cellpadding="#" cellspacing="#" border="#" width="%">
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
... repeat rows ...
</table>

HTML Tables

Results:

datadatadata
datadatadata
datadatadata
datadatadata
datadatadata

Table Headers

11.1 - Identify table headers for columns and rows

<table>
<tr>
<th scope="col">column header</th>
<th scope="col">column header</th>
</tr>
<tr>
<th scope="row">row header</th>
<td>data</td>
</tr>
</table>

Table Headers

Results:

column headercolumn headercolumn header
row headerdatadata
row headerdatadata
row headerdatadata
row headerdatadata

Complex Tables

11.2 - Avoid using complex data tables

Complex tables include:

  • Cells that span multiple rows or columns
  • Multiple "sections" with internal sub-heading

Complex tables often do not need to be complex

  • Re-arrange tables to simplify
  • Divide into separate tables

Complex Tables

Example:

  Meals Hotels Transport Subtotals
San Jose  
25-Aug-97 37.74 112.00 45.00  
26-Aug-97 27.28 112.00 45.00  
Subtotals 65.02 224.00 90.00 379.02
... and so on ...
Totals 196.27 442.00 162.00 800.27

Complex Tables

Rowspan & Colspan

<table>
<tr>
<td colspan="3">Colspan</td>
</tr>
<tr>
<td rowspan="2">Rowspan</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
</table>

Complex Tables

Results:

colspan
rowspan data
data
data
data

Complex Tables

Mark-up complex tables using id and headers

<table>
<tr>
<th id="col1">column header</th>
<th id="col2">column header</th>
</tr>
<tr>
<th id="row1">row header</th>
<td headers="col2 row1">data</td>
</tr>
</table>

Summary

Include summary attributes for data tables

<table summary="Summary of the table (imagine that)">
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>

Frames

12.1 - Provide meaningful names and page titles for all frames.

12.2 - Avoid using empty or non-essential frames.

Dynamic HTML (DHTML)

HTML + CSS + Scripting

  • Using scripting to change HTML or CSS based on user actions
  • Based on mouse, keyboard, or page "events"

For example:

File
Edit
Help

DHTML

Events:

  • onmouseover
  • onmouseout
  • onclick
  • ondoubleclick
  • onfocus
  • onblur

DHTML

Changing Styles

onevent="this.style.property='value';"

onevent="document.getElementById('id')
.style.property='value';"

  • this can be used to identify current element
  • document.getElementById() identifies any element
  • property names lose hyphens (e.g., font-weight = fontWeight)
  • script is case sensitive

Device Independence

13.1 - Make sure significant interactions can be performed with both keyboard and mouse

  • onfocus similar to onmouseover (for focusable elements)
  • onblur similar to onmouseout (for focusable elements)
  • onclick can work for both (for focusable elements)

Unintended Side-effects

Be careful with the onchange event

In Internet Explorer, onchange fires when arrowing through options

For example:

Script Support

13.2 - Make sure that essential content and functions are available when client-side scripts are not fully supported

  • Caveat Scriptor ("Author Beware")

Applets and Plug-Ins

14.1 - Use accessible applets or plug-ins whenever possible.

14.2 - If an inaccessible applet or plug-in must be used, provide an accessible alternative that includes the same content and functionality.

Downloadable Documents

15.1 - Provide accessible HTML or text versions of downloadable documents whenever possible.

15.2 - If a downloadable document cannot be provided in an accessible electronic format, provide information on how to request an alternate format.

Window Control

16.1 - Notify users of actions that will open a new window

16.2 - Do not automatically refresh the current page

16.3 - Notify users of time limits and provide a means to extend time

Page Layout

17.1 - When using tables for layout, make sure reading order is logical

17.2 - When using style sheets for layout, make sure reading order is logical

17.3 - Minimize the need for horizontal scrolling

Page Content

18.1 - Use the clearest, simplest, and most concise language appropriate for a page's subject matter.

Alternate Accessible Versions

19.1 - Use separate accessible versions ONLY as a last resort.

Contact Information

20.1 - Identify a point of contact for accessibility issues.

Testing

21.1 - Test, Test, Test...

  • Validate (http://validator.w3.org)
  • Large Fonts (at 800 x 600 resolution)
  • High Contrast
  • Images Off
  • Tab through Links and Form Fields
  • Click on Form Field Labels
  • Test all Dynamic HTML
  • View in Opera or Lynx Viewer w/o tables & CSS
  • Test with Assistive Technologies...