Designing for Accessibility Hands-on Workshop

Bill Corrigan, Accessible[ly] April 25, 2014, Austin, TX

photo from: http://personaldemocracy.com/disability-community-involvement-initiative

2

Be usable and intelligible to as many people as possible, including

People not able to use a mouse

People not navigating by touch

Be interpretable by assistive technologies

Structured

Semantic

Standard

The Goals of Accessible Web Design

Personal

Community

Added value to our (school, institution, company, etc.)

Legal guidelines and requirements

Public relations

The baby-boomers are coming (and they have money)

3

Motivations

4

Goals – Why are we doing this?

Principles – How are we going to reach the goals?

Patterns - What we are going to do to solve specific problems that come up as we implement the principles?

From Luke Wrobelski “Design Principles”, (http://www.lukew.com/ff/entry.asp), which he derived from Service Oriented Architecture literature

Goals/Principles/Patterns

5

Inclusive

Effective

Efficient

Supportive

Accessibility Goals

6

We will design our Web services so they are:

Perceivable

Operable

Understandable

Robust

Accessibility Principles

7

Adhere to standards

Use semantic elements

WCAG 2.0

Accessible Rich Internet Applications (ARIA)

ECMA Standard Scripting

Progressive enhancement methods in scripting

Accessibility Patterns

8

Rapid change

Mobile devices – smartphones to tablets – do it now, here, get immediate results

Web sites and apps need to work with wide range of sizes – smartphone,tablet, laptop, desktop

Pressure for simplification – Keep It Seriously Succinct

Trends Going Forward

9

Why does Accessibility matter?

“The U.S. Census Bureau says that over 47 million Americans have a disability of some kind. The UN and the World Bank say this adds up to 650 million

people worldwide. That’s around 10% of everyone in the world.”

!Excerpt From: Whitney Quesenbery. “A Web for

Everyone.”

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with

the Web, and that they can contribute to the Web.

http://www.w3.org/WAI/intro/accessibility.php

also benefits people using a slow Internet connection, people with "temporary disabilities" such as a broken arm, and people with changing abilities due to aging.

http://www.w3.org/WAI/intro/accessibility.php

Flexibility

Accessibility doesn’t happen automatically

How to avoid Audits

Semantic page markup Consistent navigation Keyboard navigation Skip Navigation Color

Page titles Heading tags Tables Forms labels “Click here” text

14

Accessibility Tools and TechniquesBill Corrigan, Accessible[ly]

15

photo credit: Dan Comden, University of Washington, 3/2012

16

• Are header elements being used semantically and are they organized hierarchically?

• Pseudo headers created with bolding and sizing will not be recognized as headers

• Check headers with the Web Developer toolbar Information item; pull it down to "View Document Outline".

Headers

17

Check for tables with the Web Developer toolbar Outline item; pull down to "Outline Tables" and then "Table Cells".

Check content without layout with the Web Developer toolbar CSS item;

Pull down to "Disable Styles" and then "All Styles". Scroll down through bare-bones content;

Layout

18

<img src="gw.jpg" alt="George Washington">

Alternative text should be...

Accurate and equivalent

Be succinct

Not be redundant

Not use phrases like "image of..."

Alternative Text

The label element associates a name (for="first"with the input element with an id of that name (id="first")

<form action="form_action.asp" method="get">!

  <label for="first">First name:</label>!

    <input type="text" name="fname" id="first"/><br />!

  <label for="last">Last name:</label>!

    <input type="text" name="lname" id="last" /><br />!

  <input type="submit" value="Submit" />!

</form>!

Check labeling in a form with the Web Developer toolbar View Source

item; Search in the source for "<label"

19

Labeling

20

• Color choice and the contrast between adjacent colors are important for determining readability.

• Evaluate colors and contrast with WCAG Contrast Checker.

• In Photoshop, Choose View > Proof Setup > Color Blindness, and then choose either Protanopia-type or Deuteranopia-type

Colors

21

Semantic:

<h2 style="font: medium bold verdana, sans-serif"> New Technology</h2>!

Non-Semantic:

<div style="font: medium bold verdana, sans-serif"> New Technology</div>!

Use DIVs for structural elements such as navigation, content, header, and footer.

Presentation (font size, font family, font size, etc.) of the types is controlled by the CSS.

Semantic Markup

22

• Tables for layout

• Essential information in graphics without alt text

• Content buried in scripts

• Not using progressive enhancement methods

• Content added after page load (Ajax)

• ARIA roles needed to signal assistive technology which areas might receive updates

Problem Areas

Presented by Bill Corrigan, Accessible[ly], April 25, 2014, Austin, TX

billc@accessible.ly, @accessiblel_ly

Sponsored by Progress UX

http://progress-ux.squarespace.com/, @ProgressUX

Some of the content here was derived from notes from Rick Ells, University of Washington and the Accessible Web User Group there.

23

Credits