UX-UI.org

🦊 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!