User Personas as an Inclusive Design Tool

Carie Fisher Senior Accessibility Instructor & Developer cehfisher cariefisher

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

1 2 3 Background Personas Takeaways

Background

WCAG Guidelines

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

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

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?

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?

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

Inclusive Design & Development

Choosing an Inclusive Font

Thinking About Color & Contrast

Demo!

Personas

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

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

Demo!

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

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

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

Demo!

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

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

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

Demo!

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

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

Demo!

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

// 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.”>

// 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”>

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

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

Demo!

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

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

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

Demo!

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

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

Demo!

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

Takeaways

Persona Recap

Mockup/Sketch

Prototype Code

Content/Copy

Production

Posters bit.ly/a11yresources

Resources bit.ly/a11yresources ● ● ● ● ● A11y Rocks Color Palette Accessibility Style Guide ChromeLens Colour Contrast Analyser Funkify

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee

THANK YOU! https://events.drupal.org/seattle2019/sessio ns/using-personas-inclusive-design-tool