Accessible Hidden Content Tests

An array of techniques for hiding content from standard browsers, screen readers, and other assistive devices. Focus on accessibility and CSS best practices. Subject to change. Questions or concerns? Please leave a comment on the original blog post.

User Agent String: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

Test Case #1: display: none Test Case #2: visibility: hidden Test Case #3: opacity: 0 Test Case #4: Jon Snook's "Hide Visually" Test Case #5: aria-hidden Test Case #6: Hide Text / Image Replacement Technique

Test Case #1: display: none

Case 1 content. When enabled, you should not be able to see me, tab to me, or in any way interact with me.

Toggle Test Case #1 Currently: Enabled

Solution and Expected Result:
display: none is applied to an element. The element is hidden entirely, both visually and from assistive technologies.
Test Results:
  • iOS 6.1 VoiceOver - Pass
  • Mac OSX 10.6 VoiceOver - Pass
  • NVDA - Pass

Test Case #2: visibility: hidden

Case 2 content. When enabled, you should not be able to see my contents, tab to me, or in any way interact with me. My physical space should be retained.

Toggle Test Case #2 Currently: Enabled

Solution and Expected Result:
visibility: hidden is applied to an element. The element is turned invible in a browser, but retains its physical space. The element and its contents are hidden from assistive technologies.
Test Results:
  • iOS 6.1 VoiceOver - Pass
  • Mac OSX 10.6 VoiceOver - Pass
  • NVDA - Pass

Test Case #3: opacity: 0

Case 3 content. When enabled, you should not be able to see me, but you can still tab to me and access my contents.

Toggle Test Case #3 Currently: Enabled

Solution and Expected Result:
opacity: 0 is applied to an element. The element is turned invisible in a browser but (usually) retains its physical space. Its contents are not hidden from assistive technologies.
Test Results:
  • iOS 6.1 VoiceOver - Pass
  • Mac OSX 10.6 VoiceOver - Pass
  • NVDA - Pass

Test Case #4: Jon Snook's "Hide Visually"

Case 4 content. When enabled, you should not be able to see me, but should should be able to tab to me and access me through a screen reader or similar device.

Toggle Test Case #4 Currently: Enabled

Solution and Expected Result:

An element is given a combination of CSS attributes that attempt to hide it visually but keep it accessible to screen readers. CSS developed by Jon Snook and Yahoo.

Applicable CSS:

.hide-visually {
	position: absolute !important; 
	height: 1px; 
	width: 1px; 
	overflow: hidden; 
	clip: rect(1px 1px 1px 1px); 
	clip: rect(1px, 1px, 1px, 1px);
	}
Test Results:
  • iOS 6.1 VoiceOver - Pass
  • Mac OSX 10.6 VoiceOver - Pass
  • NVDA - Pass

Test Case #5: aria-hidden

Toggle Test Case #5 Currently: Enabled

Solution and Expected Result:
An element is given an attribute of aria-hidden="true". More information from The Paciello Group.
Test Results:
  • iOS 6.1 VoiceOver - Pass
  • Mac OSX 10.6 VoiceOver - Pass
  • NVDA - Fail (Reads content.)

Test Case #6: Hide Text / Image Replacement Technique

Case 6 content. When enabled, you should not be able to see the text inside me, but should should be able to tab to a link and access my text through a screen reader or similar device.

Toggle Test Case #6 Currently: Enabled

Solution and Expected Result:

An element is given a combination of CSS attributes that attempt to hide the text inside the element while keeping the element itself visible. Most useful for image replacement techniques, or for providing alternate descriptions for other inaccessible media. The text should be accessible to screen readers.

Applicable CSS:

.hide-text { /* newer */
	text-indent: -300%; 
	white-space: nowrap; 
	overflow: hidden;
	}

Note the use of the negative value on the percentage. The original method used a positive percentage that causes the text to appear if a nested anchor tag is focused on via tabbing.

More about image replacement stuff at CSS-101.org.

Test Results:
  • iOS 6.1 VoiceOver - Pass
  • Mac OSX 10.6 VoiceOver - Pass
  • NVDA - Pass