Google I/O’s AI push had an accessibility lesson
Video transcript
This year's Google IO conference had a theme.
But with the agentic theme came plenty of details about accessibility across Google's ecosystem with updates for Angular, the web, and of course agents. Let's dive in.
For Angular developers, version 22 introduces Angular Aria, a set of customisable UI directives and patterns for building accessible rich controls. Now, if you've ever worked on area component development, you know it's hard.
Controls that look simple have detailed accessibility behavior that needs coding in just the right way. Angular Aria gives Angular developers a stronger starting point.
The complex interaction behavior is built into the pattern, but you're not giving up everything to the pattern. You do have control over how the component looks and fits into your design system.
There are currently 11 patterns available with more being worked on. And that same idea of using the platform better showed up again with select controls. They finally got their time to shine. Whilst discussing the AI vibe coding tool stitch, Google introduced the new CSS declaration appearance and base select value.
For years, if you wanted to style a select control, you usually had to reach for JavaScript or use an external library.
But once you did that, you began to lose the native semantics and keyboard behavior that come with a select element. appearance : base-select is a better option. It lets the browser step back from applying its own default look and feel and gives you more control over how the select is styled.
So instead of rebuilding a select from scratch, you keep the native select element, keep the built-in behavior and semantics and have far more control over the visual design. The caveat though is browser support.
This is still something to treat as progressive enhancement, especially where support outside Chromium based browsers is limited and letting the browser do more of the accessibility continued with color and text preferences with the introduction of several new color APIs.
Color-contrast() is a CSS function that takes a background color and returns either black or white depending on which has the stronger contrast against that color. It's a useful technique where the background color might change and you want to maintain a good contrast, but it still needs care.
Whilst it helps with contrast, it's not a replacement for actually checking whether your design is readable.
Another function is light-dark(), which lets you define a light value and a dark value in the same CSS declaration. The browser then chooses which one to use based on the current OS color scheme.
And then there's text-scale, a new meta value that lets a site better respect the user's system text size preferences. From Google's research, around 36% of Android users and 38% of iOS users change their system font size from the default. With text-scale, pages that use relative text sizes can scale more consistently in line with the users operating system text size.
So instead of treating text size as purely a design decision, the browser gets a better way to honor what the user has already chosen. And the elephant in the room, of course, AI agents. There was a bold statement that for the last 30 years, we've built websites for people.
Now websites also need to be understandable to AI agents. The theory being a website that works well with a screen reader already has some of the structure agents need. Clear structure and semantic HTML and a reliable accessibility tree all help describe what the page is and how it works.
For agents, this can act like a map. But the framing here matters. Accessibility shouldn't be valued because it makes websites easier for agents. It's valuable because it makes websites work for people. The agent benefit is just a side effect of building the web properly.
But for all the talk of AI assisted coding, agents often fall back on older examples. They recommend legacy approaches because that's what their training data is. Newer web platform features may be missing or treated cautiously because the model doesn't know how well they are supported.
And this is where modern-web-guidance from Google is trying to address that. It gives AI coding agents evergreen expert vetted guidance across common web development use cases.
That's right. It's yet another skill to add into your agents prompt. In theory, it means the agent can suggest more modern accessible approaches, including newer platform features and fallbacks rather than defaulting to older JavaScript heavy solutions. The accessibility side is still limited, but the direction is interesting.
It recognises that AI coding tools need better guidance, not just more prompting. So despite all the talk of agents, the lesson is still very human. Build following good principles, clear structure, use semantic elements, and respect user preferences.
Accessible websites don't just work better for agents, they work better for people, and that's always the point. Agents might be the new theme, especially in this year's IO conference, but people are still the reason accessibility matters.
Until next time, I'm Ross from CANAXESS. Bye for now.