Accessibility

InterLab 2013

Virginia DeBolt

Web Teacher (webteacher.ws) @vdebolt
URL for this presentation: vdebolt.com/interlab/

Why Make the Web Accessible

Diversity of Abilities

Resource: http://www.w3.org/WAI/intro/people-use-web/diversity

Components of Web Accessibility

WAI

WAI content
http://www.w3.org/WAI/flyer/handout2007a

WCAG 2

WCAG uses POUR

Here's a checklist for WCAG 2 from WebAIM.

http://www.w3.org/WAI/WCAG20/glance/

Perceivable

http://www.w3.org/WAI/WCAG20/glance/

Operable

Understandable

Robust

Checklist for Developers

A useful infographic from WebAIM with a checklist for developers.

WAI-ARIA

http://www.webteacher.ws/2010/10/14/aria-roles-101/

Adding Navigation Roles

<header role="banner">
<nav role="navigation">
<aside role="complementary">

Roles used in ways like these examples are navigation aids for machine readers and for assistive devices such as screen readers.

ARIA landmark roles in action

Watch this video

http://youtu.be/IhWMou12_Vk

An example

http://www.html5accessibility.com/tests/roles-land.html

Screen Reader Support for HTML5 Sections

Since this table was made, a <main element> has been added to HTML5. The ARIA role="main" should be used with it.

http://tink.co.uk/2013/02/screen-reader-support-for-html5-sections/

Using an Existing Design

10 Fast Tips

HTML5 has a required attribute

A required attribute is available in HTML5 for form fields. It looks like this:

<label for="first_name">First Name</label> 
<input name="FirstName" type="text" id="first_name"
required>

For now, using aria-required="true" with this HTML5 attribute is a good idea.

Be sure you identify form fields with a <label> element.

10 Fast Tips, cont

Testing with the WAVE tool

WAVE tool test results

http://wave.webaim.org/

Questions and Discussion