1 / 28

An Overview of Accessibility

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

ros
Download Presentation

An Overview of Accessibility

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. An Overview of Accessibility Mike Elledge Usability Specialist/ Accessibility SME Ford Motor Company

  2. 20 minutes? Mike Elledge, Ford IT, CDU

  3. Things to know • It isn’t hard • It’s worth the effort • There’s lots of help Mike Elledge, Ford IT, CDU

  4. 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 Mike Elledge, Ford IT, CDU

  5. 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 Mike Elledge, Ford IT, CDU

  6. There’s lots of help… • Articles • WebAIM • A List Apart • Simply Accessible • Books • “Pro HTML5 Accessibility” • “A Web for Everyone” • Specifications • W3C Mike Elledge, Ford IT, CDU

  7. More help… • PC Tools • NVDA screen reader • PC/IE • Web Accessibility Toolbar (WAT) • Developer Tools • PC/FF • WAVE • Juicy Studio Accessibility • Web Developers Toolbar Mike Elledge, Ford IT, CDU

  8. Even more help… • VisionSim (iOS, Android) Mike Elledge, Ford IT, CDU

  9. …Accessible Widget Libraries • Accessible jQuery UI • AccDC (Accessible Dynamic Content) Mike Elledge, Ford IT, CDU

  10. 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) Mike Elledge, Ford IT, CDU

  11. 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/ Mike Elledge, Ford IT, CDU

  12. 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/ Mike Elledge, Ford IT, CDU

  13. 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 Mike Elledge, Ford IT, CDU

  14. What issues do users encounter? • Inaccessible Flashcontent (Images) • CAPTCHA - images (I) • Links or buttons that do not make sense (Navigation) • Images with missing or improper descriptions (alt text) (I) • Screens or parts of screens that change unexpectedly (Coding) • Complex or difficult forms (C) • Lack of keyboardaccessibility (C) • Missing or improper headings (N) • Too many links or navigationitems (N) • Complex data tables (C) • Inaccessible or missing search functionality (N) • Lack of "skip to main content" or "skip navigation" links (N) Mike Elledge, Ford IT, CDU

  15. 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 language Mike Elledge, Ford IT, CDU

  16. Screen Reader Demo • Read all • Navigation (headings, links, lists, landmarks) • Interaction (aria roles, forms, tables) • Content (paragraphs, images, required fields) Mike Elledge, Ford IT, CDU

  17. How to check Accessibility? • Validate code • Review elements • Keyboard-only • Screen Reader • WAVE Mike Elledge, Ford IT, CDU

  18. Questions? Mike Elledge, Ford IT, CDU

  19. 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. Mike Elledge, Ford IT, CDU

  20. 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. Mike Elledge, Ford IT, CDU

  21. 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. Mike Elledge, Ford IT, CDU

  22. 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. Mike Elledge, Ford IT, CDU

  23. 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 Mike Elledge, Ford IT, CDU

  24. 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> Mike Elledge, Ford IT, CDU

  25. 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-describedbyto provide additional content • Aria-live to indicate an area that will change • Aria-required to indicate user input is necessary Mike Elledge, Ford IT, CDU

  26. 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> Mike Elledge, Ford IT, CDU

  27. 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> Mike Elledge, Ford IT, CDU

  28. Use Plain Language • Avoid arcane vernacular! • Know your audience • Be consistent • Be concise Mike Elledge, Ford IT, CDU

More Related