🌱

a11y?

Design that works for all people, whatever their hardware, software, language, location, or ability
How do we get the most inclusive experience to market as quickly as possible?
  1. The Must Have WCAG 2.1 Checklist by Essential Accessibility
  2. Accessible color generator by Material Design
  3. Accessible Color standards - Designing in the browser by Google Chrome Developers

PEOPLE

  1. All sizing should scale exclusively on the user’s default text-size preferences.
  2. All design system spacing documentation is written in REM multipliers (1x = .5rem, etc.)

NAMING

  • ARIA semantics roles, states and properties

COLOR

  • Pairing colours without consideration for contrast doesn’t mean it’s accessible
  • Label everything in a design. This means providing programmatic labels for visual indicators in grouped assets, implied meaning due to layout, images, or hidden labels on icon-only buttons. Additionally, help instructions or errors must be clear in the resolution of the issue

There's a huge amount on information behind what accessibility means, WCAG standards and more.

I'm way more passionate about it than a real expert, and my-go resources for starting has been:

AAA Level: Optimal compliance

AAA compliance is known as the gold standard level of accessibility, which makes the difference between a pretty good experience with some roadblocks, and an excellent one that everyone can use.

It requires that you not only meet the guidelines for AAA, but also the requirements outlined in the previous two levels. In most cases it’s not always possible for all types of products to conform to the success criterias outlined in this level.

This is because AAA guidelines are more so for applications or websites where contrast is crucial, or where the consequences of not seeing would be catastrophic (think: disaster notifications, medical/healthcare apps, government, banking, automotive interfaces, and so on).

When it comes to contrast ratios it is essential that you meet a ratio of at least 7:1 for normal text and 4.5:1 for large or bold text.

Beyond these guidelines, a few of the requirements that you can expect under this level include:

  • An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media
  • Sign language interpretation is provided for all pre-recorded audio content in synchronized media
  • Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency

Your vision’s ‘score’ indicates how far a person with perfect vision would need to stand away from this chart to see the same as you.

So, if you have 20/40 vision, when you’re 20 feet from the chart you’ll see what someone with perfect vision sees when standing 40 feet away. Having 20/100 vision means that at 20 feet you see what those with 20/20 vision see at a distance of 100 feet.

Tools