Press enter or click to view image in full size
3 min read
Sep 2, 2026
The Angular team has called Angular Aria a set of customizable, fully accessible UI patterns. This is a strong claim, but in practice, how possible is it to heavily customize the components while maintaining accessibility features such as keyboard navigation and focus management?
In this post, we’re going to use Google Antigravity to put that claim to the test by updating a tab UI from generic styles to a neumorphism-based design.
Motivation
In the angular.dev documentation, the team has examples with a set of basic, Material Design-based, and retro styles meant to show developers what’s possible with these new accessibility patterns.
Here’s the challenge: take the tabs basic styles example further by implementing the following neumorphism-inspired design.
Here’s a look at the UI before any changes:
Press enter or click to view image in full size
The Lighthouse accessibility report shows a 100 score before making any changes:
Press enter or click to view image in full size
Neumorphic designs are typically criticized for their poor accessibility. This experiment is designed to push the coding agent with complex CSS styles while stress-testing the customizability of Angular Aria tabs. Additionally, I’ll ask the agent to update any accessibility issues that come up.
Making the changes
The styles for this UI are well organized, but require a lot of changes to achieve something like a neumorphic design. Instead of writing them by hand, Google Antigravity’s coding agent can make the changes.
Get Angular’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
Here’s the prompt:
A few things to note here:
- This example used a reference image for inspiration (@example-ui.jpeg) to inform the designs.
- This example also uses the /goal command in Google Antigravity instructs the agent to work a task to completion without asking the user for immediate input.
The Result
Here’s the resulting UI based on the prompt:
Press enter or click to view image in full size
In this example, the agent made a slight modification to the HTML structure, adding a wrapper to the structure, but it leveraged the Angular Aria tabs pattern. I ran this same application through Lighthouse again receiving a 95 accessibility score, the background and foreground contrast ratio is not sufficient.
Press enter or click to view image in full size
I can prompt the agent again to fix this issue:
The resulting UI has improved contrast which is better for users.
Press enter or click to view image in full size
The coding agent fixed the contrast issues. It also generated a helpful report highlighting the improved ratios in the application:
Press enter or click to view image in full size
Now the application has a 100 accessibility score.
Build your next great app
Using Google Antigravity and the fantastic new Angular Aria APIs allow developers to build accessible applications serving all types of users. This is just one example — there are nearly a dozen implemented accessibility patterns with Angular Aria.
Be sure to download the latest versions of Angular and Google Antigravity to build your next great app today.
Additional Resources
- Latest Angular Release
- Find out more about Google Antigravity CLI
- Learn more about Angular Aria