Transcript
Page 1: Web accessibility 2010 v2

Web Accessibility

Principles Strategies &Tactics

Sean Yo • University of Guelph • Web Solutions • CCS@seanyo • seanyo.ca • [email protected]

Page 2: Web accessibility 2010 v2

Web Analyst

Accessibility Advocate

Page 3: Web accessibility 2010 v2

IntroductionFundamentals of Web Accessibility

Page 4: Web accessibility 2010 v2

Pop Quiz:

What is A11y?

Page 5: Web accessibility 2010 v2

What is Web Accessibility?

Page 6: Web accessibility 2010 v2

Web accessibility refers to the practice of making websites usable by people of all abilities

and disabilities. When sites are correctly designed developed and edited all users can

have equal access to information and functionality.

http://en.wikipedia.org/wiki/Web_accessibility

Page 7: Web accessibility 2010 v2

VisualHearingMotor

Cognitive

Page 8: Web accessibility 2010 v2

Why Web Accessibility?

Page 9: Web accessibility 2010 v2

• Doing the Right Thing • Beneficial Standards • Save Internet Resources • Be Recognized • It’s the Law… Or it Will Be • Ease of Maintenance • More Aging Visitors • Care and Sleep Well • Google Will Love You

http://accessites.org/why/http://www.webaim.org/intro/

Page 10: Web accessibility 2010 v2

User Experience

Page 11: Web accessibility 2010 v2

Accessibility Experience

Page 12: Web accessibility 2010 v2

People Have Experiences

Checklists Don’t

Page 13: Web accessibility 2010 v2

http://manwithnoblog.com/2010/05/20/kill-accessibility/

Page 14: Web accessibility 2010 v2

PrinciplesThinking About Web Accessibility

Page 15: Web accessibility 2010 v2

The Only One That Matters

People First

Page 16: Web accessibility 2010 v2

AODA Principles

IndependenceDignityIntegrationEquality of opportunity

Page 17: Web accessibility 2010 v2

W3C Principles

PerceivableOperableUnderstandableRobust

Page 18: Web accessibility 2010 v2

StrategiesPlanning For Web Accessibility

Page 19: Web accessibility 2010 v2

Plan for Accessibility……From the Beginning

Page 20: Web accessibility 2010 v2

Most errors are introduced during requirements analysis and design. The later they are removed, the most expensive it is to take them out.

Boehm et al (1975): “Some Experience with Automated Aids to the Design of Large-Scale Reliable Software.”

Page 21: Web accessibility 2010 v2

Analysis

Design

BuildLaunch

Support

Website Lifecycle

Page 22: Web accessibility 2010 v2

Support

Page 23: Web accessibility 2010 v2

Analysis

Design

BuildLaunch

Support

Change Request Lifecycle

Page 24: Web accessibility 2010 v2

Plan for Accessibility……at every step

Page 25: Web accessibility 2010 v2

Accessibility is not an optionIt is completing a website

Page 26: Web accessibility 2010 v2

Avoid Assumptions About Your Visitors

Page 27: Web accessibility 2010 v2

Count on Text Provide Text Alternatives

Page 28: Web accessibility 2010 v2

Don’t take control of your visitor’s experience

Page 29: Web accessibility 2010 v2

Use Clear Language

Page 30: Web accessibility 2010 v2

Be Usable, Searchable and Navigable

Page 31: Web accessibility 2010 v2

Be Semantic

Page 32: Web accessibility 2010 v2

Separate Content & Presentation

Page 33: Web accessibility 2010 v2

Progressive Enhancement Is the new

Graceful Degredation

Page 34: Web accessibility 2010 v2

Accessibility Testing

DesignFunctional

DemoFinal

Page 35: Web accessibility 2010 v2

Design Testing

LayoutColour Contrast

Unpack Assumptions

Page 36: Web accessibility 2010 v2

Functional Testing

Must work with a keyboard…EasilyLinear Flow

Assistive Technology is a Pre-Req

Page 37: Web accessibility 2010 v2

Demo Testing

All Alt Text in PlaceTest with Screen Reader

Turn off CSS

Page 38: Web accessibility 2010 v2

Final Testing

Real PeopleDifferent Needs

Assistive Technology

Page 39: Web accessibility 2010 v2

Ethnographic TestingTest with Real People

Page 40: Web accessibility 2010 v2

TacticsDoing Web Accessibility

Page 41: Web accessibility 2010 v2

HTML

CSS

JS

Solve Problems Lower on the Web Stack

Page 42: Web accessibility 2010 v2

Images, Forms & TablesOh My!

Page 43: Web accessibility 2010 v2

Images

Forms

Tables

Page 44: Web accessibility 2010 v2

People First

Separate Content & Presentation

Be Sematic

Page 45: Web accessibility 2010 v2

Alt Tags

Page 46: Web accessibility 2010 v2

The Meaning of Colour

Page 47: Web accessibility 2010 v2

Give Forms Linear Flow

Page 48: Web accessibility 2010 v2

Tables Aren’t Evil

Page 49: Web accessibility 2010 v2

Tools:Jaws, NVDA, Fangs

Firefox WebDev ToolbarFirefox Accessibility Extension

Page 51: Web accessibility 2010 v2
Page 52: Web accessibility 2010 v2
Page 53: Web accessibility 2010 v2

Top Related