Michael Gilbert
Front-end web developer with design skills, interested in web standards, accessibility, and responsive web design.
Web accessibility is the ability of any user, regardless of disability, to access the same content and information on the Internet.
Source: Accessibility Institute at The University of Texas at Austin
Web accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities.
Source: Web accessibility entry on Wikipedia
Web accessibility means that people with disabilities can use the Web.
More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.
Source: Introduction to Web Accessibility on the W3C's Web Accessibility Initiative (WAI)
The Web is a highly visual medium, so many accessibility techniques focus on users with visual disabilities, but all categories are important to consider.
Stephen Hawking
Ray Charles
Marlee Matlin
Fred Rogers
Vincent Van Gogh
Aldous Huxley
Winston Churchill
Stephen Hawking
Ray Charles
Marlee Matlin
Fred Rogers
Vincent Van Gogh
Aldous Huxley
Winston Churchill
Lou Gehrig's Disease (ALS)
Blind
Deaf
Color Blind (Red/Green)
Epilepsy
Low Vision
Dyslexia
Someone you know...
or you.
It's important to understand how people with disabilities access content on the web.
In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.
Section 508 of The Rehabilitation Act
Disability Discrimination Act (DDA)
The Disability Discrimination Act was introduced to end discrimination against disabled people and give them new rights in the areas of employment, access to goods and services, and buying or renting land or property.
Equality Act 2010 (EQA)
The Equality Act 2010, replacing the Disability Discrimination Act in England, Scotland and Wales, makes it illegal to discriminate against people with disabilities.
Source: 10 Easy Accessibility Tips Anyone Can Use from WebAIM
If you do nothing else...
<img src="webaimlogo.jpg" alt="WebAIM - web accessibility in mind">
Every image that conveys content or has a function on your web site should be given alternative (alt) text.
Use an empty alt attribute if the image is decorative.
<img src="scroll.gif" alt="">
ARIA landmarks identify significant page areas, giving them meaning and making them more keyboard navigable.
<header class="site-header" role="banner">
<footer class="site-footer" role="contentinfo">
<main class="content" role="main">
<aside class="sidebar" role="complementary">
<nav class="nav-primary" role="navigation">
<form class="site-search" role="search">
There are several available landmark types which are easily added via the role attribute.
To help sighted keyboard users identify which link or form field they have navigated to, you can add the following to your CSS file.
a:focus, input:focus {
outline: 1px solid red;
background: yellow;
}
a:hover, a:focus, a:active {
outline: thin dotted;
overflow: hidden;
}
Avoid the temptation to completely hide the focus indicator on links. Consider using a thin, dotted outline at the very least.
If your form has a mix of required and non-required form fields, add the aria-required="true" attribute to each input that is required.
<input type="text" name="username" aria-required="true">
While a good heading structure for your entire document is great for accessibility, simply making your main page title an <h1> will facilitate page navigation and comprehension.
Disclaimer: Some SEO folks might prefer the site's logo to be the <h1>. That's fine too.
<h1 class="page-title">This is an Article Title</h1>
Make sure column headers are marked up using the <th> element instead of the <td> element.
The <th> element should be given a scope attribute value of col if it’s a column header or row if it’s a row header.
<th scope="col">Column Header</th>
You can associate the description of a data table using the <caption> element. This element should be the first thing inside your <table> tag.
<table>
<caption>Class schedule, including year and semester.</caption>
<thead>
<tr>...
Avoid the use of "click here" or "read more" links. Change the text to be more descriptive of the content or function of the link.
Learn more about our <a href="/products-services/">products and services</a>.
Tabindex specifies a keyboard navigation order, but almost always causes more accessibility issues than it solves.
If your navigation order is not logical, you should restructure your underlying code so that it is logical.
The Web Accessibility Evaluation Tool (WAVE) is an easy-to-use tool that gives you feedback about your web site.
Any questions, comments, or relevant social statements?
By Michael Gilbert
An introduction to web accessibility, including basic terminology, various disability types, assistive technology demos, practical tips for developers, and additional online resources.
Front-end web developer with design skills, interested in web standards, accessibility, and responsive web design.