an overview of accessibility
DESCRIPTION
An Overview of Accessibility. Mike Elledge Usability Specialist/ Accessibility SME Ford Motor Company. 20 minutes?. Things to know. It isn’t hard It’s worth the effort There’s lots of help. It isn’t hard…. Fundamentally, it’s about Writing valid and well-formed code - PowerPoint PPT PresentationTRANSCRIPT
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU9
…Accessible Widget Libraries•Accessible jQuery UI•AccDC (Accessible Dynamic Content)
5/14/2014
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
Screen Reader Demo•Read all•Navigation (headings, links, lists, landmarks)• Interaction (aria roles, forms, tables)•Content (paragraphs, images, required fields)
5/14/2014
Mike Elledge, Ford IT, CDU17
How to check Accessibility?1. Validate code2. Review elements3. Keyboard-only4. Screen Reader5. WAVE
5/14/2014
Mike Elledge, Ford IT, CDU
Questions?
5/14/2014
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU22
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
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
Mike Elledge, Ford IT, CDU
Use Plain Language•Avoid arcane vernacular!•Know your audience•Be consistent •Be concise
5/14/2014