Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Accessibility: Front-End Meetup

Web Accessibility: Front-End Meetup

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

Tim Knight

May 12, 2016
Tweet

More Decks by Tim Knight

Other Decks in Design

Transcript

  1. 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).
  2. 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
  3. “I’M NOT A LAWYER AND I DON’T PLAY ONE ON

    TV OR THE INTERNET.” Tim Knight WEB ACCESSIBILITY
  4. I’LL MAKE THIS PART QUICK A GUIDELINE CRASH COURSE ON

    THE ADA, SECTION 508, AND THE WCAG 2.0
  5. “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
  6. 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
  7. 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
  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. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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
  14. 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)
  15. 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)
  16. STATE Make it clear to the user where they are,

    where they’ve been, and what their options are.
  17. 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)
  18. 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.
  19. 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>
  20. 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>
  21. 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; }
  22. 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>
  23. 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
  24. 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">
  25. 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/
  26. 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
  27. 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>
  28. 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>
  29. 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
  30. 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; }
  31. 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 { … }
  32. 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] { ... }