Hidde gives an in-depth explanation of the Accessibility Object Model, coming soon to browsers near you:
In a way, that’s a bit like what Service Workers do for the network and Houdini for style: give developers control over something that was previously done only by the browser.
Tough, but fair.
A showcase of fun experiments with variable fonts, courtesy of Mandy.
Don’t write
fopenwhen you can writeopenFile. WritethrowValidationErrorand notthrowVE. Call that namefunctionand notfct. That’s German naming convention. Do this and your readers will appreciate it.
A very useful explanation of the ARIA attributes relating to state:
aria-expanded,hidden,aria-hidden, andaria-current.Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.
Heydon cracks me up—his Patterns Day is going to have you crying with laughter; guaranteed!
Here he is talking about custom properties in CSS as part of his Making Future Interfaces video series.
Like Eric, Ethan is feeling rightly glum about the state of accessibility on the web. But…
Right now, I’m trying to focus on this one question:
What’s one thing I wish I understood better about accessibility?
Eric is down about the current dismal state of accessibility on the web. Understandably so. It’s particularly worrying that the problem might be embedded into hiring practices:
Overwhelmingly, crushingly, we shove new developers towards learning JavaScript single page application frameworks (SPAs). While many of these frameworks pay lip service towards preserving accessibility, if you do your homework you find that the majority of them were built without assistive technology in mind.
But it’s not all doom and gloom. Eric also points to initiatives that could really help.
Still, this is a tough question to ask out loud:
What if we’re losing?
Ire takes a deep dive into implementing an accessible tool tip.
A good look at the (over)use of the aria-label attribute that confirms the first rule of ARIA.
I think Cathy might’ve buried the lede:
The knock on effect of this was removing media queries. As I moved towards some of the more modern features of CSS the need to target specific screen sizes with unique code was removed.
But on the topic of Sass, layout is now taken care of with CSS grid, variables are taken care of with CSS custom properties, and mixins for typography are taken care of with calc().
Personally, I’ve always found the most useful feature of Sass to simply be that you can have lots of separate Sass files that get combined into one CSS file—very handy for component libraries.
A terrific explanation of the aria-live attribute from Ire. If you’re doing anything with Ajax, this is vital knowledge.
I had to read through this twice, but I think I get it now (I’m not the sharpest knife in the drawer). Very useful if you’re doing theming in CSS.
Nick demonstrates the responsive power of variable fonts by recreating a lovely design from Jacob Jongert.
Grab that browser window and get squishin’!
Art, geometry, and code. Sol LeWitt started it. Rob saw it through.
This is very timely. I’ve been doing some consulting at a company where they are perhaps a little over-reliant on automated accessibility tests.
Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process.
In defence of the cascade (especially now that we’ve got CSS custom properties).
I think embracing CSS’s cascade can be a great way to encourage consistency and simplicity in UIs. Rather than every new component being a free for all, it trains both designers and developers to think in terms of aligning with and re-using what they already have.
Remember, every time you set a property in CSS you are in fact overriding something (even if it’s just the default user agent styles). In other words, CSS code is mostly expressing exceptions to a default design.
A handy bunch of checklists from Dave for creating accessible components. Each component gets a card that lists the expectations for interaction.
I encourage you to think about and make sure you are using the right elements at the right time. Sometimes I overthink this, but that’s because it’s that important to me - I want to make sure that the markup I use helps people understand the content, and doesn’t hinder them.