UI design accessibility

Many people talk about accessibility (often abbreviated a11y), but I rarely found concrete examples or applied advice for UI/UX design. With this list I wanted to gather the most common accessibility pitfalls and how to avoid them.

Bear in mind that the topic of accessibility is huge (and more a path than a completable goal) ... I also only know a fraction! UI is only part of the issue, there is much more like keyboard navigation, click/touch-area sizing, screen readers, hierarchy and layout, automated testing, etc.

If you think something is missing (or wrong) let me know! If you find this handy please do too 🙂 → EmailTwitter

Sharing (to spread awareness) is obviously also welcome 🙈

Tags: Contrast in UX/UI design, accessible interface design, readable visual design, software design accessibility

Common pitfalls

Example of an input with light grey text

Placeholders

Example of a colorful green button with white text

White text on colored buttons

Example of a blue ghost button

Colored ghost button

Example of light grey text on a white background

Light grey text on white

Example of a menu bar with little differentiation between the selected and the deselected menu items

Subtle color differences

Example of an info box with colored text

Colored text on colored background (e.g. alerts)

Example of brightly colored text

Colored text

Example of a shipping table with color coded states

Color coding

Example of dark grey text on black

Dark grey text on black

Recommended reading

  1. Accessibility, a powerful design tool by Hubert Florin from Slack
    → This article made me view accessibility more as an opportunity than a burden.
  2. How the web became unreadable (2016) by Kevin Marks for Wired
    → And interesting bit of history in how the web gained more possibilities, but lost contrast.
  3. Sim daltonism by Michel Fortin
    → A handy application that simulates various color blindnesses (MacOS/iOS only).
  4. Accessible colors by Misha Moroshko and Vedran Arnautovic
    → A tool to check color contrast for text (which even gives accessible alternatives).
  5. Accessible design is growing. But can it be beautiful? by Maile Pingel for Washington Post
    → How accessibility in architecture can become inspiration and also be beautiful if applied correctly.

If you liked this please let me know ...
this would mean a lot to me

EmailTwitter