Why do I need an Accessible Design System?

What is Accessibility?

Over 1 billion people on the planet have some type of disability

If you’re unfamiliar with accessibility, here’s a quick overview.

Accessibility for web and digital products ensures people with impairments have alternative equivalents or solutions. These alternative equivalents can enable people with impairments to complete tasks such as making an online purchase.

Impairments can be situational, temporary, or permanent, such as:

• Vision (e.g., color blindness, partial vision loss, and complete blindness)—affects people’s ability to read text or see images.
• Hearing (e.g., total hearing loss or partial deafness)—affects people’s ability to hear audio or video files.
• Motor skills (e.g., broken arm, arthritis, or missing limbs)—affects people’s ability to navigate a website due to limited mobility.
• Cognition (e.g., traumatic brain injury or neurodiversity)—affects people’s ability to process the information on a website.

Why creating an accessible Design System?

Building accessible affordances into your Design System have multiple benefits. It will enable your team to:

• make consistent components and experiences for people with impairments
• create more efficiency within the team to scale faster
• improves the usability for everyone using your product
• enables all product teams to take steps toward providing an acc essible user experience across platforms and products

We need to consider digital accessibility at every stage of creating products and services. And it must not end there. We need to constantly review and improve everything we build and develop.

How to create it?

You need to take care of some technical rules like:

• simple and clear design

• keep content short, clear and simple

• simple language

• build for keyboard use only

• make buttons and links descriptive (avoid texts like "click here")

• a good contrast ratio (between text and background),

• provide accessible names for interactive elements like icon buttons

• use semantic HTML code (p, button, ul, label, nav, footer, aside, table, etc...)

• describe informative images with alt attribute

• use subtitles and captions for videos, etc...

You will find all these rules in the Web Content Accessibility Guidelines!

Bonus

Some usefull links about accessible design systems below:

• https://www.smashingmagazine.com/2022/11/design-systems-inspiration-resources-case-studies/

• https://design-system.w3.org/getting-started.html

• https://www.deque.com/blog/auditing-design-systems-for-accessibility/

• https://gerireid.com/accessibility.html

• https://carbondesignsystem.com/guidelines/accessibility/overview/

• https://a11y-style-guide.com/style-guide/

• https://m3.material.io/foundations/accessible-design/accessibility-basics

• https://design-system.service.gov.uk/get-started/

• https://designsystem.digital.gov/components/overview/