A really common mistake that developers make is hiding content the wrong way. I’ve seen this in countless implementations of accordions, tabs, and other hidden content.
- Incorrect method to hide content: Using
height:0andoverflow:hiddenin CSS can visually hide content but not from assistive technologies. - Unexpected consequences: The overflow:hidden method can cause issues like page jumping, random scrolling, and content being read out by screen readers.
- Correct method to hide content: Using
display:nonein CSS is the correct way to hide content from both visual and assistive technologies. - Accessibility implications: Failing to use
display:nonecan lead to screen readers reading out hidden content and unpredictable focus states. - Visual vs. assistive technology: Content hidden from visual view using
height:0andoverflow:hiddenis still accessible to assistive technologies. - Best practice: Always use
display:noneto hide content for both visual and accessibility purposes.
Transcript
Gen
Hi, and welcome back to the Easy A11y Guide channel. In this video, I’m going to show you the wrong way and the correct way to hide content from the user for accessibility.
Gen
A lot of developers make this really common mistake, so here’s how to not do it. The first thing is we’re taking a look at our HTML, and I have a heading, and I have a div class, wrong, and a div class, correct.
Gen
Here we have an accordion with a button, and we have the div class, wrong way to hide content, and we have the second one, correct way to hide content. Here in the wrong way, we have what I’ve seen a lot of developers do. They set the CSS to height:0 and overflow:hidden. That is not what you want to do.
Gen
The reason is, while this visually hides the content, it doesn’t hide that content from any assistive technology. And this can result in some really unexpected consequences, such as the page literally jumping randomly up and down, and of course, all of the content being read out by a screen reader, even though you can’t see it.
Gen
The right way to hide content is just CSS, display:none.
Gen
Very straightforward. And here’s an example of how the screen reader handles this.
VoiceOver
Accordion wrong. Button level 2. Wrong way. Accordion Accordion, wrong. Button. Wrong way to hide content.
Gen
You’ll notice here that it read out, wrong way to hide content, even though that content is visually hidden from me. It also didn’t have any specific element to be able to grab and show for where the focus state was. So the focus state for the screen reader just went everywhere. Now, let’s take a look at the correct example.
VoiceOver
Heading level 2, correct way. Accordion, correct. Some content down here.
Gen
So you’ll see here in the correct one, it completely skipped the hidden text, as it should do. So remember, use display:none and don’t use height:0 overflow:hidden.