Your .active Class Is Lying to Screen Readers
Using custom CSS classes like .active to indicate UI states creates accessibility barriers. Switching to native HTML attributes provides built-in support for assistive technologies.
Stock photo for illustration only, not from the actual event
- The .active class carries zero built-in semantics, making it invisible to screen readers.
- Standard HTML attributes are natively understood by browsers and assistive technologies.
- Use the inert attribute to remove modal background content from focus order and interaction.
- Use attributes for expressing states and classes for styling without semantic meaning.
If I had to guess the single most common code smell in front-end projects, it wouldn't be a missing semicolon or a messy folder structure — it would be relying on custom utility classes to track component states.
The fundamental issue is that a class like .active carries zero built-in meaning. The browser doesn't know it means this navigation item represents the current page, and a screen reader doesn't know it either. It is merely a string agreed upon privately within your CSS files—an agreement that shatters the moment someone renames the class, forgets to update the JavaScript toggle, or introduces a component unaware of the convention.
Stock photo for illustration only, not from the actual event
HTML attributes do not suffer from this vulnerability. They are standardized, extensively documented, supported natively by modern browsers, and fully recognized by assistive technologies. Leveraging them isn't merely a stylistic preference; it offloads core responsibilities to the web platform rather than forcing developers to reinvent accessibility logic on every project.
Here are several native attributes that should be replacing your state-tracking classes:
- The inert attribute removes an entire subtree from interaction and focus order in one go, ideal for modal backgrounds or closed off-canvas menus.
- The aria-selected attribute accurately signals active tabs to the accessibility tree, replacing the guesswork of custom classes.
- The aria-invalid="true" attribute applies validation styling while prompting screen readers to announce that a field requires user attention.
Transitioning from custom CSS classes to native HTML attributes for state management is a cornerstone of modern Web Accessibility (a11y) practices. Because digital platforms are accessed through diverse assistive devices, relying on semantic markup ensures that developers build resilient applications while dramatically reducing long-term maintenance debt across large codebases.
It is tempting to dismiss this architectural shift as a nice-to-have optimization. However, establishing a clear rule of thumb helps clarify the boundary: if you are expressing a state, reach for an attribute first; if you are styling appearance without semantic meaning, a class remains entirely appropriate.
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment