A presentation at DrupalCon Seattle in in Seattle, WA, USA by Helena McCabe
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
Mockup/Sketch
Prototype Code
Prototype Code
Content/Copy
Content/Copy
Production
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
In this interactive experience, we will help build empathy and understanding about people with disabilities (PWD). We will start off by talking about how people with disabilities use the internet and how we can make websites and apps more inclusive. Once you’re briefed on the ABC’s of accessibility, we’ll delve a little deeper into different personas within the disability community with hands-on activities. You will learn how digital accessibility relates to the specific needs of each persona and how to build understanding into your own workflow.
Whether you’re a seasoned accessibility pro or you’ve never heard of it before, technical or non-technical, you’ll be able to follow along, participate, and gain valuable new knowledge and insight about how to make your digital offerings more inclusive through personas.
Attendees will leave this session with:
Here’s what was said about this presentation on social media.
for free. You
can too.