building accessibility compliant apps · 2017. 2. 28. · •web software + mobile-native apps,...
TRANSCRIPT
Accessibility
Building Accessible Apps
Klara Schmitt
• WCAG = Web Content Accessibility Guidelines
- 2008: W3C publishes WCAG 2.0
- 2010: Adopted by ISO
• Section 508 = Federal Government Standard
- 1998: Established
- 2008: Proposed revisions
- 2010/11: Open for public comments
- 2015: Comments close
- 2017: Final rule published
WCAG 2.0 vs. Section 508
• Web Software + Mobile
- Native apps, applications, learning &
project management software
- Websites, web apps, web pages
• Digital Content
- Electronic documents
- .doc, .pdf, .xls, etc
- Agency communications
- Social media
New Section 508 includes:
Top to Bottom: Asana, Issuu, Twiter
• Published: Jan. 18, 2017
• Enforcement Date: Jan. 18, 2018
New Section 508 Dates
Those with…
- Vision Issues
- Hearing Issues
- Cognitive Issues
- Motor Impairments
Who does it help?
TapestryVersion 1
• 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.4.7 Focus Visible
Any keyboard operable user interface has a mode of operation where the keyboard focus
indicator is visible.
How do I fix it? 2.4.7 Focus Visible
• Don’t set outline: 0px for :focus
• Watch out for reset.css files that set everything to 0
• Avoid a strictly color solution
• For links add text-decoration: underline for :hover & :focus or make it decorative
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.
How do I fix it? 2.1.1 Keyboard
<div class="fake-btn more-work" role="button" tabindex="0"
data-href=”http://">
Button Text
</div>
$(".fake-btn").click(
function()
{
window.location = $(this).attr("data-href");
return false;
});
$(".more-work").on('keydown', function(e) {
var code = e.which;
if ((code === 13) || (code === 32)) {
window.location = $(this).attr("data-href");
};
});
Fake Button HTML Fake Button Javascript
• Set tabindex=“0” on DOM to make
focusable
• Support appropriate keystrokes as if it
were a native element (eg. space &
enter on buttons)
How do I fix it? 1.1 Text Alternatives
2.4.1 Bypass Blocks
• Add aria landmarks to key UI elements
- <nav role=“navigation”>Links</nav>
- <div role=“main”>Body Content</div>
• Voice Over shortcut to menu Crtl+Opt+U• For base map tiles set alt=“” on <img>
Web Spots
Demo
Source: http://patrickarlt.com/accessible-js-api-app/
1.3.3 Sensory Characteristics
Instructions provided for understanding and operating content do not rely solely on sensory
characteristics of components such as shape, size, visual location, orientation, or sound.
How do I fix it? 1.3.3 Sensory Characteristics
• tab
• tablist
• tabpanel
• aria-expanded
• aria-selected
• aria-hidden*
• aria-controls
WAI ARIA Accordion RolesWAI ARIA Tab Roles
• tab
• tablist
• tabpanel
• aria-expanded
• aria-selected
• aria-hidden*
• aria-controls
• aria-multiselectable
• aria-labelledby
*Pro-Tip: Always use aria-hidden and it’s true/false values rather than aria-visible, which has known bugs with screen readers.
1.1 Text Alternatives
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 or simpler language.
How do I fix it? 1.1 Text Alternatives
(Charts)
• Use a hidden table for screen readers
• Use aria-labels or aria-labelledby to support SVG graphics
• Use <summary> if possible (easier for static charts)
• Support keyboard navigation
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 large text (ratio of at least 3:1), incidental text, or logotypes.
1.4.4 Resize Text
Except for captions and images of text, text can be resized without assistive technologies up
to 200 percent without loss of content or functionality.
Q&A
http://www.slideshare.net/KlaraSchmitt/fedgis-2017-building-accessible-apps
Slides Available: