I reckon the problem is that the accessibility of a website can be invisibly and silently broken.
So, here’s an idea: what if our text editors caught accessibility issues and showed them to us during development?
For the past six months or so I’ve been saving URLs to various React articles and videos that I’ve started to use to deepen my understanding of the concepts that drive the library. I thought putting them all together like this in a single article will be beneficial not only for my own future reference, but for others that hope to master React and any library that resembles it.
TL;DR: for standard HTML controls and standard ARIA patterns (widgets), you do not need to add instructions for screen readers on how to use them nor what they are.
When a screen reader encounters an element on the page that invites interaction beyond reading, it typically provides users with instructions how to consume or interact with it. As users get more familiar with the tools, they can skip some of those instructions or disable them altogether.
Wouldn’t it be nice to work with a lower level of abstraction instead? What if we can tell the browser we are targeting the side before/after an element instead of referring to the physical directions left/right? CSS has what is called logical properties. We can now tell the browser what we actually mean. Instead of using -left and -right, we can use -inline-start and -inline-end:
Card layouts are popular on the web, rows and columns of boxes with similar content. CSS grids can help align those cards, but it can still be hard to line-up content inside the cards: headers and footers that might need more or less room. That’s why we need “subgrid” – coming in Firefox 71 and available now in Firefox Nightly. This is a great opportunity to quickly enhance our designs for modern browsers, without losing anything in the browsers without subgrid support. I’ll show you how!
Ever since responsive web design started, we’ve had a problem with the way images load on the web. Now, Firefox is fixing the problem. Add width & height attributes to all your images, and see load jankiness disappear. Jen Simmons explains how.