Building Accessible Web Apps

Making IT Work for People with Disabilities

Illinois Department of Human Services

What is accessibility?

Accommodating People with Disabilities

Compatibility with Assistive Technologies

Why is accessibility important?

Your Users

The Law

Illinois Information Technology Accessibility Act

How do we make web apps accessible?

Accessibility Standards

Common Principles

What is a web app?





1.1 - Use valid, standard code.

HTML Syntax

Elements with Attributes

Empty Elements

Special Characters


<!DOCTYPE html>


"Well Formedness"


1.2 - Use appropriate markup to convey structure.

Structural Markup

Presentational Markup (don't use these!)

And, don't mis-use structure for presentation:


1.3 - Provide meaningful page titles.

Best Practice

<title>Site Name: Page Name</title>

1.4 - Use headings to introduce sections,
and use them in the correct order.


<p>And so on...</p>

Best Practice

Extra Credit: ARIA Landmark Roles

<div role="main">


1.5 - Use lists to identify series of related items (including navigation menus).


Unordered Lists

<li>list item</li>
<li>list item</li>
<li>list item</li>

Ordered Lists

<li>list item</li>
<li>list item</li>
<li>list item</li>

Definition Lists


Nested Lists

<li>list item</li>
<li>list item
<li>list item</li>
<li>list item</li>


2.1 - Use text to display text,
unless formatting that cannot be
achieved with CSS is required.

CSS Properties

Style Attribute

<h1 style="color: blue;">

Style Block

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

Style Rule Syntax

selector { property: value; }

h1 { color: blue; }

Element Selectors

Class Selectors

<p class="classname">

.classname { property: value; }

ID Selectors

<p id="id">

#id { property: value; }

Multiple Selectors

selector1, selector2 { property: value; }

Contextual Selectors

selector1 selector2 { property: value; }


<p>This paragraph... <em>this phrase...</em></p>

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

This paragraph is bold; this phrase is bold & italic.

Cascading & Precedence

<p class="classname" id="id">...</p>

p { font-weight: bold; color: red; }
.classname { font-style: italic; color: green; }
#id { text-decoration: underline; color: blue; }

This paragraph is bold, italic, underlined & blue.

External Style Sheets

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

<style type="text/css">@import 'stylesheet.css'</style>

Hiding Content

.invisible {
position: absolute; left: -10000px;
width: 1px; height: 1px; overflow: hidden;

2.2 - Use relative sizes for fonts.


Best Practice


3.1 - Do not convey information with color alone.

3.2 - Use contrasting foreground and background colors.

Color Values

Color Examples

Color Value Sample
Red #ff0000
Orange #ffcc00
Yellow #ffff00
Green #00ff00
Blue #0000ff
Color Value Sample
White #ffffff
Light Gray #cccccc
Medium Gray #808080
Dark Gray #333333
Black #000000

Contrast Ratio


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

4.1 - Provide appropriate "alternate text" for all images.

Alternate Text

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

4.2 - Provide full descriptions for graphs, diagrams, and other meaningful images.

Full Descriptions

  1. On the same page
  2. Visible link to another page
  3. Longdesc (invisible link)


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


column headercolumn headercolumn header
row headerdatadatadata
row headerdatadatadata
row headerdatadatadata

Basic table structure

... repeat rows ...

11.1 - Identify a header cell for each column and row in simple data tables.

Table Headers

<th scope="col">column header</th>
<th scope="col">column header</th>
<th scope="row">row header</th>

11.2 - Identify relationships in complex data tables using id and headers attributes.

Complex Tables

Trip Mileage Lodging Meals
August 27
Springfield - Chicago $100 $15
Chicago - Springfield $100 $15
August 28
Springfield - Chicago $100 $120 $30

Complex Table Headers

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

Complex tables often do not need to be complex

11.3 - Provide summary attributes for data tables.


<table summary="Table Name">


<table aria-labelledby="headingID">


<table aria-label="Table Name">


<a href="url">link text</a>

9.1 - Ensure that links are understandable out of context.

Good Link Text

Bad Link Text

9.2 - Provide a means of skipping past repetitive navigation links.

Same Page Links

<a id="id" name="id"></a>
<a href="#id">link text</a>

Skip Navigation

<a href="#content">Skip to Content<a>


<a id="content" name="content"></a>


Hiding Skip Navigation Links

<div class="skipnav">
<a href="#content">Skip to Content<a>

.skipnav a { position: absolute; left: -10000px; }
.skipnav a:focus,
.skipnav a:active { position: static; left: 0; }


Form Element

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

Text Input

Other Attributes:

10.1 - Provide labels or titles for all form fields.

Associating Label & Control

<label for="id">Label Text:</label>
<input id="id" name="controlName" />


Other Attributes:

Checkbox & Radio Button

Other Attributes:

Text Area

Other Attributes:


When you can't use label...

Multi-part field: --

<input id="" name="" title="Title Text" />


<table aria-labelledby="elementID">


<table aria-label="Label Text">

10.2 - Provide legends for groups of form fields.

Group of Fields

What is your favorite color?

Fieldset & Legend

... form fields ...


Alternatives to fieldset:

  1. What is your favorite color?

Required Fields

Image with alt="Required"

<label for="controlId">
Label <img src="required.gif" alt="Required" />:
<input id="controlId" />

Invisible text "Required"

<img src="required.gif" alt="" />
<label for="controlId">
Label<span class="invisible"> (Required)</span>:
<input id="controlId" />

Aria-Required & Aria-Hidden

<label for="controlId">Label:</label>
<input id="controlId" aria-required="true" />
<span aria-hidden="true">*</span>

10.3 - Ensure that form fields are in a logical tab order.

Tab Order



13.1 - Ensure that scripted functions are usable with assistive technologies.

13.2 - Ensure that significant interactions can be performed with both keyboard and mouse.

Device Independence

13.3 - Avoid changing focus unexpectedly.

13.4 - Avoid changing content unexpectedly.

Unexpected Changes

Name, Role, Value & State


14.1 - Use accessible embedded objects whenever possible.

14.2 - If an inaccessible embedded object must be used, provide an accessible alternative that includes the same content and functionality.


15.1 - Provide natively accessible downloadable documents whenever possible.

15.2 - If a downloadable document cannot be made natively accessible, provide an accessible alternative that includes the same content and functionality.

Layout & Order

17.1 - When using tables for layout, ensure that reading order is logical.

17.2 - When using style sheets for layout, ensure that reading order is logical.


Accessibility Testing

Automated Testing

Know the limitations of automatic testing:

Quick Tests

Quick Test: Headings, Lists & Tables
  1. Open your browser's Developer Toolbar (F12)
  2. Disable CSS (styles)
  3. Check that:
    • Section headings are large & bold
    • Lists have bullets or numbers
    • Reading order is correct
Quick Test: Colors
  1. Turn on a "high contrast" theme
  2. Check that:
    • Nothing disappears
    • Nothing depended on specific colors
  3. Use the Colour Contrast Analyzer
Quick Test: Alt Text
  1. Open your browser's Developer Toolbar (F12)
  2. Show Alt Text or Disable Images
  3. Check that:
    • images of words show the same words
    • image links identify their destination
    • decorative images don't have alt text
Quick Test: Labels
  1. Click on each form field label
  2. Check that:
    • focus moves to the field
    • OR the field has a tooltip that serves as a label
Quick Test: Keyboard Operation
  1. "Tab" through links, form fields, custom controls
  2. Check that:
    • All interface elements receive focus
    • Tab order is logical
    • Link text is understandable
    • Custom controls are operable

Assistive Technology Testing

Key to testing with assistive technology:

Who can help?