Accessible Techniques for Hiding Content
There are many ways to hide content, but different use cases demand different approaches. A new accessible hidden content tests page with various techniques is an attempt to help.
When building frontend stuff, a common challenge is finding responsible ways to hide content without alienating any audience segment.
There are a series of scenarios that need to be considered:
- How do I hide content from everyone?
- How do I hide content from “sighted” visitors only?
- How do I hide content from those on assistive devices only?
- How do I responsibly provide image replacement text?
Most of these can be solved with CSS, although not without some hacks. ARIA can also help. Naturally, this conversation revolves around accessibility best practices.
I’ve compiled six techniques — with code examples, comments and references — on an accessible hidden content tests page.
They’re not complicated examples, and I have tested them on iOS, Mac OSX 10.6, and NVDA on Windows. I have tried multiple times to install WindowEyes for further testing, but it simply will not work on either of my PCs. If anyone wants to volunteer their testing abilities, I’d be obliged.
Actually, I’ll take any feedback. This can be a solid reference for all developers if vetted properly.