K.I.S.S. ARIA

Last updated on November 14, 2025

Keep It Silly Simple

I sat down to review some code with my colleagues. It was clear that each of these solutions was heavily over-engineered. Each used custom web components, React, Angular, or other framework, and even basic HTML with aria added. All of them should get slimmed down and work to reduce or remove ARIA.

First Rule of ARIA, Do Not Use ARIA

When we build sites or more precisely frameworks to build sites, we need to use caution when implementing ARIA. No ARIA is better than bad ARIA.

If we consider HTML a street we all use, we can use this metaphor understand what ARIA is. Of course our HTML road isn’t perfect. In the first iteration, it was just a dirt road. As we progressed we moved to asphalt. Now we are driving on an eight lane super highway that is building itself as quickly as we drive. But something all roads have in common is wear and tear. The asphalt breaks down over time. Weather, mostly water, finds the weakness and expands it. Driving causes ruts. Holes make the road treacherous.

Yes, I mean potholes. ARIA is a medium of repair for those potholes in the HTML road. When used properly, we smooth the experience for many users, but primarily for the disabled. When used improperly, it makes the road worse, harder to navigate, and will break your car.

No ARIA is better than bad ARIA.

HTML provides a tremendous amount of information for all users. When you put a button element on your page, you will get these things for free:

• Tabindex set to 0 putting it in the tab order
• Announcement that it is a button
• The text inside the button will act as the accessible name
• The text is readable by all users
• All children are supposed to get the role of presentation (Although I have yet to see this implemented successfully. See this Codepen)

We can enhance the button depending on use with ARIA. We can apply aria-pressed to indicate which one of several segmented buttons is active. Or we can provide aria-expanded and create a disclosure.

If we use a framework that builds with <divs> and tries to make them buttons we need to add all the items above and the following:

• Role="Button"
• Aria-label or aria-labelledby because many buttons have icons only
• JavaScript looking for mouse and keyboard input (click and keydown)

A Comparison

Let’s grab the code that builds some React buttons. We’ll keep it simple and use the React Material Button.

Basic React Button Group

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

And this renders in HTML as:

<div class="MuiStack-root css-pl8gqh-MuiStack-root">
   <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1uent87-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">Text<span class="MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root"></span></button>
   <button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-74d805-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">Contained</button>
<button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-1blvszr-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">Outlined</button>
</div>

Basic HTML Button Group

<div role="group">
   <button class="testOnly">Text</button>
   <button>Contained</button>
   <button class="outlined">Outlined</button>
</div>

With just a little JS, we listen for Click, Space bar, and Enter. This calls the function, and we’re set. We can use our CSS classes to make the MUI work, or style on our own.

How do we move forward?

Your organization invested in a framework to develop your sites. This isn’t a problem. Your job as an accessibility professional is to make sure that:

• Is the ARIA correct for the control? If yes,
• Does the control function as expected? If yes,
• Can the ARIA and JS be slimmed down? If yes, do it.

Does your company not have a framework? Then push native HTML and only the needed ARIA to make it work. The goal is to make the code as simple as possible to make if function robustly. This often doesn’t need ARIA, so Keep It Silly Simple.

Have thoughts on this? Find me on LinkedIn and BlueSky to discuss!