Automattic Design Inclusive Design Checklist

• Use accessibility practices to avoid barriers.
  There’s no inclusion without accessibility. Accessible designs will present differently depending on the medium you’re working in; consider physical, visual, auditory, financial, and other factors as well as an individual’s temporary or permanent limitations to accessing each. Is your video accessible to someone with hearing impairment? Is your website accessible to someone with a low internet bandwidth? Is your copy readable by individuals with different education levels, for whom the text is in a second language, or who are new to the subject matter? The more contexts you consider, the more accessible and inclusive your designs will be.

   

  • Provide enough contrast between text and background color.
    Whether you’re working in print, digital, with light projection, or something else entirely, readers need contrast between text and background to distinguish letterforms. Designs with low contrast may be easy to read for one person, cause strain for another, and be entirely unreadable to a third. Test your contrast using a well-rated contrast checker and by having a diverse set of people review it and provide feedback.
  • Use more than color to indicate important information.
    Using color alone to indicate important information, like “proceed” or “cancel,” may exclude those with color blindness or vision impairment. The addition of a written message or icon provides further access to information.
  • Write good alt text for your images.
    “Alt text” is the common abbreviation for the alt attribute on an image online, and it’s used by screen readers to describe an image to the blind, visually impaired, and others. Images often provide useful context or flavor to content. Including good alt text — text that thoughtfully describes an image — helps more individuals get the full experience of your design.
  • Use focus states.
    Have you ever noticed the outlines, often blue, that show up around buttons or form fields when you’re filling them out? These outlines are called “focus indicators” or “focus states,” and they’re visual markers to specify which element the user is on within a page or application. Including these in interactive designs — and making them really obvious — goes a long way towards making the elements inclusive. Those who use screen readers due to visual impairment or blindness; those who rely on keyboard navigation, a mouth stick, or switch due to limited mobility; or power users who quickly navigate through pages all benefit from this important design detail.
  • Make descriptive links.
    Descriptive links provide your audience with context on where a link will take them. Screen readers navigate a page link by link. When a link doesn’t give any detail, but simply says something like “read more,” those engaging with your design via screen reader lack the context needed to get the full experience or make decisions.
  • Provide captions and descriptions of video.
    Videos usually include spoken information in an audio track, and visual information in a video track. Any information that is only provided visually or audibly is inaccessible to individuals who can’t see or hear. Captions can help for individuals who can’t see, while audio descriptions are useful for making visually complex videos accessible to those without or with limited sight. Lastly, a media transcript is a text-based alternative that includes all audio and visual information, including descriptions of scenes, in a transcript form that can be accessed by all. You may have limited options based on where a video is posted, but keeping the possible limitations to the audio and visuals in mind will help you design accessible solutions around those barriers.
  • Provide cost-accessible options of your designs.
    Some designs have high price tags due to expensive design details. Designs that are unnecessarily expensive exclude those with fewer resources or who are economically unstable. If high expenses are necessary, consider offering another price level option that doesn’t have the same costs. An expensive hardcover book might also be sold as a less-expensive soft-cover book, e-book, downloadable PDF, or a web page. If your primary offering is done thoughtfully, there should still be a draw for that form with those that can afford it.
  • Design for low bandwidth.
    One of the biggest factors in user satisfaction with a web product is speed. Optimizing your site or application for faster page and content load times means that more people will enjoy using it. There are also many areas of the globe without broadband internet connections — when you optimize for speed, you’re making your product more accessible to those who would otherwise be excluded because of lower connectivity.
• Create for clarity and consistency.
  Consistency begets usability. Inconsistency creates obstacles. Consider good wayfinding: be clear and consistent with icons, text, colors, and typography to allow the audience to easily follow the system through a changing space. The consistent use of an icon with the word helps orient children, those who don’t speak the interface language, and those who are distracted.
• Choose copy and imagery with care.
  Welcome a broad range of people in your imagery and words, because representation matters. While you’re aiming for consistency, avoid sameness. Make sure illustrations, photos, and videos don’t favor one race, gender, age, weight, or other characteristic that will exclude many others.
• Make designs to be maintained, adapted, and to last.
  Inclusive design works to meet the customer needs, and to extend the lifecycle of customer satisfaction. Create your designs with maintenance, adaptation, and evolution in mind to limit the number of hurdles the audience will face. Creating applications with the option for automatic updates gives customers the ability to benefit from improvements without having to personally track the evolution of your product or experience potential outages along the way. In print and environmental design, choose durable materials that can stand up to time and use to avoid unnecessary costs and frustrations for your audience.
• Empower your audience.
  Good design empowers those who use it — it’s about your audience, not you. Whether that’s a client who wants a lasting brand suite or a customer building their small business online, our responsibility as designers is to help our audience meet their needs without ongoing input from us. A branding system that can be utilized by non-designers at a company achieves this. A website tool that the client can manage themselves without ongoing support also achieves this.

Return to top ↑