A collection of inclusive, cross-functional UX & UI resources, infrequently curated by Jennifer Strickland
🦊 Hello!
An infrequently curated collection of inclusive, cross-functional UX & UI resources
Inclusive Design Guidelines
- Make text as readable as possible
- Don’t overuse caps. Full-caps can be difficult to read and misinterpreted by screen readers.
- Use camel case for multi-word hashtags. This makes hashtags more legible, more compatible with screen readers.
- Avoid saying “click here,” “more,” “learn more,” “show more” — link text needs to make sense in context, and should make sense when taken out of context.
- Put hashtags and mentions at the end. Punctuation marks are read aloud by screen readers, so hashtags or @ mentions can disrupt copy.
- Limit emoji use. Emoji also get read aloud by assistive tech. That means people will hear things like “loudly crying face” or “face with closed eyes and stuck out tongue.”
- Use an adequate font size. Make sure the font is legible, especially if used in images or places that aren’t modifiable.
- Limit line length. Lines that are too long can interfere with readability and retention.
- Use True Text when possible. What’s True Text? Think of the difference between a blog post and a scanned PDF. True Text is easier to enlarge and translate. And it’s more compatible with screen readers or other assistive technologies.
- Provide descriptive captions for images. Tips for writing descriptive alt-text:
- Convey the content and functionality of the image. There’s a huge gap between “Image of a chart,” and something like, “A bar chart illustrates that there has been a year-over-year increase in forest fires, peaking at 100 this year.”
- Skip saying “image of” or “photograph of.” The Royal National Institute of Blind People says most screen readers prefer you don’t.
- Mention color if it’s relevant.
- Share humor. Descriptive text doesn’t have to be overly formal and should do its best to express what’s funny.
- Transcribe text. If the image has copy that is central to its meaning, make sure you include it in the description.
- Read it out loud. Alt text is often read by screen readers, so read copy aloud to hear how it sounds.
- Learn from the best. WebAIM offers tips and good examples, Phase2 provides a number of scenarios, and copywriter Ashley Bischoff offers provides a number of tips.
- Include captions in videos, and provide a descriptive transcript.
- Use a color contrast of at least 4.5:1; consider 7:1 for mobile.
- Don’t rely on color for meaning.
- Visualize links. Add an underline or a hover animation to convey that hyperlinked text is clickable. Nielsen Norman Group has helpful guidelines for visualizing links.
- Use symbols. In graphs or infographics, use symbols or patterns as an alternative or addition to color. Or, add clarifying labels.
- Avoid placeholder text for forms.
- Be thoughtful about representation, for ability, age, gender, race, sexuality, socio-economics, etc. Recent findings on gender representation in media:
- Men get four times as much screen time as women
- Men speak seven times more than women
- 25% of ads feature men only, versus 5% that feature women only
- 18% of ads feature only male voices, versus 3% with only female voices
- Women are 48% more likely to be shown in the kitchen
- Men are 89% more likely to be shown as smart
- Only 2% of ads show intelligent women
- Women are shown in sexually revealing clothing five times more often than men
- 40% of women polled by Unilever say they do not identify with the women they see in advertising. The study also found that almost one-third of women felt advertising depicts women as perceived by men
- Only 2% of images in advertising feature plus-size women, even though they represent 67 percent of all women
- Just 1% of ads surveyed by Unilever show women being funny.
- Plan to test and iterate often, and embrace feedback.
This collection is a work-in-progress. If you have questions, please ask!