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.

Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective

446 views

Published on

Watch the full video here: https://vimeo.com/166817433
DrupalCon New Orleans - May 11, 2016
David Spira, Catharine McNally

Creating an accessible web experience improves SEO, usability, and increases the size of your market by opening it up to the vast number of humans in the United States who have restraints on their ability to interact with web content.

What if there were economical ways of creating an accessible site?

Spend an hour with us, and we will walk you through the benefits and challenges of accessibility. We’ll help you understand the latest best practices for planning, implementing, and reviewing your site for accessibility. Most of all, we’re going to provide you with a playbook full of guardrails to easily maximize the accessibility of your Drupal 8 site website.

We want to make accessibility easy because it is too important to ignore.

Take-aways:
- Strategies for making the case to “go accessible.”
- Experience websites through a screen-reader on a non-compliant, as well as a compliant website.
- Learn a time and budget-saving method for creating closed captions in video content.
- “Out of the Box” Accessibility features of Drupal 8.
- Accessibility Playbook on how to ‘keep the guardrails up’ and continue to make your site’s theme accessible.

Published in: Technology
  • Be the first to comment

Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective

  1. 1. Practical, Compassionate, and Cost Effective EASY ACCESSIBILITY IN DRUPAL 8 CATHARINE MCNALLY | DAVID SPIRA
  2. 2. @cmcnally @dbspira
  3. 3. 285 MILLION WITH VISUAL IMPAIRMENT Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  4. 4. Phase2 | CATHARINE MCNALLY | DAVID SPIRA 360 MILLION WITH HEARING LOSS
  5. 5. THAT’S MORE THAN THE POPULATION OF… 360 MILLION WITH HEARING LOSS 285 MILLION WITH VISUAL IMPAIRMENT COMBINED, Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  6. 6. THE UNITED STATES Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  7. 7. Phase2 | CATHARINE MCNALLY | DAVID SPIRA THE EUROPEAN UNION
  8. 8. Phase2 | CATHARINE MCNALLY | DAVID SPIRA SOUTH AMERICA
  9. 9. 1 IN 10 PEOPLE NEED SOME KIND OF ACCOMMODATION Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  10. 10. ACCESSIBLE USERS INTERACT WITH YOUR SITE algorithmically Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  11. 11. Phase2 | CATHARINE MCNALLY | DAVID SPIRA Accessibility greatly reduces the design options. MYTH:
  12. 12. Color Contrast Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  13. 13. Normal Vision
  14. 14. Red Blind
  15. 15. Blue-Blind
  16. 16. Red-Weak
  17. 17. Black & White
  18. 18. http://www.color-blindness.com/coblis-color-blindness-simulator/
  19. 19. Phase2 | CATHARINE MCNALLY | DAVID SPIRA 4.5% of the world is colorblind .5% of the population are women. 8% of the population are men. Source: colorblindawareness.org
  20. 20. Phase2 | CATHARINE MCNALLY | DAVID SPIRA High Color Contrast makes it easier to view under bright sunlight.
  21. 21. TEXT OVER IMAGE One thing we see often are text on top of images, such as a front page masthead image. Phase2 | CATHARINE MCNALLY | DAVID SPIRA Pay attention to the variables: Can the text color change? If not, could a background gradient be applied? Or a solid color background?
  22. 22. THEME CUSTOMIZATION Out of the box, Bartik achieves the optimal color contrast between foreground and background. To check on customization to ensure its contrast ratios are maintained: D8 Module Opportunity: Check the Theme for Color Contrast? WCAG Color Contrast Checker (FIREFOX) Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  23. 23. Phase2 | CATHARINE MCNALLY | DAVID SPIRA http://leaverou.github.io/contrast-ratio/ THEME CUSTOMIZATION
  24. 24. COLOR CONTRAST RECAP Phase2 | CATHARINE MCNALLY | DAVID SPIRA AVOID LOW CONTRAST TAKE NOTE OF TEXT COLOR OVER IMAGES TAKE NOTE OF FONT WEIGHT USE COLOR CONTRAST CHECKERS
  25. 25. Phase2 | CATHARINE MCNALLY | DAVID SPIRA Alt text doesn’t make a difference. MYTH:
  26. 26. Hey, at least I ran out of staples Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  27. 27. ACCESSIBLE IMAGES FOR EVERYONE TWITTER Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  28. 28. Phase2 | CATHARINE MCNALLY | DAVID SPIRA INCLUDING DRUPAL8 EVERYONE’S DOING IT
  29. 29. IMAGE ALT TEXT A REQUIRED FIELD* Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  30. 30. The problem with Alt Text by default Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  31. 31. Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  32. 32. YOUR TURN @CMCNALLY | @DBSPIRA
  33. 33. Phase2 | CATHARINE MCNALLY | DAVID SPIRA http://leaverou.github.io/contrast-ratio/ D8 ACCESSIBILITY IMPROVEMENTS: ALT TEXT IMPROVEMENT: ALT TEXT REQUIRED IMPACT: BETTER SEO IMAGES DESCRIBED FOR BLIND
  34. 34. ALT TEXT RECAP Phase2 | CATHARINE MCNALLY | DAVID SPIRA AVOID COPYING TITLE TEXT AVOID NONSENSICAL TEXT USE KEYWORDS USE SHORT DESCRIPTIVE PHRASES
  35. 35. Phase2 | CATHARINE MCNALLY | DAVID SPIRA Accessibility breaks the budget. It’s too expensive! MYTH:
  36. 36. Closed Captions & Subtitles Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  37. 37. Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  38. 38. Phase2 | CATHARINE MCNALLY | DAVID SPIRA YOU TUBE AUTOMATIC CAPTIONING
  39. 39. Subtitles are great for silent autoplay Phase2 | CATHARINE MCNALLY | DAVID SPIRA Subtitles are great for silent autoplay
  40. 40. CAPTIONING RECAP Phase2 | CATHARINE MCNALLY | DAVID SPIRA DO LEVERAGE YOUTUBE AUTOMATIC CC DO DOWNLOAD & EDIT TEXT FILE DO RE-UPLOAD NEW FILE, OR ADD TO YOUR SITE
  41. 41. Phase2 | CATHARINE MCNALLY | DAVID SPIRA HEADINGS
  42. 42. HEADINGS RECAP Phase2 | CATHARINE MCNALLY | DAVID SPIRA AVOID USE OF HEADINGS FOR STYLING AVOID SKIPPING OF HEADINGS USE HEADINGS FOR HIERARCHY
  43. 43. Phase2 | CATHARINE MCNALLY | DAVID SPIRA LINKS
  44. 44. Identifying links for a screen reader Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  45. 45. Better Implementation of Links Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  46. 46. LINKS RECAP AVOID “HERE” | “CLICK HERE” Phase2 | CATHARINE MCNALLY | DAVID SPIRA USE DESCRIPTIVE LINKS Example: For more information, E-mail Joe Example: For more information, click here
  47. 47. Phase2 | CATHARINE MCNALLY | DAVID SPIRA It’s all or nothing! MYTH:
  48. 48. First, let’s thank the Drupal Accessibility Group! Phase2 | CATHARINE MCNALLY | DAVID SPIRA JesseBeach mgifford Nathan Briggs Bowersox Cliff
  49. 49. Phase2 | CATHARINE MCNALLY | DAVID SPIRA SEARCH
  50. 50. Making search (and forms in general) friendly for screen reader Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  51. 51. FORM ACCESSIBILITY OUT OF THE BOX FORM LABELS (D7) SEARCH ENGINE FORM & PRESENTATION (D7) RADIOS & CHECKBOXES (D8) INLINE FORM ERRORS (D8) Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  52. 52. LABELS INPUT ACTION HELP + MESSAGE Display FORM Label KEYBOARD ACCESSIBLE LABEL announced BEFORE INPUT KEYBOARD ACCESSIBLE FIELD TYPE OF INPUT IS ANNOUNCED RADIO GROUPS LABELED LINKS OR BUTTONS THAT SUBMIT FORM LINK + BUTTONS HAVE CONTEXT KEYBOARD ACCESSIBLE HELP TEXT BETWEEN FORM LABEL + INPUT MESSAGE TO VERIFY SUBMIT; ENSURE USER IS ALERTED OF CHANGE IN CONTENT IF YOU MODIFY THE FORMS… Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  53. 53. Phase2 | CATHARINE MCNALLY | DAVID SPIRA http://leaverou.github.io/contrast-ratio/ D8 ACCESSIBILITY IMPROVEMENTS: FIELDSETS IMPROVEMENT: RADIOS & CHECKBOXES IMPACT: SCREEN-READER AWARENESS USE OF KEYBOARD BETTER USER EXPERIENCE
  54. 54. Phase2 | CATHARINE MCNALLY | DAVID SPIRA LANDMARKS
  55. 55. Identifying page regions Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  56. 56. INPUT SKIP NAVIGATION LINKS, PROPER TABBING ORDER / STRUCTURE ARE STILL BASELINE REQUIREMENT; IN D8; SKIP TO MAIN IS NOW PART OF CORE TABBING ORDER ALSO GOT ATTENTION IN D8 Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  57. 57. Phase2 | CATHARINE MCNALLY | DAVID SPIRA http://leaverou.github.io/contrast-ratio/ D8 ACCESSIBILITY IMPROVEMENTS: ARIA IMPROVEMENT: WAI-ARIA, LANDMARKS, LIVE REGIONS, ROLE + PROPERTIES IMPACT: EASIER “SCAN-ABILITY” OF A SITE FOR SCREEN-READER
  58. 58. ERROR! INPUT INLINE ERRORS
 NOW AVAILABLE
 IN D8 (FORM API) Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  59. 59. Phase2 | CATHARINE MCNALLY | DAVID SPIRA http://leaverou.github.io/contrast-ratio/ D8 ACCESSIBILITY IMPROVEMENTS: ERRORS IMPROVEMENT: INLINE ERROR MESSAGES IMPACT: IMPROVED USER EXPERIENCE SCREEN-READERS AWARE OF ERROR
  60. 60. Phase2 | CATHARINE MCNALLY | DAVID SPIRA http://leaverou.github.io/contrast-ratio/ D8 ACCESSIBILITY IMPROVEMENTS: ANNOUNCE IMPROVEMENT: ALERTS SCREEN-READERS OF CHANGE IN CONTENT (aria-live) IMPACT: REFRESHED CONTENT ANNOUNCED TO SCREEN- READERIMMEDIATE ALERT FOR CHANGE IN CONTENT
  61. 61. Phase2 | CATHARINE MCNALLY | DAVID SPIRA CONTENT AUTHORS: THE UNSUNG HEROES
  62. 62. Phase2 | CATHARINE MCNALLY | DAVID SPIRA MAINTAINING ACCESSIBILITY: CONTENT AUTHORING ELEMENTS ALT TEXT SUBTITLES HEADINGS LINKS
  63. 63. NEED TO MAKE THE SITE ACCESSIBLE? Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  64. 64. Phase2 | CATHARINE MCNALLY | DAVID SPIRA DON’T PANIC
  65. 65. 1 2 3 4 5 6 7
  66. 66. 1 2 3 4 5
  67. 67. 1 2
  68. 68. Phase2 | CATHARINE MCNALLY | DAVID SPIRA http://leaverou.github.io/contrast-ratio/ D8 ACCESSIBILITY IMPROVEMENTS: TABBING IMPROVEMENT: CONSTRAINS A SET OF TABS TOGETHER IMPACT: BETTER CONTEXT OF TAB W/KEYBOARD MINIMIZED CONFUSION WITH SCREENREADER
  69. 69. WRAPPING UP Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  70. 70. LCD Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  71. 71. For a copy of our D8 ACCESSIBILITY CHEAT SHEET Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  72. 72. Fight for accessibility Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  73. 73. It’s the right thing to do Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  74. 74. It’s the selfish thing to do Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  75. 75. It’s easier to start with accessibility then it is to tack it on later. Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  76. 76. Americans with Disabilities Act Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  77. 77. Your users Yourself Your lawyer Usability SEO Because it’s the right thing to do Phase2 | CATHARINE MCNALLY | DAVID SPIRA DO IT FOR:
  78. 78. Accessibility is for everyone Phase2 | CATHARINE MCNALLY | DAVID SPIRA
  79. 79. Phase2 | CATHARINE MCNALLY | DAVID SPIRA BOOTH 101 CATHARINE MCNALLY | DAVID SPIRA @CMCNALLY | @DBSPIRA

×