Web Accessibility: Front-End Meetup

Web Accessibility: Front-End Meetup

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

2722012beb9afcad75df5c9f2229fd8c?s=128

Tim Knight

May 12, 2016
Tweet

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

  33. None
  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

  66. None
  67. TOTA11Y https://khan.github.io/tota11y/

  68. None
  69. WAVE http://wave.webaim.org/

  70. None
  71. https://tenon.io/

  72. None
  73. RECOMMENDED BOOKS I REALLY LOVE WEB ACCESSIBILITY

  74. None
  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