accessibility-oriented paradigm for designing ui

43
Accessibility- Oriented Paradigm for Designing UI Ystallonne Alves

Upload: yc

Post on 15-Jan-2015

238 views

Category:

Technology


1 download

DESCRIPTION

Presented at Free Software and Open Source Symposium, 2013. Understand real challenges for building accessible web applications, and learn how to effectively design boundless User Interfaces. It presents a potentially innovative concept, a new paradigm for designing User Interfaces being oriented by accessibility. Therefore, it discusses a new perspective that can affect creative and development processes, the design and development of rich interactive applications truly applying accessibility principles, which is highly desirable, commonly difficult, and rarely accomplished.

TRANSCRIPT

Page 1: Accessibility-Oriented Paradigm for Designing UI

Accessibility-Oriented Paradigm for Designing UIYstallonne Alves

Page 2: Accessibility-Oriented Paradigm for Designing UI

Ystallonne AlvesInteractive Web Developer

2 | 43

Page 3: Accessibility-Oriented Paradigm for Designing UI

Agenda

Accessibility concept

Guidelines for accessibility

Assistive Technology

Accessibility testing and tools

Standards-compliant markup and CSS

Successful projects showcase

Final thoughts Q & A

3 | 43

Page 4: Accessibility-Oriented Paradigm for Designing UI

Accessibility concept

4 | 43

Page 5: Accessibility-Oriented Paradigm for Designing UI

Accessibility concept

Allowing individuals with disabilities to use applications.

Includes all disabilities that affect access:

Visual Auditory Speech Physical

Learning Cognitive Neurological

5 | 43

Page 6: Accessibility-Oriented Paradigm for Designing UI

Accessibility concept

It is NOT the same as: Usability Designing applications to be more effective,

efficient, satisfying for all It is NOT the same as: Device Independence

Small screen devices Older browsers

Accessibility addresses issues that put individuals with disabilities at a disadvantage

6 | 43

Page 7: Accessibility-Oriented Paradigm for Designing UI

Accessibility concept

Good News There is no such

thing as inaccessible

Bad News There is no such

thing as accessible

7 | 43

Page 8: Accessibility-Oriented Paradigm for Designing UI

Accessibility concept

Range of accessibility You cannot make everything accessible to

everyone You can make content more accessible to more

people Different standards result in greater or less

accessibility

8 | 43

Page 9: Accessibility-Oriented Paradigm for Designing UI

Accessibility conceptBenefits

Provides equal opportunity More access to information More opportunity for interaction Makes applications usable considering

elements such as: eyes, ears, motor control, perception of color, and input devices

9 | 43

Page 10: Accessibility-Oriented Paradigm for Designing UI

Accessibility conceptDifficulties

There are wide implementation differences between browsers, platforms, and screen readers.

Older browsers and screen readers are not likely to handle dynamic web applications.

No browser or screen reader has fully implemented accepted standards.

There is no clear documentation on what is widely supported in all tools.

10 | 43

Page 11: Accessibility-Oriented Paradigm for Designing UI

Guidelines for accessibility

11 | 43

Page 12: Accessibility-Oriented Paradigm for Designing UI

Guidelines for accessibility

World Wide Web Consortium (W3C): It develops web-related standards, the best known of which is probably HTML. Several accessibility-focused standards have been produced by W3C, among them are:

Accessible Rich Internet Applications (ARIA): defines a technology for making dynamic web applications more accessible.

Web Content Accessibility Guidelines (WCAG): guidelines for creating accessible web sites.

Authoring Tool Accessibility (ATAG): guidelines for developing authoring tools that encourage and support authors to create accessible websites.

User Agent Accessibility Guidelines (UAAG): guidelines for developers of browsers, media players, etc. that facilitate accessible use.

12 | 43

Page 13: Accessibility-Oriented Paradigm for Designing UI

Guidelines for accessibility

AODA

The Accessibility for Ontarians with Disabilities Act (AODA) sets accessibility requirements in several areas, including information technology.

Inclusive design in Canada is in part driven by a background of anti-discrimination law such as the Canadian Charter of Rights and Freedoms and the Canadian Human Rights Act. The Common Look and Feel policy of the Canadian Government requires its websites to meet a number of accessibility requirements based on WCAG.

13 | 43

Page 14: Accessibility-Oriented Paradigm for Designing UI

Guidelines for accessibility

U.S. Section 508, and U.S. ADA standards Internationally, many other countries also have

legislation and policies regarding accessibility. In the United States, the Americans with Disabilities Act (ADA) and Section 508, which requires accessibility to be considered in government purchasing, have been important incentives to inclusive design.

14 | 43

Page 15: Accessibility-Oriented Paradigm for Designing UI

Assistive Technology

15 | 43

Page 16: Accessibility-Oriented Paradigm for Designing UI

Assistive Technology

Screen readers and magnifiers Blind and visually impaired

Refreshable Braille display Blind and deaf

Captioning software Deaf

Voice recognition software, switches and pointer sticks, and touch screens Motor impairments

© Google IO

16 | 43

Page 17: Accessibility-Oriented Paradigm for Designing UI

Assistive Technology

Screen readers JAWS, Job Access With Speech (Windows) NVDA, NonVisual Desktop Access (Windows) Orca (Linux) VoiceOver (Mac OS) ChromeVox (Chrome OS)

17 | 43

Page 18: Accessibility-Oriented Paradigm for Designing UI

Assistive Technology

Technology used differently Keyboard navigation Browser or system font size Browser window size Color settings Use style sheets

18 | 43

Page 19: Accessibility-Oriented Paradigm for Designing UI

Accessibility testing and tools

19 | 43

Page 20: Accessibility-Oriented Paradigm for Designing UI

Accessibility testing and tools

Accessibility Developer Tools

ChromeVox A screen reader for blind users

ChromeVis A magnifier for low-vision users

ChromeShades An accessibility testing tool for developers

All of these extensions are open-source, available at: google-axs-chrome.googlecode.com

20 | 43

Page 21: Accessibility-Oriented Paradigm for Designing UI

Accessibility testing and tools

Accessibility Developer Tools

Category Checks for

Labels and Alternative Content Images and form fields are labeled

Keyboard Accessibility Focusable UI controls

ARIA Valid ARIA roles

Low-vision Accessibility Foreground/background contrast ratio

Video Accessibility Captions and fallback content

21 | 43

Page 22: Accessibility-Oriented Paradigm for Designing UI

Accessibility testing and tools

Color testing

Contrast-A

http://www.dasplankton.de/ContrastA/

22 | 43

Page 23: Accessibility-Oriented Paradigm for Designing UI

Accessibility testing and tools

Color Filter

http://colorfilter.wickline.org/

Etre

http://www.etre.com/tools/colourblindsimulator/

Sim Daltonism

http://michelf.ca/projects/sim-daltonism/

23 | 43

Page 24: Accessibility-Oriented Paradigm for Designing UI

Accessibility testing and tools

AChecker (WCAG 1.0, Section 508, Stanca Act, BITV)

http://achecker.ca/checker/

Wave (WCAG 1.0, Section 508)

http://wave.webaim.org

Other tools suggested by W3C

http://www.w3.org/WAI/ER/tools/complete

24 | 43

Page 25: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSS

25 | 43

Page 26: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSS

One way to make your web app accessible is: Basic HTML Simple layout Forms-based interaction No JavaScript

26 | 43

Page 27: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSS

On the other hand, an enhanced way to make your web app accessible is: Use clean HTML and use standard tags whenever

possible; Manage focus; Add key handlers; and Add ARIA for screen readers.

27 | 43

Page 28: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSUse clean HTML and use standard tags whenever possible

Do not use a generic div or span when there is another HTML tag that is more semantically appropriate.

Native HTML5 links and controls are accessible by default:

<span onclick="">... ⇒ <a href="">...<div onclick="">... ⇒ <button onclick="">...

<button>Click here</button><input type=range></input><textarea>Accessible website</textarea>

28 | 43

Page 29: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSUse clean HTML and use standard tags whenever possible

Label images and form controls

Use CSS for layout, make sure DOM order is logical.

<img src="chart.png" alt=“My description"><label for="firstName">First name:<label><input type="text" id="firstName"/>

29 | 43

Page 30: Accessibility-Oriented Paradigm for Designing UI

CSS3 Filters: apply color filters to everything, including iframes, video, etc.

-webkit-filter: invert()

-webkit-filter: brightness(20%)

-webkit-filter: grayscale()

-webkit-filter: invert() contrast(80%)

Standards-compliant markup and CSSUse clean HTML and use standard tags whenever possible

30 | 43

Page 31: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSUse clean HTML and use standard tags whenever possible

It is possible to invert all content on a page, including images, simply applying the following CSS:

html {

-webkit-filter: invert();

}

31 | 43

Page 32: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSManage focus

Make custom interactive elements focusable with tabindex:

<!-- Natural tab order --><div onclick="" tabindex="0">Clicky 1</div>

<!-- Custom tab order --><div onclick="" tabindex="7">Clicky 2</div>

<!-- Focusable but not in tab order --><div onclick="" tabindex="-1">Clicky 3</div>

32 | 43

Page 33: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSAdd key handlers

Custom controls should respond to keys like Enter, Space, Arrows, Escape, etc. as appropriate.<div id="replyIcon" tabindex="0" onclick="reply()" onkeydown="return onReplyKeydown(event)">Reply</div>

function onReplyKeydown(event) {// It executes when pressing Space or Enter

if (event.keyCode == 32 || event.keyCode == 13) {

reply();}

}

33 | 43

Page 34: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSAdd ARIA for screen readers ARIA (Accessible Rich Internet Applications), now

part of HTML5, allows you to build arbitrary custom controls and make them accessible.

ARIA attributes provide semantic information to screen readers that is normally conveyed visually.

34 | 43

Page 35: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSAdd ARIA for screen readers Use the ARIA role attribute to indicate that a generic

tag is playing the role of a standard widget like a button:

Use ARIA states and properties to add dynamic information about the current state of an element:

<div tabindex="0" role="button">Send</div>

<div tabindex="0" role="checkbox" aria-checked="true"> Include attachments </div>

35 | 43

Page 36: Accessibility-Oriented Paradigm for Designing UI

Standards-compliant markup and CSSAdd ARIA for screen readers Content that changes without a page refresh should

be identified as a live region. Add ARIA live region attributes to dynamic content:

There are also certain ARIA roles which are considered "live" by default:

<span class='saving' aria-live='polite'>Saving...</span>

<div role='alert'>Are you that you want to delete?</div>

36 | 43

Page 37: Accessibility-Oriented Paradigm for Designing UI

Successful projects showcase

37 | 43

Page 38: Accessibility-Oriented Paradigm for Designing UI

Successful projects showcase

Canadian Government http://www.canada.ca/home.html

American Government http://www.usa.gov/

Accessites http://www.accessites.org/site/category/showcase

38 | 43

Page 39: Accessibility-Oriented Paradigm for Designing UI

Final thoughts

39 | 43

Page 40: Accessibility-Oriented Paradigm for Designing UI

Final thoughts

Recap: Formulating an Accessibility-Oriented Paradigm for Designing UI Define target platform and audience Design UI outlines considering accessibility

testing and validation results Transform UI visual plans into a coded UI Develop with standards-compliant technology,

continuously executing accessibility-focused progressive enhancements

40 | 43

Page 41: Accessibility-Oriented Paradigm for Designing UI

Final thoughts

Accessible does not have to mean static, slow, and simple. With just a bit more work, it is possible to deliver a dynamic accessible experience and visually appealing UI.

The first step does not require any special tools or expertise: just unplug your mouse.

Start experimenting other alternatives for interactivity.

41 | 43

Page 42: Accessibility-Oriented Paradigm for Designing UI

Q & A

42 | 43

Page 43: Accessibility-Oriented Paradigm for Designing UI

Thank you for your attention!

Ystallonne [email protected]

43 | 43