Introduction to Web Accessibility

Basics, Demos, Tips & Resources

Overview

  • What is Web Accessibility?
  • Types of Disabilities
  • What Does It Mean to be Accessible?
  • How to Make Websites Accessible
  • Ten Easy Accessibility Tips
  • Helpful Resources

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

What is Web Accessibility?

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

What is Web Accessibility?

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)

What is Web Accessibility?

  • Visual
    • blind, low vision, color blind
  • Auditory
    • deaf, hearing impaired
  • Motor
    • spinal injury, ALS, MS, arthritis
  • Cognitive
    • autism, dyslexia, attention
  • Seizures
    • photoepileptic
  • Pseudo
    • slow connection, old browser, beginner user, behind a firewall

Types of Disabilities

The Web is a highly visual medium, so many accessibility techniques focus on users with visual disabilities, but all categories are important to consider.

Types of Disabilities

Types of Disabilities

Types of Disabilities

Stephen Hawking

Ray Charles

Marlee Matlin

Fred Rogers

Vincent Van Gogh

Aldous Huxley

Winston Churchill

Types of Disabilities

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

Types of Disabilities

Someone you know...

or you.

What Does It Mean to be Accessible?

Assistive Technology Demos

It's important to understand how people with disabilities access content on the web.

How to Make Websites Accessible

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

United States Laws

HOW TO MAKE WEBSITES ACCESSIBLE

Disability Discrimination Act (DDA) 

United Kingdom Laws

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.

HOW TO MAKE WEBSITES ACCESSIBLE

Equality Act 2010 (EQA) 

United Kingdom Laws

The Equality Act 2010, replacing the Disability Discrimination Act in England, Scotland and Wales, makes it illegal to discriminate against people with disabilities.

Ten Easy Accessibility Tips

  1. Add Alternative Text to Your Logo
  2. Add Basic ARIA Landmarks
  3. Enhance Focus Indicators
  4. Identify Required Form Fields
  5. Make Your Page Title an <h1>
  6. Identify Table Headers
  7. Identify Table Captions
  8. Avoid “Click Here” Links
  9. Remove tabindex
  10. Check Your Page in WAVE

If you do nothing else...

1. Add Alternative Text to Your Logo

<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="">

2. Add Basic ARIA Landmarks

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.

3. Enhance Focus Indicators

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.

4. Identify Required Form Fields

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">

5. Make Your Page Title an <h1>

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>

6. Identify Table Headers

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>

7. Identify Table Captions

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>...

8. Avoid “Click Here” Links

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>.

9. Remove tabindex

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.

10. Check Your Page in WAVE

The Web Accessibility Evaluation Tool (WAVE) is an easy-to-use tool that gives you feedback about your web site.

Helpful Resources

Screen Readers

Helpful Resources

Software

Helpful Resources

Online Tools

Helpful Resources

Additional Reading

Thanks for your Time

Any questions, comments, or relevant social statements?

Introduction to Web Accessibility

By Michael Gilbert

Introduction to Web Accessibility

An introduction to web accessibility, including basic terminology, various disability types, assistive technology demos, practical tips for developers, and additional online resources.

  • 1,503