Content, Context, Users, and Inclusive Design

by Joshua Randall

for World Information Architecture Day

February 23, 2019

Agenda

• 5 minutes – Introduction: Who am I? Why am I here?

• 5 minutes – What are digital accessibility, inclusive design, and universal design?

• 10 minutes – the WCAG and the POUR model

• 10 minutes – the IA framework: Content, Context, Users

• Users: the scope of disabilities and why we should care

• Context: situational disabilities and stress cases

• Content: still the king of the U(nderstanable) in POUR

• 5 minutes – Summary and Conclusion

• 10 minutes – Questions and Answers

Disclaimers

I represent only myself, not my employer.

I am not a lawyer.

This is an informational presentation, not a how-to.

Introduction

Who am I? Why am I here?

image sources: YouTube; phelch66 on Wordpress

Who am I? (really)

• Joshua Randall, UX Designer, User Researcher, and

Accessibility Champion at KeyBank

• Bachelor’s degree in Philosophy

• Master’s degree in UX Design from Kent State University

• 20 years as an I.T. business analyst

• Became interested in UX 5 years ago

• Focused on accessibility for 1.5 years

Why am I here?

image source: Las Vegas Convention and Visitors Authority

Why am I here?

image source: O’Reilly Publications

Why am I here?

image source: Lunatic Labs

POUR meets IA – the crazy diagram

Why am I here?

+ = …

Why am I here?

image source: Emoji Island

What are digital accessibility, inclusive design, and universal design?

ADA or 508 conformance

web accessibility

digital accessibility

inclusive design

universal design

Source: adapted from Matt May, Adobe

What is digital accessibility?

Digital accessibility is the ability of a website,

mobile application, or electronic document to be

easily navigated and understood by a wide

range of users, including those users who have

visual, auditory, motor, or cognitive disabilities.

Source: Web Accessibility Initiative

What is inclusive design?

Inclusive design means design that considers

the full range of human diversity with respect to

ability, language, culture, gender, age, and other

forms of human difference.

Inclusive Design Principles are about putting

people first. It's about designing for the needs of

people with permanent, temporary, situational, or

changing disabilities.

Source: Inclusive Design Research Centre at OCAD U; inclusivedesignprinciples.org

Web

Content

Accessibility

Guidelines

WCAG (Web Content Accessibility Guidelines)

Perceivable

1.1 Text Alternatives

1.2 Time-based Media

1.3 Adaptable

1.4 Distinguishable

Operable

2.1 Keyboard Accessible

2.2 Enough Time

2.3 Seizures

and Physical Reactions

2.4 Navigable

2.5 Input Modalities

Understand-able

3.1 Readable

3.2 Predictable

3.3 Input Assistance

Robust

4.1 Compatible

Source: Web Accessibility Initiative

Version 2.0 since 2008

Version 2.1 in June 2018

Details of the WCAG Principles

P erceivable Users must be able to perceive the information and

U.I. components (can’t be invisible to their senses)

O perable Users must be able to operate the interface, U.I.

components, and navigation

Users must be able to understand the information

and the U.I.

U nderstandable

R obust Users must be able to access content as tech

advances (including changes in user agents and

assistive technologies)

Source: adapted from “Understanding the Four Principles of Accessibility” (WAI)

The Information Architecture (IA) Framework

Source: Information Architecture, 4th ed.

Users

• the scope of disabilities

• why we should care

Context

• situational disabilities

• stress cases

Content

• the importance of structure

Content, Context, Users, and Inclusive Design

Users, Context, Content, and Inclusive Design

Users: the scope of disabilities

15.3% of United States population, or almost 50 million people

• 6.2% have difficulty hearing or seeing • 2.8% have difficulty grasping objects • 6.3% have cognitive difficulties

Worldwide: also 15%, or over 1 billion people

Disabilities affect customers and employees

All of us will be affected eventually

Also think about temporary and situational disabilities

Sources: United States Census; World Health Organization; Bruce Tognazzini

Users: why we should care

• Accessibility is the right thing to do.

• Accessibility improves your brand.

• Accessibility is a quality issue.

• Accessibility affects your business-to-business work.

• Accessibility helps with search engine optimization.

• Accessibility supports low-bandwidth users.

• Accessibility reduces legal risk.

Sources: Karl Groves; Seyfarth Shaw; David Berman; International Telecommunications Union; Jupiter Research;

American Federation for the Blind

Context: situational disabilities

or anyone in bright sunlight

or anyone who needs to keep their volume down

Source: Microsoft inclusive design toolkit

Context: technology… assistive technology (AT)

Software

• Screen Readers (Text-to-Speech)

• Voice Recog. (Speech-to-Text)

• Screen Magnifiers (virtual)

• Ergonomic Aids to avoid

Repetitive Strain Injury (RSI)

• Mind Mapping & Org. Aids

• Proofing Tools, Note-taking, and

Literacy Aids

• Optical Character Recog. (OCR)

• Software for creating Braille

• Software for creating and reading

sound files

Hardware

• Keyboards

• Mice & Pointing Devices

• Headsets, Mics & Recording

Devices

• Equipment to support hearing

impaired users (for F2F mtgs)

• Screen Magnifiers (physical)

• Large monitors and monitor arms

• Ergonomic Support Equipment

• Braille Devices

• Scanners

• Personal printers

• Hardware specifically to enable a

user to work while out of office

Context: technological constraints example

image sources: Apple; iMore

Context: stress cases

• Stress eats cognitive resources

• Everyday and mundane stress

• running late

• technical failures

• Stress cases, not edge cases

• because edges can be ignored “for now” (which

turns into “for ever”)

Source: Design for Real Life, by Eric Meyer and Sarah Wachter-Boettcher

Content: still the king of the U in POUR

• Plain language

• Structure

• HTML <title>s, <h>eadings for semantics, never for style

Content: example of good structure

Source: World IA Day Years & Themes page

navigation

breadcrumb

H1 heading

H2 heading

Content: landmark regions

actual webpage

(HTML + CSS)

screen reader

(NVDA) [Ins+F7]

Source: www.html5accessibility.com/tests/roles-land.html

Summary and Conclusion

POUR meets IA – the crazy diagram, redux

Content, Context, Users, and Inclusive Design

Accessibility is the right thing to do and part of quality.

Inclusive design means we put people first and consider the range of human diversity when designing.

Make your information and content Perceivable, Operable, Understandable, and Robust.

For best IA results, blend WCAG’s POUR with Content, Context (of use), and Users.

Questions and Answers

Stuff to Jot Down While I Take Questions the Web Accessibility Initiative (WAI) website, w3.org/WAI

Cleveland Accessibility Meetup website, A11yCLE.com

book recommendations

• Accessibility for Everyone, Laura Kalbag (2017, A Book Apart)

• A Web for Everyone, Sarah Horton and Whitney Quesenbery (2014, Rosenfeld)

• Inclusive Components, Heydon Pickering (2018, self published e-book)

• Inclusive Design Patterns, Heydon Pickering (2016, Smashing Magazine)

Twitter hashtag #a11y (because there are 11 letters between ‘a’ and ‘y’ in ‘accessibility’)

Many free webinars from the top consultancies:

• Deque Systems

• Level Access

• The Paciello Group

• Tenon

from the home office in Shaker Heights, Ohio:

Top 10 A11y Things (not on the W3C websites)

1. inclusive-components.design

2. BBC’s Mobile Accessibility Guidelines

3. WebAIM (Accessibility In Mind) and their mailing list archive

4. Twitter #a11y

5. Deque Systems

6. Level Access / Simply Accessible

7. The Paciello Group (TPG) / Interactive Accessibility (IA)

8. Tenon.io and Karl Groves’ blog

9. NVDA screen reader (free, Windows) / VoiceOver (free, iOS)

10. WAVE tool

Name Dropping in no particular order

• Steve Faulkner (TPG, Technical Director)

• Léonie Watson (consultant; formerly TPG, Dir. of Communication)

• Henny Swan (TPG, author)

• Heydon Pickering (consultant)

• Dennis Lembrée (consultant; Deque; WebAxe)

• Jennie Lay-Flurrie (Microsoft, Chief Accessibility Officer)

• Karl Groves (consultant, Tenon founder)

• Adrian Roselli (consultant)

• Lainey Feingold (lawyer, author)

• David Berman (consultant)

Contact Me

Joshua Randall on…

• email: joshua.randall@gmail.com

• LinkedIn: linkedin.com/in/joshua-randall-3931257

• Twitter: @jrAccessibility (I mostly lurk)

My websites:

A11yCLE.com

JoshuaRandallUXD.wordpress.com

My groups:

Cleveland Accessibility Meetup (#A11yCLE)

UXPA Cleveland

Appendix - more POUR

information

WCAG: P for Perceivable

Perceivable

• Available to the senses (primarily vision and hearing)

either through browser, or through assistive

technologies (screen readers, magnifiers, etc.)

What To Do

• Text alternatives for images

• Captions and transcripts for video / audio

• Present content in different ways

• Design with proficient color contrast

• Avoid unnecessary movement or distractions

WCAG: O for Operable

Operable

• Users can interact with all controls and interactive

elements using either mouse, keyboard, or AT.

What To Do

• All functionality available through keyboard

• User-controlled timing and limits

• Don’t cause seizures (don’t flash > 3 / sec)

• Multiple ways to determine where you are, to

navigate, and to find content

WCAG: U for Understandable

Understandable

• Content is clear, unambiguous, and not confusing.

What To Do

• Use plain language (“writespeak”)

• Supplement text with illustrations, videos, etc.

• Consistent, obvious navigation and structure

• Pages operate in predictable ways

• Help users avoid and correct mistakes

WCAG: R for Robust

Robust

• Wide range of technologies can access the content

(including both old and new UAs and ATs).

What To Do

• Provide name, role, value, and state for non-standard

user interface components

• Adhere to W3C standards

• Use semantic markup

• Use progressive enhancement

POUR meets IA – the crazy diagram

Content

Perceivable

Operable

Understandable

Context

Users