Dispatches From The Internets

I talk a lot about the default behaviors of HTML buttons, but don’t tend to get into the weeds when it comes to keyboard interactions. Grab a machete and head on over to Adrian’s blog because he’s ready to take you there.

Excellent advice here:

[N]ext time you’re designing a new interface paradigm or chatting with an engineer, ask yourself about the risks involved in the known versus the unknown with the following questions.

• Does the new design use intuitive patterns that prioritize consistency?
• Are you in any way disregarding accessibility practices in favor of a feature or a visual direction?
• How tech-savvy are your users and can the newly-introduced experience be easily adopted by current and future, more-diverse audiences?
• Can and will your design decisions be validated through properly conducted user research and user testing?

Being mindful of these practices will help you guide decisions and ensure you don’t change things just because you can.

Some nice examples of how to use :has() in this one:

• parent selector
• combining with :not()
• changing an li when hovering/focusing inside
• styling forms based on validation state
• adjusting table display based on row count

Cool to see more efficient range-based media queries are beginning to roll out.

The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:

• < evaluates if a value is less than another value
• > evaluates if a value is greater than another value
• = evaluates if a value is equal to another value
• <= evaluates if a value is less than or equal to another value
• >= evaluates if a value is greater than or equal to another value

🤞🏻 we get them in Safari soon!

A good overview of “roles” in the accessibility context, including both why and how to use them. It includes lots of e-commerce examples too.

[E]nsuring all components are marked up with the proper “Roles” is not only key to identifying the purpose of site components to users using assistive technologies, but also is an important step toward making an accessibility-compliant e-commerce site.

I got really excited about aural style sheets back in the day, only to have my hopes dashed when I discovered no one supported them. Then came ReadSpeaker (and its ilk), which started to move in that direction, but the solutions are far from perfect.

I even tinkered a bit with the Speech Synthesis API to achieve something akin to a functional listening experience for this blog. Would love to go back to doing it in CSS though. I hope this happens!

Curious to know what’s going on with Progressive Web Apps in 2022? The 2022 edition of the Web Almanac is out, with an excellent chapter on PWAs by Diego Gonzalez and Beth Pan.