Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating Accessible Experiences


Published on

Published in: Technology, Business
  • Be the first to comment

Creating Accessible Experiences

  3. 3. WHO USES ASSISTIVE TECHNOLOGY (AT)? Blind customers with a screen reader that describes the page using synthesized speech or braille output. Low-vision customers who use large fonts or a screen magnifier. . Motor-impaired customers who can’t use a mouse and may use a special keyboard or voice-control interface.
  4. 4. HOW DOES AT WORK?Screen readers interpret webpages, allowing the customer to find both static text and interactive elements.Screen magnifiers “zoom” into the site at a minimum of 200% so the customer sees only a portion of the screen at a time. In both cases, web sites are navigated with keyboard controls only.
  5. 5. WHYDO WE CARE?
  6. 6. Accessibility for Ontarians withDisabilities Act (AODA) requires: Jan 1, 2014: WCAG 2.0 A compliance Jan 1, 2021: WCAG 2.0 AA compliance
  7. 7. 7-8% of web users are usingAssistive Technologies (AT) CNIB, 2012
  8. 8. Screen Readers/Magnifiers
  9. 9. Shop our site using a screen reader.Close your eyes. Use only keyboard.
  11. 11. PERCEIVABLEInformation and user interface components must be presentable to users in ways they can perceive. What if you couldn’t distinguish red/green? What if you couldn’t see the image?
  12. 12. OPERABLELinks and navigation, user controls, and page features must function in a way that is operable by everyone. Considerations: What if you had no mouse? What if you couldn’t see the buttons or images?
  13. 13. UNDERSTANDABLEContent should be written and presented in a way that is understandable to everyone Considerations: What if you only “heard” a link/button? What if you had dyslexia and a time limit? What if you couldn’t see the icon?
  15. 15. 1.1 All non-text content that ispresented to the user has a text alternative that serves the equivalent purpose.
  16. 16. TEXT ALTERNATIVES HIGHLIGHTS Alt Text must be long enough x to completely describe important image Level A x Use null alt text “” on purely decorative elements AT should ignore. Level A x Form labels must be used to x associate text with fields Level A
  17. 17. LABELING
  18. 18. 1.2Provide alternatives for video and audio content.
  19. 19. MULTIMEDIA HIGHLIGHTS Captions for all prerecorded x video content with audio tracks. (Level A) Audio description (voice over and action description) for x video content. (Level AA) x Controls (play, stop etc) must x be accessible (text versions of graphic buttons) and controllable by keyboard. (Level A)
  20. 20. 1.3 Content can be presented in different ways (non-visually orvisually magnified) without losing information or structure.
  21. 21. STRUCTURE/SEQUENCE HIGHLIGHTS Information, structure, and x x relationships conveyed through presentation are also available in text. (Level A) Correct reading sequence can be programmatically determined. (Level A) Understanding and operating content does not rely on shape, size, visual location, orientation, or sound. (Level A)
  22. 22. DOM vs DESIGNThe AT user “sees” only DOM, not design. So the DOM is the users mentalimage of the document structure: No left or right, only up and down the DOM.Create logical sections of the document to help identify interface elements thatare related.HTML5 semantic elements like <nav>, <header>, and <h1> are useful here.Make sure parts of controls are grouped together in the DOM.For example, the drop-down menu button and the drop-down menu itself.Use CSS for layout instead of tables.
  23. 23. INTERACTIVE CONTROLSUse native HTML tags instead of generic divs or spans.Why?Screen readers cant identify generic divs or spans as controls.Generic divs or spans arent focusable, so they cant be activated with thekeyboard.
  24. 24. 1.4Make it easier for users to see content.
  25. 25. VISUAL CONTRAST HIGHLIGHTS ! Text and images of text has ! a contrast ratio of at least 4.5:1. ! (Level AA) Text can be resized up to 200% without loss of content or functionality (Level AA) ! Text is used rather than image text (logo excepted). (Level AA)
  26. 26. ARIA FOR SCREEN READERS ARIA attributes provide semantic information to screen readers that is normally conveyed visually. Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget like a button. ARIA roles also indicate composite controls that do not have a native HTML equivalent. ARIA landmark roles can be used to identify separate areas of your site.
  27. 27. 2.1Make all functionality available from a keyboard.
  28. 28. KEYBOARD ACCESSIBLE HIGHLIGHTS x All functionality is operable x x through a keyboard interface. (Level A) No keyboard “traps”. If focus x can be moved to a component of x the page using a keyboard interface, then focus can be moved away from that component using a keyboard interface. (Level A)
  29. 29. MANAGE FOCUSKeyboard-only users navigate by moving focus through the DOM.We have to proactively place focus with element.focus() to create an efficientworkflow.When changing tabs, navigating to an overlay, etc - put focus in an appropriateelement in the new view.When that view is closed, return focus to where it was.
  30. 30. 2.2Provide users enough time to read and use content.
  31. 31. ENOUGH TIME HIGHLIGHTS If a time limit is set for task completion, must be able to adjust the timing. (Level A) For any moving, blinking or x scrolling information that (1) x starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it. (Level A)
  32. 32. 2.4Provide ways to help usersnavigate, find content, anddetermine where they are.
  33. 33. skip to content? NAVIGABLE x HIGHLIGHTS Bypass blocks of content that x are repeated on multiple pages (Level A) Pages have titles that describe x topic or purpose. (Level A) The purpose of each link can be x determined from the link text alone. (Level A)
  34. 34. 3.1Make text content readable and understandable.
  35. 35. READABLE HIGHLIGHTS Identify language of text (<html lang=“fr”>. (Level A) and language changes within content <span lang=“fr”>Francais</span>. (Level AA) • Minimum Font size, CSS 100%, 12 points • Use standard, widely available, easy to read fonts • Avoid using italic, strike through, underline and drop shadows.http://
  36. 36. 3.2Make Web pages appear andoperate in predictable ways.
  37. 37. PREDICTABLE HIGHLIGHTS When any component receives focus, it does not initiate a change of context. (Level A) x If entering text or selecting an option changes the context or content of a page, user must be forewarned. (Level A)
  38. 38. 3.3Help users avoid and correct mistakes.
  39. 39. INPUT ASSISTANCE HIGHLIGHTS If an input error is detected,x  x item is identified and error is described to the user in text. (Level A) x Labels or instructions are All fields marked with * are x provided when content requires required. user input. (Level A) * STREET ADDRESS
  40. 40. 4.1 Maximize compatibility with current and future user agents,including assistive technologies.
  41. 41. COMPATIBLE WITH AT HIGHLIGHTS Markup elements have complete start and end tags, are nested, do not contain duplicate attributes, IDs are unique. (Level A) Name and role can be determined for all form elements, links and script components the name and role; states, properties, and values that can be set by the user can be programmatically set. (Level A)
  43. 43. MIND SHIFT1. Wireframe and design with Accessibility in mind.2. Ensure all new features are built to Level A standards.3. Test for AT technologies as heartily as we test for IE9. • Screen Reader • Screen Magnifier • Keyboard Only4. Secure AT users for future user testing.
  44. 44. TOOLS & RESOURCESWCAG Visual Map: Analyzer, Version 2.2 Add-on Contrast Checker Toolbar for Firefox and
  45. 45. CXThe contents of this presentation were borrowed heavily from the following resources: CNIB’s Introduction to Web Accessibility and Google Developer’s Day GDD 2011. Thank you!