An Overview of Accessibility

An Overview of AccessibilityMike ElledgeUsability Specialist/ Accessibility SMEFord Motor Company

20 minutes?

5/14/2014Mike Elledge, Ford IT, CDU

Mike Elledge, Ford IT, CDU

Things to know1. It isn’t hard2. It’s worth the effort3. There’s lots of help

5/14/2014


It isn’t hard…•Fundamentally, it’s about

▫Writing valid and well-formed code▫Adding information so that more people can use

your website▫Thinking ahead of time

5/14/2014


It’s worth the effort…• It will help 20 percent of people…everywhere!

▫60+ million in U.S.▫150+ million in Europe▫860+ million in Asia▫1.4+ billion Worldwide

•Not to mention saving your client and company from lawsuits…

•And adding customer $, preference, loyalty

5/14/2014


There’s lots of help…•Articles

▫WebAIM▫A List Apart▫Simply Accessible

•Books▫“Pro HTML5 Accessibility”▫“A Web for Everyone”

•Specifications▫W3C

5/14/2014


More help…•PC Tools

▫NVDA screen reader▫PC/IE

Web Accessibility Toolbar (WAT) Developer Tools

▫PC/FF WAVE Juicy Studio Accessibility Web Developers Toolbar

5/14/2014

Mike Elledge, Ford IT, CDU8

Even more help…•VisionSim (iOS, Android)

5/14/2014


…Accessible Widget Libraries•Accessible jQuery UI•AccDC (Accessible Dynamic Content)

5/14/2014


Legal Environment•Still awaiting new Section 508, ADA/Title III

expansion•Website lawsuits continuing, settlements =

WCAG 2.0 AA•Air Carrier Access Act (Dec 2013)•Accessibility for Ontarians with Disabilities Act

(AODA—Jan 2014)

5/14/2014


User Devices1

• Mobile ▫ Exploding 82%, +70% in 5 yrs▫ Apple 65%, Android 16%, Nokia 14%

• Multiple devices: 85% ▫ Desk + laptop + mobile = 48%

• Screen Readers▫ Desktop/laptop: JAWS 64% ▫ Mobile: VoiceOver 65%▫ Text-only or built-in speech 43%

• Browsers▫ IE: 59% falling▫ FireFox: 24% increasing

1Source: Screen Reader User Survey #5, http://webaim.org/projects/screenreadersurvey5/

5/14/2014

http://webaim.org/projects/screenreadersurvey5/




User Behavior/Perceptions1

• User expertise▫ “Advanced” 60%, increasing

• JavaScript▫Enabled 98%

• Navigation▫Landmarks 44%▫Headings 66%, “Find” 15%

• Accessibility▫37% better +2%▫22% worse -3%

1Source: Screen Reader User Survey #5, http://webaim.org/projects/screenreadersurvey5/

5/14/2014



Who are “these” people?•People who…

▫can’t hear videos▫can’t see a computer screen▫need to enlarge the screen▫can’t distinguish colors▫can’t use a mouse▫are easily distracted▫read slowly

5/14/2014


What issues do users encounter?1. Inaccessible Flash content (Images)2. CAPTCHA - images (I)3. Links or buttons that do not make sense (Navigation)4. Images with missing or improper descriptions (alt text) (I)5. Screens or parts of screens that change unexpectedly (Coding)6. Complex or difficult forms (C)7. Lack of keyboard accessibility (C)8. Missing or improper headings (N)9. Too many links or navigation items (N)10. Complex data tables (C)11. Inaccessible or missing search functionality (N)12. Lack of "skip to main content" or "skip navigation" links (N)

5/14/2014


What can you do?• Avoid Flash and CAPTCHAS• Caption audio & video• Associate information

▫Tables, Lists, Forms• Define page structure

▫Headings, Sections, Paragraphs• Describe objects

▫ Images and Links▫Widgets▫Announce page changes

• Use plain language5/14/2014


Screen Reader Demo•Read all•Navigation (headings, links, lists, landmarks)• Interaction (aria roles, forms, tables)•Content (paragraphs, images, required fields)

5/14/2014


How to check Accessibility?1. Validate code2. Review elements3. Keyboard-only4. Screen Reader5. WAVE

5/14/2014


Questions?

5/14/2014


Persona--Drew• Blind, 60 years old and has worked in IT for the

City of Broad Shoulders for the past 35 years. He volunteers as a technology tutor, blogs, and is an expert with GW Micro’s Window-Eyes screen reader.

• Reads Braille as does his wife, loves music, good food and navigates using a white cane. They have become avid fans of the Apple iPhone after adopting it last year.

• Every summer he and his wife go to an adult adventure camp for people who are blind or have low vision. Last year he went sky-diving and white river-rafting. Traveling is a high-priority for retirement.

5/14/2014


Implications--Drew• Drew uses a screen reader, so it is essential you include:

▫ Alt descriptions—for images that provide context▫ Headings, landmarks and descriptive link text—so Drew

can navigate through the site quickly and easily▫ Table headers, labels and ARIA—So he can understand

content and features

• Because he uses Window-Eyes and the iPhone, it will be important to test your site with them.

• As an AT expert and blogger, he will be compelled to share his experience with your website—for better or for worse. It may, be prudent to ask him try it before implementation.

5/14/2014


Persona--Susan• Low vision, 45 years of age, was working in sales

for an investment bank. Noticing that it was becoming difficult to read, Susan went to her ophthalmologist who diagnosed her with dry-type macular degeneration.

• Susan has found that magnifying lenses is helping her to cope and that eating a diet rich in anti-oxidants has slowed the progression of the disease. Nevertheless, she is unable to drive and relies on taxis and public transportation to get around.

• She is also thinking about changing her career an becoming a personal coach, helping others to cope with change based on her experience.

5/14/2014


Implications--Susan• Susan uses a combination screen enlarger/ screen reader called

ZoomText with a 27 inch monitor. She increases the size of text to 200% enabling her to see about ¼ of the website at a time. If there are too many images, she will turn off CSS so she can see page content displayed along the edge of her monitor.

• To best meet Susan’s needs, you should:

▫ Grouping Items--Put related items together in lists and proximate to each other

▫ Use CSS to style text rather than images--so it can be enlarged without losing sharpness.

▫ Use relative sizing for layout--so pages can be re-sized vertically.

5/14/2014


How do I do it?• Caption Audio and Video

▫Create transcript▫Add contextual information▫Add to the video/audio file

• Accessible Media Players▫BrightCove Media Player▫JW Player (Flash only)▫Fluid Project Video Player v0.1

• Captioning widgets▫MAGpie (PC)▫CCforFlash

5/14/2014


Describe Images, Identify Links• Describe relevant images

<alt=“Mustang’s 5.0 liter V-8 generates 420 horsepower.”>

• Identify links

• More details about Ford Mustang…

• More <a href=“ford.com/mustang”> details about Ford Mustang…</a>

5/14/2014


Describe Widgets and Page Changes•Use ARIA when HTML isn’t enough•Additional context for screen readers

▫Roles Landmarks to define page content Other roles for objects (widgets) and documents

▫Attributes Aria-labelledby to enhance labels Aria-describedby to provide additional content Aria-live to indicate an area that will change Aria-required to indicate user input is necessary

5/14/2014


Tie Information Together•Tables

▫Associate columns with cell data: <th> & <td>•Lists

▫Group related things together: <li> & <ul>•Forms

▫Associate labels with input fields: <label for> & <id>

5/14/2014


Describe Page Structure•Headings

▫Outline your content: <h1>…<hx>•Links

▫Make sense: “More about the new mustang”•Sections

▫<body>, <article>, <section>, <nav>, <aside>,<header>, <footer>, <main>

5/14/2014


Use Plain Language•Avoid arcane vernacular!•Know your audience•Be consistent •Be concise

5/14/2014

An Overview of Accessibility

Documents

Transcript of An Overview of Accessibility