When you’re hiding content—whether to provide additional context to one user group or hide blocks of content from users—you need to make sure that it’s actually hidden. This week’s Best Practice of the Week focuses on different ways you can hide content.
Some people think that hiding content is just for screen-reader users. And if you were to hide content the wrong way, it might not actually be hidden, which impacts many different groups of users with disabilities. So it’s important to consider what type of content is being hidden, who’s going to benefit from it, and why it’s being hidden.
Low-vision users can be affected if your content were to be hidden off-left—but not far enough. For instance, let’s suppose you were to hide a block of text content using left:-100px;. If a low-vision user were to increase the font size in their browser, that content would become visible. And it would probably also overlap other content on the page.
It’s not uncommon to hide shortcuts off-screen for screen-reader users. For example, you might use a hidden link to allow non-visual users to skip straight to the main content. But if those links are visually hidden, it can be confusing for visual keyboard users when they encounter mystery tab stops. It’s not just that the visible focus would be lost, but they’d be left with no clue as to what those links might do even though they might be quite useful to them.
Some people try to use visibility:hidden; within their CSS, but that isn’t universally supported among screen readers. For instance, the screen reader Window Eyes doesn’t support that CSS property. And on Android devices, TalkBack also reads content styled with visibility:hidden;.
When you use ARIA to hide content, keep in mind that many users of assistive technology don’t always have the latest versions of software. They may be using older screen readers that ignore properties like aria-hidden.
If you want to hide content from everyone, the best method is to use display:none; because that really does hide it from everyone—screen-reader users included.
When you want to hide content from all but screen-reader users, use this:
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute;
}
You can use that CSS to provide text alternatives for visual styling that conveys meaning—such as a current-page indicator within a secondary-navigation menu.
Some content that you may be tempted to hide from non-visual users may actually be useful if it were exposed to other user groups too. If you have a chart with a hidden-text equivalent, that information can be useful to users with low vision. Low-vision users who rely on screen magnification might not be able to view the entire chart or graphic at once. Users with cognitive disabilities might also find a text summary useful to help understand the chart.
Hiding content isn’t always the best option for everyone. More isn’t always better. It’s easy to create a lot of repetitive, hidden content that slows down and frustrates users. User testing is a great way to find that balance.
The post BPOW: Something to hide appeared first on Simply Accessible.
