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).
(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
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
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
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
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
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.
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.
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.
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
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)
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)
<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>
<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>
<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">
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/
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>
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
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] { ... }