In her User Personas as an Inclusive Design and Development Tool presentation at WordCamp US 2019, Carie Fisher discussed digital inclusion and shared practical steps web professionals can take to create accessible digital products and services.
Carie Fisher is an author, public speaker, and developer who is passionate about digital accessibility. She is currently a senior accessibility instructor and consultant at Deque.
What Stood Out For Me
I liked how Fisher included videos of autocraptions and walked through how different personas would experience websites, based on their different disabilities.
Her examples made it clear how our design and development decisions can create barriers to access web content.
And what we can do to remove those barriers.
Fisher’s less than one-hour presentation is available on YouTube as part of the Friday, November 1, 2019 livestream, with English captions. I’ve embedded it on this post.
The video will soon be available standalone on WordPress.tv.
Takeaways from User Personas as an Inclusive Design and Development Tool
- When we talk about people who are disabled, we’re talking about people with mobility issues, cognitive impairments, hearing, vision, and self-care issues.
- In the United States, one in four people reported a disability, with mobility reported most often (almost 14 percent).
- Making your site or app accessible to people with disabilities benefits everyone who uses your site.
- Web Content Accessibility Guidelines (WCAG) focuses on four principles, Perceivable, Operable, Understandable, and Robust (commonly referred to as POUR principles)
- Easy way to test keyboard accessibility traps on your website is to unplug your mouse and only use your keyboard to navigate
- For people with dyxlexia or other cognitive impairments, it’s important that content is clearly written. Does the order of your page make sense?
- With all the devices available, you can’t predict what people are using to access your website. Does your website only work with current browsers? Does your site work in both landscape and portrait mode?
- Did you know a11y is short for accessibility? It’s a numeronym, which starts with the letter “a”, ends with the letter “y” and has the number 11 to stand for the 11 letters in between the “a” and “y”.
- Choose an inclusive font. Example: Gill Sans vs. PT Mono. In Gill Sans, the letter i, l, and the number 1 all look the same. How can you tell the difference?
- If you can flip the letter (for example, the letter “b” and the letter “d”) and it looks the same, you’re not using an inclusive font. Which can cause issues for people with dyslexia or other cognitive difficulties.
- Make sure you add enough padding, margins, and spacing to your text
- Craft readable text: break it up into smaller pieces by using short sentences, short paragraphs, bulleted lists
- Create accessible color palettes. One free online tool to check your palette is A11y Color Palette, which can tell you what color combinations provide best color contrast and are the most robust.
- Colour Contrast Analyzer from The Paciello Group is excellent for analyzing colors without the need for HEX code; you can select colors on the page to analyze color contrast. Us it to test how legible your text is against other graphical elements.
- Personas are based on real user data, supported by all departments, not only design. They’re not a substitute for user research. They help guide the development process before you begin your design. Personas are only useful if you use them.
- Don’t rely on autocaptions for your videos.
Showing a video with ridiculous, unintelligible autocaptions (also known as craptions) is an excellent way for everyone to understand importance of adding captions to your videos. Well done, @cariefisher ! #WCUS #InclusiveDesign #a11y
— Deborah Edwards-Onoro (@redcrew) November 1, 2019
- Make sure the videos you publish have captions and/or transcripts. Captioning by a person is best.
- If you’re not using a third party service for video captions, you can use YouTube autocaptions as a starting point for your captions. Edit them to match the spoken words in your videos. Be certain to make your modified captions the default on YouTube.
- Funkify is a Chrome browser extension (free and premium) that simulates how users with several different abilities and disabilities experience a website
- Plan out headings and page structure on your web page or app. Confirm it makes sense to all users and on all devices.
- If you have important information at the top or bottom of a page, make sure users can access those areas (for example, infinite scroll makes it impossible to get to the footer with important links).
- Avoid making color the only indicator for content: messages charts, labels, etc. Add a pattern, shape, icon.
- Another tool for checking accessibility on a website is Chrome Lens, which allows designers/developers to interact with a website as a completely/partially blind or a colorblind person
- Deque has an excellent introductory guide to understanding cognitive disabilities
- Media adds interactivity to your site or app. Use it responsibly.
Do fun things while designing your site, but be aware of issues. Avoid automatically playing videos, slideshows, audio. Give user control of media (pause/stop on video). Consider that your animated GIF can trigger vertigo or seizures. ~@cariefisher #WCUS #a11y #InclusiveDesign
— Deborah Edwards-Onoro (@redcrew) November 1, 2019
- A11y Style Guide offers a range of helpful accessibility resources for ARIA (Accessible Rich Internet Applications), design, development, and media
