I'm modernizing a large, mostly static Django and Bootstrap site with a significant amount of legacy JavaScript and markup. I've been replacing jQuery with small vanilla JavaScript helpers, removing inline event handlers, using buttons instead of non-navigational links, and adding accessible labels and roles where appropriate.
For dynamic content, the site still sometimes uses inline style="display: none". I'm considering standardizing on Bootstrap's d-none class instead. When an element is hidden with display: none, should I also set aria-hidden="true"? Could doing so cause unexpected behavior, especially if CSS is overridden or disabled? Conversely, could relying only on d-none create problems for screen reader users?
Typical examples include expanding a detailed information panel from a brief summary, or toggling between multiple textual representations of the same content. I already have show() and hide() helper functions, so keeping multiple states synchronized is straightforward. I'd also appreciate current recommendations and practical resources for accessible web development.
1 Answer
A user stylesheet that overrides your hiding rule is an edge case, but it is still worth designing the component around its semantic state rather than only its appearance. The hidden attribute can express that state, though implementations and overriding CSS have historically made it less foolproof than people assume. For a component library, consistent helper functions that toggle the visual state, accessibility state, focus behavior, and related button attributes are more valuable than adding aria-hidden everywhere.
For testing, combine keyboard-only checks, browser accessibility-tree inspection, and automated tools such as axe DevTools. Automated testing will catch common issues, but it will not replace testing the actual interaction flow with at least one screen reader and checking focus movement.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads