Accessibility

You don’t necessarily have to do focus handling yourself with shadow DOM web components. For simple wrapper components, there is an easier (and better) way.

Josh Tumath: Have you ever noticed that when you increase the system text size in your iOS or Android phone’s accessibility settings, the text gets bigger everywhere except on the web? On Safari and Chrome, it makes absolutely no difference. New thing: <meta name=text-scale>  This isn’t page zoom, which scales everything, it’s just respects the […]

Will Mendes has a bit of CSS to highlight accessibility issues on HTML elements. Things like missing alt text and labels that aren’t linked properly to inputs. If you want to try it out quick on a website, I wrapped it in a little injection JavaScript so you could paste it in the console wherever. […]

Jeremy Keith: We shouldn’t rely on colour alone to indicate that something is interactive. Then goes on to show how links should be underlined, but that the default underline can be a little intense, and essentially shows how to chill them out. Exactly like we showed! I still think it’s a great balance.

When I first looked at the new color contract function in CSS, the words were reversed, so that’s notable. It’s contrast-color() now, and starting it’s life in Safari Technology Preview. Now it only takes one argument, a color, and you get back either black or white (rather than providing your own color choices). Once this […]

Dries Buytaert: I have 10,000 photos on my website. About 9,000 have no alt-text. I’m not proud of that, and it has bothered me for a long time. Going back and hand-writing alt for 9,000 images isn’t a job that most of us can fit into our lives and I empathize. Are computers up for the task finally? […]

What is a good contrast text color on a black background? White. What about on a white background? Black. What about on #f06d06? Less clear. Devon Govett posted a good trick to having CSS pick for you, which works across browsers today. Lea Verou has a much deeper dive. There is supposed to be a […]

Ahmad Shadeed on CSS display: contents; — a feature that makes the DOM pretend that element just isn’t there (but it’s children are). Anything you use it for requires specific accessibility testing, but it can be quite useful. There are lots of use-cases here many of which boil down to “sometimes I want all these […]

It’s not that modals are all automatically bad, it’s that, as Adrian Egger says, “modals are the crutch of the inarticulate design and developer” and they “are easily replaced with other patterns that are less jarring.” on the dedicated site for this crusade: modalzmodalzmodalz.com. Adrian’s personal site is sweet, too.

Zooming in browsers is an accessibility feature. I’d say that any attempt to fight against it is bad form. Don’t do it. Leave it be. I have seen compelling examples of ways to code that work with browser zoom that help make a site look nicer when high levels of zoom are applied. But they […]