Skip to content

Accessibility

Accessibility features and techniques.

prefers-reduced-motion

Customize Data
The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
Never heard of it
Know about it
Have used it
2020
2021

prefers-color-scheme

Customize Data
The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme.
Never heard of it
Know about it
Have used it
2020
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: Amelia Wattenberger

Amelia is creating some of the most amazing interactive blog posts about CSS and JS. Check out this post about how percentages work in CSS!

We asked members of the CSS community to share their “pick of the year”

Josh Comeau

Software developer and creator of CSS for JavaScript Developers.

prefers-reduced-data

Customize Data
The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.
Never heard of it
Know about it
Have used it
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: Miriam Suzanne

Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries.

We asked members of the CSS community to share their “pick of the year”

Stéphanie Walter

UX Researcher and CSS lover

Customize Data
The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.
Never heard of it
Know about it
Have used it
2021
Customize Data
The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
Never heard of it
Know about it
Have used it
2021

tabindex HTML attribute

Customize Data
The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).
Never heard of it
Know about it
Have used it
2021

ARIA HTML Attributes

Customize Data
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.
Never heard of it
Know about it
Have used it
2021

Recommended Resources

Website Accessibility, v2

Learn how to make your website applications accessible to a wider audience. Use keyboard shortcuts and navigation to help both power users and those with disabilities.
Thanks to our partners for supporting us! Learn more.