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).
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
“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
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
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
“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
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.
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.
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.
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
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)
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)
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)
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.
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/
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
WEB ACCESSIBILITY YOUR DON’T NEED TO DO THINGS LIKE THIS BUT YOU’RE WELCOME TO DO THINGS LIKE THIS placeholder="Email Address" aria-label=“Email Address">
WEB ACCESSIBILITY ARIA IS ESPECIALLY USEFUL TO COMMUNICATE STATE AND RELATIONSHIPS label="Shopping Bag" role="button" aria-haspopup="true" aria- expanded="true" aria-controls="ac-gn-bagview-content"> Shopping Bag
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
WEB ACCESSIBILITY SO TELL THE BROWSER THEY’RE BUTTONS AND STYLE ACCORDINGLY An Important Link Learn More About This Button button, [role="button"] { … } button.primary, [role="button"].primary { … }
WEB ACCESSIBILITY STOP THIS DAMN MADNESS An Important Link Learn More About This Button ENFORCE ACCESSIBILITY PRACTICE An Important Link Learn More About This Button button[disabled], [role="button"][disabled] { ... }
timknight
morganepeng
mewmo
blakedg95
uxaustralia
transit_kix
y__ri9813
uxevents
romanshamin
magi1125
addyosmani
maltzj
tanoku
paulrobertlloyd
smashingmag
dotmariusz
soudai
ufuk
mza
robhawkes
bkeepers
cassininazir