Accessibility
Top 5 web accessibility issues in 2024 (and how to fix them)
In 2024, Intopia’s consultants audited almost 200 websites, spanning not-for-profits to Fortune 500s. This included static sites to complex web applications across a range of sectors such as government, finance, health and tech. Across them all, we’ve collated the top 5 web accessibility issues that kept showing up again and again.
These issues aren’t just technical bugs. They’re real barriers for users who rely on screen readers, keyboard navigation or visual contrast to access information. The good news? They’re all fixable.
Please, can we have ARIA Notify
I’m delighted to see that there has been more chatter about implementing the ARIA Notify API. A small part of me, the part with an inflated sense of ego, is hoping that my frenzied complaints with fellow accessibility specialists has found its way into the right ears and that my griping has moved the needle.
This post is not going into all the details of implementing a live region, as I believe Sara Soueidan has written the seminal post on the subject already. If you click through to the post, you will find an extremely detailed breakdown on how to implement a live region in order to work consistently in as many assistive technology combinations as possible. Still, Sara’s final takeaway is worth noting. She writes:
Avoid live regions if you can...Live regions are inconsistent and unpreditcable. It’s easy for their implementations to go wrong.
How to Use ARIA Roles and Properties Effectively
Accessible Rich Internet Applications (ARIA) is one of the most powerful tools in a developer’s accessibility toolkit—but it’s also one of the most misunderstood. While ARIA can improve accessibility when used correctly, misuse can actually make things worse for users who rely on assistive technologies (AT), such as screen readers.
So, how do you use ARIA effectively? In this post, we’ll break down what ARIA is, when to use it (and when not to), and best practices for implementing ARIA roles and properties to improve web accessibility.
CSS
Making sense of starting-style
@starting-style is a CSS at-rule that allows you to create transitions for elements that are hidden by display:none.
It’s one of those things that seems simple on first glance, but turns out to be quite complex. The main reason is because we can’t DRY (Don’t Repeat Yourself) when using @starting-style — you have to specify certain styles twice.
A revisit of the Every Layout sidebar with :has() and selector performance
Heydon Pickering takes a fresh look the Every Layout Sidebar layout, 6 years on, to see if modern CSS selectors can improve it.
Setting Line Length in CSS (and Fitting Text to a Container)
It’s easier to set line length with CSS now than it was a few years ago. Now we have character units, clamp() and min() (and max() and calc() if you wanted to throw those in too), and wacky things that we can do with SVGs and CSS to fit text to a container. It does look like text-grow and text-shrink (or an equivalent solution) are what we truly need though, at least in some scenarios.
Using CSS Cascade Layers With Tailwind Utilities
Being the bad boy I am, I don't take Tailwind's default approach to cascade layers as the "best" one. Over a year experimenting with Tailwind and vanilla CSS, I've come across what I believe is a better solution.
Dynamic nth-child() using sibling-index() and if()
We can get the index of an element using sibling-index(), and we can express inline conditions using if(). With both features, we can implement :nth-child(An + B).
How to place images around a circle
Using offset combined with the new sibling-index() and sibling-count() functions, we can easily and precisely place images (or any elements) around a circle using a few lines of code.
Playing with the new caret CSS properties
This is a brief blog post about some experiments playing with the new caret-animation and caret-shape CSS properties.
HTML
Google: Many Top Sites Have Invalid HTML And Still Rank
Most top-ranking websites fail HTML validation. Google explains why perfect code isn’t required, and what matters instead.
“0.5% of the top 200 websites have valid HTML on their homepage. One site had valid HTML. That’s it.”
Two recurring sources of confusion, Core Web Vitals and JavaScript, were also addressed:
- The podcast hosts reiterated that good Core Web Vitals scores don’t guarantee better rankings.
- “If the content that you care about is showing up in the rendered HTML, you’ll be fine generally speaking.”
JavaScript
When can I use Temporal?
TC39 has had a Temporal API proposal in the works since 2017. It's currently at stage 3 (of 4). So this begs an obvious question... If Brendan Eich can invent all of JavaScript in 10 days, why has it taken eight years to replace the Date API?
Managing the State of Your Promises
Promise.all plus Promise.allSettled has given me more flexibility to track async state. Knowing that there is a method out there that will return the status of all promises has definitely been a great alternative to using some other complex state management tools.
A Better Promise.all()
Working with nested promises in TypeScript can be challenging. Here, I’ll introduce a set of utility types and functions that make deep promise handling more ergonomic and type-safe.
UX
The UX psychology glossary
A collection of psychological biases, design principles and UX concepts that affect the product experience.
Miscellaneous
Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
Shoelace was originally a play on words (as a subtle reference to “Boostrap”), but the irony now is that Web Awesome is a full replacement for Bootstrap. Or Tailwind or any other CSS framework for that matter.
You can literally just <p>Hello World</p> a brand new web project, drop Web Awesome in, and you have the building blocks for your entire UI. What makes this particularly compelling is you aren’t locked into an onerous build system or any significant frontend architectural decisions.
- Web Awesome works with static HTML.
- Web Awesome works with PHP.
- Web Awesome works with Ruby.
- Web Awesome works with Go.
- Web Awesome works with Python.
Are you getting it yet??
If you were to pick almost any other modern component framework, you would be required to settle on using React, or Vue, or Svelte, or Solid, or…you get the idea. Not the case here, because all of the CSS is…um…just CSS and all of the components are…um…just web components. Native web APIs across the board.