Why your "accessible" component might still be invisible to screen readers ? Here's something mos...Why your "accessible" component might still be invisible to screen readers ? Here's something mos...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
M.Abdullah's avatar
M.Abdullah Shah
• 1d
Why your "accessible" component might still be invisible to screen readers ?
Here's something most developers never learn until a client's audit comes back with failures on code that looks completely clean: DOM presence and accessibility-tree presence are not the same thing.
You can have perfect markup — semantic tags, ARIA attributes, all of it — and the browser will still quietly prune it out of what assistive technology actually sees. A few ways this happens:
display: none and visibility: hidden remove the node from the accessibility tree entirely, not just visually
aria-hidden="true" removes the element and everything nested inside it, no matter how clean that markup is
An element with no accessible name and a "generic" role can get flattened out by the browser's own tree-building algorithm — even though it's sitting right there in your Elements panel, looking fine
That last one trips people up the most. You fix the CSS, you re-test, and the element is still missing for screen reader users — because the CSS was never the problem.
The fastest way to see this for yourself: open Chrome DevTools, and put the Accessibility pane next to the Elements pane. The gap between "what's in the DOM" and "what's in the accessibility tree" becomes visible immediately. It's the single most useful habit I bring into any accessibility audit.
Relevant success criteria: 4.1.2 Name, Role, Value (A) · 1.3.1 Info and Relationships (A)
If you're shipping a product and want someone who actually digs into the accessibility tree instead of just running an automated scanner and calling it done — that's the kind of work I do. Happy to talk through where your app might have gaps like this.
wcagaccessiblitywebaccessibility
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started