User Personas as an Inclusive Design Tool

Slide 1

Slide 2

Carie Fisher Senior Accessibility Instructor & Developer cehfisher cariefisher

Slide 3

Helena McCabe Senior Front-end Developer & Accessibility Specialist helenasue @misshelenasue @lullabot

Slide 4

1 2 3 Background Personas Takeaways

Slide 5

Background

Slide 6

Slide 7

WCAG Guidelines

Slide 8

PERCEIVABLE Ask yourself: Is there anything on our website or app that a person with a disability would not be able to perceive?

Slide 9

OPERABLE Ask yourself: Can users control interactive elements of our website/app? Does our website have any traps?

Slide 10

UNDERSTANDABLE Ask yourself: Is all of the content clearly written? Are all of the interactions easy to understand? Does the order of the page make sense?

Slide 11

Ask yourself: Does our website ROBUST only support the newest browsers or operating systems? Is our website developed with best practices? Does this work in both landscape and portrait orientation?

Slide 12

Fast Fact: “a11y” is a numeronym that is short for “accessibility” A -> [11 letters] -> Y

Slide 13

Inclusive Design & Development

Slide 14

Choosing an Inclusive Font

Slide 15

Thinking About Color & Contrast

Slide 16

Demo!

Slide 17

Personas

Slide 18

Personas ARE ● ● ● ● Based on real user data Supported by all departments Communicated early and often A toolset to create empathy Personas ARE NOT ● ● ● ● Real people or stereotypes Colorful artwork for your wall A substitute for user testing Useful if not actually used

Slide 19

Isaiah Smith Occupation: Eighth Grader Culture: Deaf Goal: Watch an online video

Slide 20

Demo!

Slide 21

Slide 22

Slide 23

How do you resolve this? ● Make sure videos have captions and/or transcripts ● Hand-captioning is best, but automatic captioning is better than nothing at all ● Transcripts and captions are different, both are important

Slide 24

Farrah Ali Occupation: SysAdmin Disability: Loss of Dexterity Goal: Using only a keyboard

Slide 25

Fast Fact: More people in the United States have a mobility disability than live in the state of California They outnumber California residents by nearly three million

Slide 26

Demo!

Slide 27

How do you resolve this? ● Plan out heading and page structure - make sure it makes sense to all users and devices ● Place important actions at the top or bottom of the page ● Use skip links and don’t forget your focus indicators

Slide 28

Owen O’Connor Occupation: Botany student Disability: Colorblind Goal: Analyze graphed data

Slide 29

Fast Fact: 1 in 12 men have some type of colorblindness Icon made by FreePik on FlatIcon.com

Slide 30

Demo!

Slide 31

Slide 32

Slide 33

How do you resolve this? ● Make sure color is not the only identifier ● Use tools to simulate what your site or app would look like for different types of color blindness ● Test color contrast levels for grayscale too

Slide 34

Slide 35

Eddie Moss Occupation: Web Developer Disability: Blind Goal: Chat with friends on Twitter

Slide 36

Demo!

Slide 37

// Bad example. <img src=”../assets/snail.jpg” alt=”snail”>

Slide 38

// Good example. <img src=”../assets/snail.jpg” alt=”Small, pink snail resting on top of a gray capped mushroom with green moss in the background.”>

Slide 39

// Please never do this. Not even if the SEO guy tells you to. <img src=”../assets/snail.jpg” alt=”Save on nature tours at national parks coupons tours wildlife ecology educational field trips vacations cheap free parking”>

Slide 40

Slide 41

Slide 42

How do you resolve this? ● Turn on “Compose image descriptions” on in your Twitter account: Settings > Accessibility ● Add context to image posts on all social media platforms ● Think about alt text like a tweet. Aim to briefly convey as much information as possible

Slide 43

Melissa Taylor Occupation: Business Owner Disability: Dyslexia Goal: Taking an online class

Slide 44

Demo!

Slide 45

How do you resolve this? ● Use an inclusive font in relative units like rems and ems ● Make sure to add enough margins, padding, and line spacing to your text ● Break text into small pieces or use bullet points/numbers

Slide 46

Camila Garcia Occupation: Retired from Army Disability: Aphasia Goal: Purchase a ticket to the zoo

Slide 47

Fast Fact: More people have a cognitive disability than the populations of Texas and Missouri combined

Slide 48

Demo!

Slide 49

How do you resolve this? ● Use icons along with text on important features ● Make sure there is enough white space on the page and minimize or eliminate distractions ● Give users enough time to complete tasks

Slide 50

Raymond Kiet Occupation: Concert promoter Disability: Vestibular disorder Goal: Visit a new band’s website

Slide 51

Demo!

Slide 52

How do you resolve this? ● Do not automatically play your media or slideshows ● Allow the user to take control of media-based features ● Be careful of gifs, animations, and other “delights” that may trigger vertigo and seizures