Accessibility for user experience (UX) designers

Accessibility for content designers
Rule idDescriptionWCAG Reference
distinguishable-linksThe links must be clearly distinguishable from regular text.
link-visited-focus-hover-active-stateCheck that states link, visited, focus, hover, and active have an appropriate UI.
indicate-status-by-colorMake sure the color is not used to indicate status. For example, green means accepted or color picker for clothes without labels. Adding a label next to the color can be useful for users.
device-independent-designMake sure the layout is still operable on tablet/mobile devices (smaller viewports).
minimum-clickable-areaMake sure that the interactive area has enough big space so that the user can use it. The closer and larger a target, the faster it is to click on that target.
color-contrastMake sure that the color contrast ratio is at least 4.5:1.

Avoid links that say Click here, Read more or content-free text like More details applied to a list of links.

Technical advise: use visually hidden part to explain the link context. Example: <a href="">Read more<span class="visually-hidden"> about Sitelint Platform</span>></a>. The visually-hidden CSS class refers to the content that is hidden, but still exposed to assistive technologies.

sensory-characteristicsDon’t provide instructions that rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound. For example, use a combination of positioning, color, and labeling to identify content.
formsMake sure labels are defined and the error messages are accessible.

Designing for people with dyscalculia and low numeracy:

  • Remove unnecessary numbers – always try to round values up to a whole number, and get rid of decimal places unless it’s money.
  • Leave lots of space, so that numbers don’t jump around so much on the screen for people with dyscalculia.
  • Involve people who struggle with numbers in the design process, from both within and outside the design team.
Designing for users with dyscalculia recommendations

Read more about Designing for people with dyscalculia and low numeracy on page.