Accessibility

InterLab 2013

Virginia DeBolt

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

Why Make the Web Accessible

• Provide equal access and equal opportunity to people with diverse abilities
• Support social inclusion for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries
• Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and SEO.

Diversity of Abilities

• Auditory
• Cognitive and neurological
• Physical
• Speech
• Visual

Components of Web Accessibility

• WAI
• WCAG 2
• WAI-ARIA

WAI

WCAG 2

WCAG uses POUR

• Perceivable
• Operable
• Understandable
• Robust

Here's a checklist for WCAG 2 from WebAIM.

Perceivable

• Provide text alternatives for non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• Provide captions and other alternatives for multimedia.
  
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
  
• Make it easier for users to see and hear content. This includes separating the foreground from the background, color choice, and zoom.

Operable

• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content. Also make it clear to users where they are.

Understandable

• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes. Provide input assistance.

Robust

• Maximize compatibility with current and future user tools, including assistive technology.

Checklist for Developers

A useful infographic from WebAIM with a checklist for developers.

WAI-ARIA

• ARIA roles that act as navigation landmarks
  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search
• ARIA has been around since HTML4 and works with HTML4, XHTML and HTML5.

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

An example

• Here's an example layout using ARIA roles.
• banner, main, and contentinfo can only be used once per page
• Other landmark roles can be used multiple times per page.
• The example pages uses divs for everything. There are semantic HTML 5 elements that make more sense that could be used instead.
• Ensure all content resides in a landmark region so no content is orphaned. This way a screen reader user can safely use landmark navigation without missing content.

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.

Using an Existing Design

• The Before and After Demo from the W3C
• The whole site doesn't need a redesign.
• Accessibility features can be added behind the curtain

10 Fast Tips

• Add Alternative Text to Your Logo
• Add Basic Landmarks
• Enhance Focus Indicators using a:focus rules to highlight location
• Identify Required Form Fields using ARIA: <input type="text" name="username" aria-required="true">
• Make Your Page Title an <h1>

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

• Identify Table Headers
• Avoid "click here"
• Identify Table Captions
• Remove tabindex
• Check Your Page in WAVE

Testing with the WAVE tool

• The WAVE tool

Questions and Discussion

• Do you have a specific need I haven't mentioned?
• Any questions?