Accessibility features and techniques.
Link to sectionprefers-reduced-motion
Chart
Data
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
Link to sectionprefers-color-scheme
Chart
Data
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.
Link to sectionprefers-reduced-data
Chart
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
Link to sectioncolor-contrast()
Chart
Data
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
Link to sectioncolor-scheme
Chart
Data
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
Link to sectiontabindex HTML attribute
Chart
Data
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
Link to sectionARIA HTML Attributes
Chart
Data
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
Link to sectionRecommended 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.