The @container query, that elusive feature developers have been requesting and proposing for years, has finally made its debut in a browser. Well, sort of. Here we’ll explain what container queries are, how they work, and what other features they might come with once fully supported in browsers.
Microsoft itself estimates that 60 million people are using WHCM regularly. From this follows that it is important to test your own pages in Windows High Contrast Mode to check whether they are still readable and usable (or, for example, whether interactive controls are still recognizable as such).
Now, a not insignificant part of web developers use Macs (and I’m one of them). I usually have a cheap and age-worn Windows Laptop at hand to do just that, but have found a strategy for Windows High Contrast Mode testing that neither needs actual hardware nor financial investment of sorts.
Developing reliable, accessible, apps is really a whole-team effort, and something I’ve not written much about before is how I approach things when I’m not the one writing the code. This is by no means a complete guide to implementing or testing for accessibility, but hopefully it gives a general idea of things to think about when reviewing a Pull Request.
Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device.
This post will cover a range of topics: focus visibility, focus vs. source order, desktop zoom and reflow, sizing interactive targets, respecting color and contrast settings, and accessibility learning resources.
Together we’ll uncover how to build resilient, performant, accessible and beautiful structures that work with the grain of the materials of the World Wide Web.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share