KAWWA Markup Pattern Library

Site Utilities

No Display Content Component Information

  • Class name: (k-no-display)
  • Version: 1.0

Add to list

The "no display" component is a hidden HTML element (that's why there's nothing to see in the demo below) that's still readable by screen readers or parsed by document outliners.

While the k-skip component contains a link that allows screen reader and keyboard users to jump navigation, this component should be used to hide text - not links - that are visually redundant in the context where it is found. For example, in a tab section, the section header is needed to keep the logical structure of the document but, at the same time, it's value will be the same as the tab title, causing visual redundancy. In this case, you can hide the section header from display while allowing it to be accessible by assistive technologies that may need this information.

HTML5 Plain Code

  1. <h3 class="k-no-display">Tab Title</h3>

CSS Code

  1. .k-no-display {
  2. 	position: absolute;
  3. 	overflow: hidden;
  4. 	left: -10000px;
  5. 	top: auto;
  6. 	width: 1px;
  7. 	height: 1px;
  8. }

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:


List of Components


jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature





Site Utilities