Web Accessibility: Front-End Meetup

Presented to the St. Pete Front-End Meetup on May 12, 2016.

Transcript

1. WEB ACCESSIBILITY AN INTRODUCTION FOR FRONT-END DESIGNERS
2. WEB ACCESSIBILITY HI, I’M TIM ▸ Organizer of the St. Pete Front-End Meetup ▸ Director of User Experience @ GravityFree ▸ Instructor with Tampa Bay Girl Develop It ▸ Community Moderator for Treehouse ▸ Started my adventure with HTML in 1995 (the year before CSS).
3. WEB ACCESSIBILITY WHAT’S ON THE AGENDA ▸ What is Accessibility (a11y)? ▸ The ADA, Section 508, and the WCAG 2.0 ▸ Technology Won’t Save Poor Design: Contrast, State, Perception, and Refresh Rate ▸ HTML Attributes and Semantic HTML5 Tags ▸ ARIA Role Definitions ▸ Think Outside the Structure ▸ What if we designed our CSS around accessibility roles? ▸ The Testing Tools I Love
4. ACCESSIBILITY ISN’T JUST ABOUT SCREENREADERS
5. “I’M NOT A LAWYER AND I DON’T PLAY ONE ON TV OR THE INTERNET.” Tim Knight WEB ACCESSIBILITY
6. ADA, SECTION 508, AND THE WCAG 2.0 WEB ACCESSIBILITY
7. I’LL MAKE THIS PART QUICK A GUIDELINE CRASH COURSE ON THE ADA, SECTION 508, AND THE WCAG 2.0
8. “FEDERAL PROCUREMENT LAW REQUIRES THAT [INTERACTIVE TRANSACTION MACHINES] PURCHASED BY THE FEDERAL GOVERNMENT COMPLY WITH STANDARDS ISSUED BY THE ACCESS BOARD UNDER SECTION 508 OF THE REHABILITATION ACT OF 1973, AS AMENDED.” Section 707 of The American’s with Disability Act
 http://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#pgfId-1006537
9. SO WHAT’S SECTION 508? WEB ACCESSIBILITY
10. WEB ACCESSIBILITY SECTION 508: WEB-BASED INTRANET AND INTERNET INFORMATION AND APPLICATIONS (1194.22) ▸ Requires text equivalents for non-text and multimedia items ▸ Information should be conveyed without the need for color ▸ It should be readable without a stylesheet ▸ Data relationships should be defined (tables, forms, etc.) ▸ Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz (basically no more than 3 times a second) https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the- section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22
11. WEB ACCESSIBILITY SECTION 508: WEB-BASED INTRANET AND INTERNET INFORMATION AND APPLICATIONS (1194.22) ▸ And so much more… ▸ Worst yet, Section 508 is currently in a state of revision. https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the- section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22
12. “FEDERAL PROCUREMENT LAW REQUIRES THAT [INTERACTIVE TRANSACTION MACHINES] PURCHASED BY THE FEDERAL GOVERNMENT COMPLY WITH STANDARDS ISSUED BY THE ACCESS BOARD UNDER SECTION 508 OF THE REHABILITATION ACT OF 1973, AS AMENDED.” Section 707 of The American’s with Disability Act
 http://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#pgfId-1006537
13. DON’T GET TOO EXCITED. IF YOUR COMPANY RECEIVES FEDERAL FUNDING, CURRENT COURT RULINGS ARE STARTING TO SET PRECEDENT THAT THIS COULD INCLUDE YOU TOO.
14. STAY AWAKE… ALL THE LEGAL STUFF IS ALMOST DONE
15. ENTER THE WCAG 2.0 (WEB CONTENT ACCESSIBILITY GUIDELINES)
16. BROKEN UP INTO FOUR GROUPS: Perceivable Operable Understandable Robust
17. WEB ACCESSIBILITY PERCEIVABLE: ▸ Guideline 1.1: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. ▸ Guideline 1.2: Time-based media: Provide alternatives for time-based media. ▸ Guideline 1.3: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. ▸ Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background. INFORMATION AND USER INTERFACE COMPONENTS MUST BE PRESENTABLE TO USERS IN WAYS THEY CAN PERCEIVE.
18. WEB ACCESSIBILITY OPERABLE: ▸ Guideline 2.1: Make all functionality available from a keyboard. ▸ Guideline 2.2: Provide users enough time to read and use content. ▸ Guideline 2.3: Do not design content in a way that is known to cause seizures. ▸ Guideline 2.4: Provide ways to help users navigate, find content, and determine where they are. USER INTERFACE COMPONENTS AND NAVIGATION MUST BE OPERABLE.
19. WEB ACCESSIBILITY UNDERSTANDABLE: INFORMATION AND THE OPERATION OF USER INTERFACE MUST BE UNDERSTANDABLE. ▸ Guideline 3.1: Make text content readable and understandable. ▸ Guideline 3.2: Make web pages appear and operate in predictable ways. ▸ Guideline 3.3: Help users avoid and correct mistakes.
20. WEB ACCESSIBILITY ROBUST: CONTENT MUST BE ROBUST ENOUGH THAT IT CAN BE INTERPRETED RELIABLY BY A WIDE VARIETY OF USER AGENTS, INCLUDING ASSISTIVE TECHNOLOGIES. ▸ Guideline 4.1: Maximize compatibility with current and future user agents, including assistive technologies. There are three levels of conformance. For a helpful guide on meeting A, AA, or AAA conformity, see: http://webaim.org/standards/wcag/WCAG2Checklist.pdf
21. OKAY, THAT’S THE BASIC GUIDELINES… AND NOW…
22. TECHNOLOGY WON’T SAVE POOR DESIGN WEB ACCESSIBILITY
23. CONTRAST (AA) The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1 Large-scale text and images of large- scale text should have a contrast ratio of at least 3:1 (14pt and bold or larger, or 18pt or larger)
24. CONTRAST (AAA) The visual presentation of text and images of text should have a contrast ratio of at least 7:1 Large-scale text and images of large- scale text should have a contrast ratio of at least 4.5:1 (14pt and bold or larger, or 18pt or larger)
25. https://github.com/getflourish/Sketch-Color-Contrast-Analyser COLOR CONTRAST ANALYSER FOR SKETCH
26. http://webaim.org/resources/contrastchecker/ COLOR CONTRAST CHECKER
27. STATE Make it clear to the user where they are, where they’ve been, and what their options are.
28. STATE
29. STATE Pressing tab on BBC let’s you access accessibility features.
30. PERCEPTION Avoid extended cognitive load to decipher the meaning of abstract images or complicated text. (Yes, there’s probably a simpler way I could have said that)
31. REFRESH RATE Alerting with blinking, shaking, or other techniques that “flash” an item on the screen should not flash that item more than 3 times per second to reduce the chance of seizures.
32. HTML ATTRIBUTES AND SEMANTIC HTML5 TAGS WEB ACCESSIBILITY
34. THE “GOOD” BROWSERS WILL UNDERSTAND EACH OF THESE ROLES AUTOMATICALLY.
35. BROWSER ACCESSIBILITY http://www.html5accessibility.com/
36. LET’S TALK PRACTICAL CODE EXAMPLES
37. WEB ACCESSIBILITY DEALING WITH IMAGES AND ALT TAGS <img src="/images/logo.png"> <img src="/images/logo.png" alt=""> <img src="/images/logo.png" alt="WestCo Logo"> THE LONGDESC ATTRIBUTE WAS REMOVED IN HTML5 <figure>
 <img src="/images/headshot-of-tim-knight.png" alt="Photo of Tim Knight"> <figcaption>A recently taken headshot of Tim Knight.</figcaption> </figure>
38. WEB ACCESSIBILITY ICON FONTS WITHOUT LABELS ARE INVISIBLE <a href=“http://www.facebook.com/”> <i class=“icon icon-facebook”></i> </a> USE A LABEL THAT YOU CAN HIDE, BUT SHOW TO A SCREENREADER <a href="http://www.facebook.com/"> <i class="icon icon-facebook"></i> <span class="sr-text">Facebook</span> </a>
39. WEB ACCESSIBILITY SCREENREADER TEXT (BASED ON BOOTSTRAP) .sr-text { border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
40. WEB ACCESSIBILITY INLINE SVG ICONS <a href="https://www.facebook.com/" title="Like Us on Facebook"> <svg viewBox="0 0 1024 1024"> <title>Like Us on Facebook</title> <desc>A long description can be added optionally here.</desc> <path d="M575.87 1024h-191.87v-512h-128v-176.45l128-0.058-0.208-103.952c0-143.952 39.034-231.54 208.598-231.54h141.176v176.484h-88.23c-66.032 0-69.206 24.656-69.206 70.684l-0.262 88.324h158.69l-18.704 176.45-139.854 0.058-0.13 512z"></path> </svg> </a>
41. WEB ACCESSIBILITY <table> <caption>Table 1.1: A table example with various office products.</caption> <thead> <tr> <th scope="col">Quantity</th> <th scope="col">Product</th> <th scope="col">Price</th> <th scope="col">Total</th> </tr> </thead> <tbody> <tr> <td>Office Desk</td> <td>2</td> <td>$800.00</td> <td>$1,600.00</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Totals:</td> <td>$1,100.00</td> ORGANIZING TABLE DATA WITH THEAD, TBODY, TFOOT, AND SCOPE
42. WEB ACCESSIBILITY FORM FIELDS SHOULD HAVE RELATED LABELS <label for=“email-address”>Email</label> <input type=“email” name=“email-address” id=“email-address”> DON’T JUST USE A PLACEHOLDER INSTEAD OF A LABEL, IT DOESN’T COUNT <label for="email-address"> <span class=“sr-text">Email Address</span> </label> <input type="email" name="email-address" id="email-address" placeholder="Email Address">
43. CONNECTING WITH ARIA ROLES WEB ACCESSIBILITY
44. DEFAULT ROLES
45. YOU DON’T NEED TO STATE AN ARIA ROLE IF YOU’RE JUST REITERATING THE DEFAULT ROLE. ARIA ROLES ARE A WAY FOR YOU TO HAVE ACCESS TO THE BROWSER’S ACCESSIBILITY API TO ADJUST ATTRIBUTES FOR AN ITEM IN THE ACCESSIBILITY TREE. http://w3c.github.io/html-aria/
46. WEB ACCESSIBILITY CURRENT ARIA ROLES NOT AVAILABLE IN HTML ▸ alert ▸ alertdialog ▸ gridcell ▸ log ▸ marquee ▸ menuitemcheckbox ▸ menuitemradio ▸ scrollbar ▸ status ▸ tab ▸ tabpanel ▸ timer ▸ tooltip ▸ treeitem ▸ grid ▸ menu ▸ menubar ▸ tablist ▸ toolbar ▸ tree ▸ treegrid ▸ directory ▸ document ▸ group ▸ note ▸ presentation ▸ region ▸ application ▸ search For the full list see: https://www.w3.org/TR/wai-aria/roles
47. WEB ACCESSIBILITY YOUR DON’T NEED TO DO THINGS LIKE THIS BUT YOU’RE WELCOME TO DO THINGS LIKE THIS <input type="email" name="email-address" id="email-address" placeholder="Email Address" aria-label=“Email Address"> <div class="hidden" aria-hidden="true"> I'm a hidden div </div> <div hidden aria-hidden="true"> I'm a hidden div </div>
48. WEB ACCESSIBILITY ARIA IS ESPECIALLY USEFUL TO COMMUNICATE STATE AND RELATIONSHIPS <a class="ac-gn-link ac-gn-link-bag" href="/us/shop/goto/bag" aria- label="Shopping Bag" role="button" aria-haspopup="true" aria- expanded="true" aria-controls="ac-gn-bagview-content"> <span class=“sr-text">Shopping Bag</span> </a> <div class="ac-gn-bagview-content" id="ac-gn-bagview-content"> <p>Your Bag is empty.</p> </div>
49. THINK OUTSIDE THE STRUCTURE WEB ACCESSIBILITY
50. DON’T FORGET YOUR VIDEOS WEB ACCESSIBILITY
51. SUBTITLE WORKSHOP XE http://www.uruworks.net/
52. AEGISUB http://www.aegisub.org/
53. YOUTUBE https://www.youtube.com
54. WEB ACCESSIBILITY <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> </video> USING SUBTITLES WITHIN HTML5 VIDEO For more information on adding captions and subtitles to HTML5 video, see: https:// developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/ Adding_captions_and_subtitles_to_HTML5_video
55. THERE’S ALSO PDFS, WORD, OR OTHER TYPES OF DOCUMENTS TO CONSIDER WEB ACCESSIBILITY
56. WHAT IF WE DESIGNED OUR CSS AROUND ROLES? WEB ACCESSIBILITY
57. WEB ACCESSIBILITY LINKS AREN’T BUTTONS, THEY’RE LINKS <a href="target.html" class="button">An Important Link</a> <button class="button">Learn More About This Button</button> .button { background-color: #ccc; border: 1px solid #999; border-radius: 3px; color: #333; cursor: pointer; font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 5px 10px; text-decoration: none; } .button:hover { background-color: #666; border: 1px solid #666; color: #fff; }
58. WEB ACCESSIBILITY SO TELL THE BROWSER THEY’RE BUTTONS AND STYLE ACCORDINGLY <a href="target.html" role="button">An Important Link</a> <button>Learn More About This Button</button> button, [role="button"] { … } button.primary, [role="button"].primary { … }
59. WEB ACCESSIBILITY STOP THIS DAMN MADNESS <a href="target.html" class=“button--disabled”>An Important Link</a> <button class=“button--disabled">Learn More About This Button</button> ENFORCE ACCESSIBILITY PRACTICE <a href="target.html" role=“button” disabled>An Important Link</a> <button disabled>Learn More About This Button</button> button[disabled], [role="button"][disabled] { ... }
60. THE BUTTON CONCEPT IS JUST AN EXAMPLE…
61. WEB ACCESSIBILITY WHAT ABOUT ROLE SPECIFIC COMPONENTS? [role=“tablist”].feature__pager 
 [role=“tab”] {…}
62. http://www.ebaytechblog.com/2015/11/04/how-our-css-framework-helps-enforce-accessibility/
63. DROPBOX’S INTERNAL FRAMEWORK INCLUDES ACCESSIBILITY MIXINS https://github.com/dropbox/scooter/pull/4
64. THE TESTING TOOLS
 I LOVE WEB ACCESSIBILITY
65. ACCESSIBILITY DEVELOPER TOOLS https://github.com/GoogleChrome/accessibility-developer-tools
67. TOTA11Y https://khan.github.io/tota11y/
69. WAVE http://wave.webaim.org/
71. https://tenon.io/
73. RECOMMENDED BOOKS I REALLY LOVE WEB ACCESSIBILITY
75. REMEMBER, THE WEB IS FOR EVERYONE
76. ANY QUESTIONS? WEB ACCESSIBILITY
77. THANK YOU! WEB ACCESSIBILITY FIND ME ON TWITTER @TIMKNIGHT
78. SLIDES HTTPS://SPEAKERDECK.COM/TIMKNIGHT/WEB- ACCESSIBILITY-FRONT-END-MEETUP