The Best Of The Internets

I’m living this super deep dive into the UX of the quantity field in e-commerce.

How did I miss this? The gov.uk Service Manual recommends progressive enhancement for all their websites.

Using progressive enhancement means your users will be able to do what they need to do if any part of the stack fails. Building your service using progressive enhancement will:

• make your service more resilient
• mean your service’s most basic functionality will work and meet the core needs of the user
• improve accessibility by encouraging best practices like writing semantic markup
• help users with device or connectivity limitations to use your service

🥰

A clear and focused walkthrough of how to get started with performance budgets and then how to ramp up.

Five years old, but still incredibly relevant: An overview of common mistakes people make with ARIA, and how to fix them.

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.