Accessibility Building Accessible Apps. Klara Schmitt

Transcription

1 Accessibility Building Accessible Apps Klara Schmitt

2 WCAG 2.0 vs. Section 508 WCAG = Web Content Accessibility Guidelines : W3C publishes WCAG : Adopted by ISO Section 508 = Federal Government Standard : Established : Proposed revisions /11: Open for public comments : Comments close : Final rule published

3 New Section 508 includes: 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 Top to Bottom: Asana, Issuu, Twiter

4 New Section 508 Dates Published: Jan. 18, 2017 Enforcement Date: Jan. 18, 2018

5 Who does it help? Those with - Vision Issues - Hearing Issues - Cognitive Issues - Motor Impairments

6 Tapestry Version 1

7 Keyboard Nav VoiceOver Nav NVDA Nav Tab moves forward Shift + Tab moves backward These keys only jump between links & form elements Space = select form elements Enter = select links Ctrl + Option = VO keys VO + Shift = enter into page groups VO + arrows = navigating entire page Space = select form elements Enter = selects links Insert = NVDA key Same tab and shift/tab functionality as keyboard Same form control keys as keyboard

8 Demo Go to solution

9 2.4.7 Focus Visible Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

10 How do I fix it? 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

11 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.

12 How do I fix it? Keyboard Fake Button HTML Fake Button Javascript <div class="fake-btn more-work" role="button" tabindex="0" data-href= Button Text </div> Set tabindex= 0 on DOM to make focusable Support appropriate keystrokes as if it were a native element (eg. space & enter on buttons) $(".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"); }; });

13 Demo

14 How do I fix it? 1.1 Text Alternatives Bypass Blocks Web Spots For base map tiles set alt= on <img> 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

15 Demo Source:

16 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.

17 How do I fix it? WAI ARIA Tab Roles tab tablist tabpanel aria-expanded aria-selected aria-hidden* aria-controls Sensory Characteristics WAI ARIA Accordion 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.

18 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.

19 How do I fix it? 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.1 Text Alternatives (Charts)

20 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.

21 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.

22 Q&A Slides Available: