Embed Size (px)
Citation preview
AccessibilityMultimedia, Forms, Navigation
Klara Schmitt
February 24–25, 2016 | Washington, DC
FedGIS Conference
• WCAG = Web Content Accessibility Guidelines • 508 is undergoing revision, new standard to be based on WCAG 2.0
• Section 508 was a technical checklist• WCAG 2.0 is a set of generalized principles• Comments on WCAG 2.0 closed May 28th 2015
WCAG 2.0 vs. Section 508
Those with…- Vision Issues- Hearing Issues- Cognitive Issues- Motor Impairments
Who does it help?
• Better knowledge sharing• Reviewing applications internally for compliance
• Working accessibility into new features
What are we doing?
NavigationKeyboard, Assistive Technologies
• Tab moves forward• Shift + Tab moves
backward• These keys only jump
between links & form elements
• Space = select form elements
• Enter = select links
Keyboard Nav
• Ctrl + Option = VO keys• VO + Shift = enter into page
groups• VO + arrows = navigating
entire page• Space = select form elements• Enter = selects links
VoiceOver Nav
• Insert = NVDA key• Same tab and shift/tab
functionality as keyboard• Same form control keys as
keyboard
NVDA Nav
2.1.1. Keyboard
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
2.4.1 Bypass Blocks
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
StylingVisual Focus, Color
1.4.1 Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
2.4.7 Focus Visible
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
1.4.3 Contrast (Minimum)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;- Incidental: Text or images of text that are part of an inactive user interface component, that are pure
decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
http://webaim.org/resources/contrastchecker
DEMOTesting for Color Contrast
Automated Testing• Tota11y by Khan Academy (Chrome Extension)• AInspector (Firefox Plugin)
Spot-Checking Color Contrast• WCAG Luminosity Contrast Ratio Analyzer (Chrome Extension)
- By Horia Tudosie of Esri Canada
• WhatFont (Chrome Extension)• WebAIM’s Color Contrast Checker
FormsForms & Errors
Which fields are required?
Submit
Request Information
Better, right?
Submit
Request Information* indicates a required field
Better, right?Trick Question• Better UX for sighted users• NVDA doesn’t read single asterisks
How to Improve• Use aria-required=“true” and required on inputs tag
• Tells assistive technologies to read field aloud as required
• Could also use word (required) instead of *
Submit
Request Information* indicates a required field
<input type=“text” aria-required=“true” required />
Submit
Request Information
NVDA stills reads it like this.
Better, right?Trick Question• Better UX for sighted users• NVDA doesn’t read single asterisks
How to Improve• Use aria-required=“true” and required on inputs tag
• Tells assistive technologies to read field aloud as required
• Could also use word (required) instead of *
Submit
Request Information* indicates a required field
<input type=“text” aria-required=“true” required />
Say a non-sighted NVDA user submits this form…
Request Information
Submit
* indicates a required field
Request Information
Submit
* indicates a required field
Error HandlingInclude Error Summary at Top• “Oops. You didn’t fill out all the
required fields.”• Important to shift keyboard focus to
that message!• Otherwise, focus stays on submit
button; user-hears nothing as screen reader didn’t move
Oops. You didn’t fill out all the required fields.Part 1: Error Summary
3.3.1 Error Identification
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
3.3.3 Error Suggestion
If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. (Level AA)
Request Information
Submit
* indicates a required field
Error HandlingInclude Inline Text Errors• Text should describe error• If text is red, check color contrast
ratios• Red borders are good design, but not
sufficient alone for accessibility• Individual inline errors should be
placed between label & input
Part 2: Inline Errors Oops. You didn’t fill out all the required fields.
Handling ErrorsPart 3: Sandwich Inline Errors
Request Information* indicates a required field
Name *
Phone Number *
State *
Submit
Klara Schmitt
6233
VA
Invalid format
BADRequest Information* indicates a required field
Submit
Name *
Phone Number *
State *
Klara Schmitt
6233
VA
Invalid format
GOOD
3.3.2 Labels or Instructions
Labels or instructions are provided when content requires user input. (Level A)
Associated LabelsBest Way• Use for attribute on label with
matching id on input.
Request Information
Submit
* indicates a required field
<label for=“first-name”>First Name</label><input id=“first-name” type=“text” />
MultimediaImages
1.1.1 Text Alternatives
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
CAPTCHAs
• User-research says best experience is no CAPTCHA• But no CAPTCHA = lot of spam• Many CAPTCHAs not accessible being predominantly
graphics• Google’s new ReCAPTCHA seems like one of best
- Audio is actually understandable
Inline Images - Require Alt Text/Value• No alt, assistive technology reads file name• Add alt attribute to images to describe them (eg. alt=“map showing oyster habitat in Chesapeake Bay”)• If image is decorative, use to alt=“” to tell screenreader to skip it
Live Example
Problem• Sprites rely on being background images• Background images don’t support alt text
Solution• Add an ‘aria-label’ to give assistive
technologies context
<div class="fb" aria-label="Facebook"></div><div class="tw" aria-label="Twitter"></div><div class="yt" aria-label="YouTube"></div>
Background Images & Image SpritesCaveat• Windows Vista/XP doesn’t show background
images
Image Credit: ‘Google Docs’ by Terrill Thompson
Iconfont vs SVG
VS
ICONFONT• Mapped to a font character• Scalable & customizable by CSS• Uses CSS typographic syntax • Some assistive technologies read
character instead
• For people (eg. Dyslectics) who may replace fonts, icons might render as empty box
VoiceOver read as “j button”
SVG (Inline Code)• Code is scalable & customizable by
CSS
- Don’t have to worry about inherited typographic styles
• Can use <title></title and aria-label for assistive technologies
• SVGs don’t disappear when users override existing fonts
Live ExampleLive Example
Q & A
