When it comes to CSS, there are a lot of exciting, new things happening.
Including container queries, subgrid, cascade layers, and new color functions.
With new features come concerns about accessibility and how those features might affect accessibility and users.
In her New CSS with Accessibility in Mind presentation at the axe-con 2022 three-day conference, Rachel Andrew discussed what to consider as you begin working with the latest CSS features as well as how and where to share feedback if problems occur.
Here are my notes from her talk.
New CSS with Accessibility in Mind
- When CSS grid was released, it gave us separation of content and presentation for the first time
- Before layout, we used tables. Which mixed content with layout, creating accessibility issues because layout was broken up.
- With CSS layout, we moved away from tables, but layout was still tied to document structure. Example: creating the holy grail layout, a three-column layout with columns in any order in the markup.
- With the move to CSS grid, the restriction affecting no longer exists. Columns can be switched around, no major hoops have to be jumped to make the holy grail layout work.
- However, for many things on the web and in life: just because you can do them doesn’t mean you should. Disconnecting visual order from source order is one of them, affecting accessibility.
- Reading order of content is the order used for tabbing and what is announced to screen readers.
- Use what HTML gives you for free. Avoid trying to fix source problems in flexbox or the grid. Do it in HTML, not CSS.
- Load your document without CSS. Can you still read it? Tab through your content, can you follow it on your page and does it make sense?
- Normal flow is what things in CSS layout do when we don’t do any layout
- If you want everything to align with the grid, even if it’s not a direct child, consider subgrid. (Note: it’s only supported in Firefox at this time)
- Using
display: contents, child elements (list items, etc) can have the same flex order as their parent. - Container queries are similar is usage to media queries. Make sure you can change the markup of reusable components for the location you’re using it in
- When you’re keyboard navigating, you rely on the focus ring to tell you where you’re at on a page. Take care how you implement
focus:visible, it can cause issues for people who use a mouse plus a keyboard to navigate. - The new
color-contrast()feature chooses a color with the highest contrast from a list. Check out Andrew’s color-contrast() example on CodePen. - Another new feature,
prefers-color-scheme, matches the user preference for based on their operating system preference - Additional preference media features include:
prefers-reduced-motion,prefers-reduced transparency,prefers-contrast,forced-colors, andprefers-reduced-data - A dark theme isn’t always more accessible. Make sure users have the option to switch to a light theme. Here’s how to build a theme switch component.
- Always test the tab order of your document. It’s not only about screen reader users. People who navigate with the keyboard will experience jumps all over the document when tab order isn’t correct.
- Whatever choices you make regarding your CSS, test it. People don’t always report issues. Test with different browsers with lots of different users. We need to share with the community. Don’t assume others have already reported the issue.
Thank you to Rachel Andrew for sharing her presentation slides on Notist.
