Making IT Work for People with Disabilities
Illinois Department of Human Services
dhs.illinois.gov/iitaa
"It is the policy of the State of Illinois
that information technology developed, purchased,
or provided by the State is accessible to
individuals with disabilities."
<tag>content</tag><p>This is a paragraph.</p><tag attribute="value">content</tag><a href="http://www.link.com">Link</a><tag attribute="value" /><br /><img src="image.gif" alt="Image" />&<>" <!-- comment -->
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
Content
</body>
</html>
p)em) & strong emphasis (strong)h1, h2, h3, h4, h5, h6)ol, ul, dl)table, tr, th, td)b), Italic (i), Underline (u)And, don't mis-use structure for presentation:
role="presentation"<title>Site Name: Page Name</title>
<h1> - top level heading (page title)<h2> - main section heading<h3> - sub-section heading<h4> - sub-sub-section heading<h5> - and so on...<h6>
<div>
<h2>Heading</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>And so on...</p>
</div>
h1 at beginning of main contenth2 for main sections (including menu, footer, etc.)h3 for sub-sections, and so on...role="banner"role="navigation"role="search"role="main"role="complementary"role="contentinfo"
<div role="main">
<h1>Heading</h1>
<p>Content...</p>
</div>
<main>
<h1>Heading</h1>
<p>Content...</p>
</main>
ul)ol)dl, dt, dd)
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<dl>
<dt>term</dt>
<dd>definition</dd>
<dt>term</dt>
<dd>definition</dd>
</dl>
<ul>
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
<li>list item</li>
</ul>
</li>
</ul>
font-family: Verdana, Arial, sans-seriffont-weight: normal, boldfont-style: normal, italictext-decoration: none, underlinecolor: red, orange, yellow, green, blue, violet...<h1 style="color: blue;">
<style type="text/css">
selector { property: value; }
</style>
selector { property: value; }
h1 { color: blue; }
bodyh1p<p class="classname">
.classname { property: value; }
<p id="id">
#id { property: value; }
selector1, selector2 { property: value; }
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.
<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.
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">@import 'stylesheet.css'</style>
display: nonevisibility: hiddenposition: absolute; left: -10000px;
.invisible {
position: absolute; left: -10000px;
width: 1px; height: 1px; overflow: hidden;
}
px), points (pt), inches (in)%), em (em), keywords (large)(%)body as percentage of 16px
12px = 75%, 13px = 80%, etc...
#rrggbbrr = red; gg = green; bb = blue00 - ff (255)| 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 |
1:1 to 21:13:14.5:1<img src="image.gif" alt="alternate text" />
Alt text replaces the image, it does not describe it.
alt="" (empty string)
<img src="image.gif" alt="text" longdesc="image.html" />
| column header | column header | column header | |
|---|---|---|---|
| row header | data | data | data |
| row header | data | data | data |
| row header | data | data | data |
<table>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
... repeat rows ...
</table>
<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>
| Trip | Mileage | Lodging | Meals |
|---|---|---|---|
| August 27 | |||
| Springfield - Chicago | $100 | $15 | |
| Chicago - Springfield | $100 | $15 | |
| August 28 | |||
| Springfield - Chicago | $100 | $120 | $30 |
<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>
<table summary="Table Name">
<table aria-labelledby="headingID">
or
<table aria-label="Table Name">
<a href="url">link text</a>
<a id="id" name="id"></a><a href="#id">link text</a><a href="#content">Skip to Content<a>
Menu...
<a id="content" name="content"></a>
Content...
<div class="skipnav">
<a href="#content">Skip to Content<a>
</div>
.skipnav a { position: absolute; left: -10000px; }
.skipnav a:focus,
.skipnav a:active { position: static; left: 0; }
<form action="url" method="get|post">
... fields ...
</form>
<input type="text" id="" name="" value="" />
maxlength="#"readonly="readonly"
<label for="id">Label Text:</label>
<input id="id" name="controlName" />
<label for="id">Label Text:</label><select id="id" name=""><option value="">Option 1</option><option value="">Option 2</option></select>
size="#" (for select)multiple="multiple" (for select)selected="selected" (for option)<input type="checkbox" id="id" name="" value="" /><label for="id">Label Text:</label>
<input type="radio" id="id" name="" value="" /><label for="id">Label Text:</label>
checked="checked"<label for="id">Label Text:</label><textarea id="id" name="" cols="#" rows="#"></textarea>
readonly="readonly"<input type="submit" value="Submit" /> <input type="reset" value="Reset" /> <input type="button" value="Button" /> <button>Button</button>
Multi-part field: --
<input id="" name="" title="Title Text" />
<table aria-labelledby="elementID">
or
<table aria-label="Label Text">
<fieldset>
<legend>Legend</legend>
... form fields ...
</fieldset>
<label for="controlId">
Label <img src="required.gif" alt="Required" />:
</label>
<input id="controlId" />
<img src="required.gif" alt="" />
<label for="controlId">
Label<span class="invisible"> (Required)</span>:
</label>
<input id="controlId" />
<label for="controlId">Label:</label>
<input id="controlId" aria-required="true" />
<span aria-hidden="true">*</span>
<input id="" name="" tabindex="1" />onmouseover = onfocus (for focusable elements)onmouseout = onblur (for focusable elements)onclick can work for both (for focusable elements)