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

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

CSS Code

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

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:

Top


List of Components

Top

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

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce