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

Demo

Go to solution

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)

Demo

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: