Your .active Class Is Lying to Screen Readers

Every developer has encountered the habit of using CSS classes like .hidden, .disabled, .active, and .loading to control the behavior of HTML elements. However, these classes are actually solving problems that the browser has already solved with native HTML attributes. These classes are often reached for out of habit, as they feel more familiar and personal to developers. This article explores how replacing these CSS classes with their native counterparts can improve code quality, accessibility, and maintainability.

Using native HTML attributes like hidden, required, disabled, inert, role=switch, aria-current, aria-selected, aria-busy, and aria-invalid can provide more meaningful and consistent behavior across the web. These attributes are standardized, documented, and understood by both browsers and assistive technologies like screen readers. This means that using them eliminates the risk of overriding styles due to specificity issues or forgetting to update JavaScript code that toggles classes.

For example, using the hidden attribute instead of .hidden ensures that the element is not only visually hidden but also removed from the accessibility tree, preventing screen readers from announcing it. Similarly, using the disabled attribute on form controls or buttons automatically blocks user interaction, announces the disabled state to screen readers, and maintains proper focus order.

The inert attribute can be used to disable entire regions of a page, such as a modal window or off-canvas menu, while still allowing other parts of the page to remain interactive.

Role attributes like role=switch and aria-current=page provide clear semantic meaning to assistive technologies, conveying the intended purpose and state of elements. This is particularly important for components like navigation menus and tab interfaces, where aria-selected= true should be used to accurately represent the currently active tab. The aria-busy attribute can be used to indicate that a section of content is currently loading or updating, preventing screen readers from announcing stale content.

By adopting these native HTML attributes, developers can reduce the amount of custom CSS and JavaScript needed to achieve accessibility, making code more maintainable and less prone to errors. Additionally, using attribute selectors ([hidden], [disabled], [aria-current], etc.) offers the same specificity as class selectors, so there is no loss of styling power.

This approach also benefits SEO and development tools, as native attributes are recognized by search engines, linters, and browser developer tools. Overall, making the switch from custom CSS classes to native HTML attributes can significantly enhance the accessibility, reliability, and efficiency of web development projects.