accessibility quick fixes for ux practitioners ux - accessibility fixes.pdf · a web site has a...

22
Accessibility Quick Fixes for UX Practitioners Zayira Jordan, Dena Fife, Ann Greazel October 19, 2016

Upload: others

Post on 14-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Accessibility Quick Fixes for UX Practitioners

Zayira Jordan, Dena Fife, Ann Greazel

October 19, 2016

Page 2: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

What is DigitalAccessibility?

Page 3: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear
Page 4: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Digital accessibility means that people with disabilities can use digital content.

It also benefits people without disabilities.Adapted from the World Wide Web Consortium (W3C)

Page 5: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

SimulationsHearing

Visual

Dyslexia

Page 6: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

“How to do” Digital Accessibility?

Page 7: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

InaccessibleImages

<img src=”students.gif"alt=“ ”>

Page 8: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

<img src=”students.gif"alt=”Students in class">

Accessible Images

Page 9: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Structure and Headings

Before After

Page 10: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

InaccessibleLink Text

Page 11: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Accessible Link Text

Page 12: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

ColorColorColorColor

Page 13: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Captions

Page 14: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Navigational mechanisms that

are repeated on multiple web

pages within a set of Web

pages occur in the same

relative order each time they

are repeated, unless a change

is initiated by the user.

(WCAG 2.0, 3.2.3 Level AA)

ConsistentNavigation

Page 15: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear in the same relative order on each page where they are repeated.

For example, on a Web site of a company that sells products and offers training, when a user moves from the section on products to the section on training, the links to individual products are removed from the navigation list, while links to training offerings are added.

Examples provided by W3C

Page 16: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Testing Tools

Page 17: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Run a check and address

findings with the help of the

MS Accessibility checker.

Office AccessiblityChecker

Page 18: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

WAVE

Page 19: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Tawdis

Page 20: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Empathy is queen.

You can resort to personas to increase the sensibility in your team about different needs.

You can help team members identify the user’s needs and wants by filling out an empathy map.

http://www.solutionsiq.com/images/Empathy-Map-No-Stickies.png

Page 21: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

More information about how to“Do It Yourself” at

www.digitalaccess.iastate.edu

Page 22: Accessibility Quick Fixes for UX Practitioners UX - Accessibility Fixes.pdf · A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear

Instructional Development

• Center for Excellence in Learning and

Teaching (CELT)

• UDL on Campus

• Open source book on disabilities and

science and engineering education by

Ruta Sevo

• How Five Web Design Principles Boost

Student Learning in an Online Course

• How a course is evaluated for

accessibility

Web Development

• WCAG 2.0 (Level AA)

• WAI-ARIA

• "Web Accessibility, Developing with

Empathy,“ – a course by Udacity and

Google

Other Resources