You are here

Home » API reference » A11y titles 6

a11y-titles.css in A11y titles 6 

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user. Must
 * not be used for focusable elements (such as links and form elements) as this
 * causes issues for keyboard only or voice recognition users. "!important" is
 * used to prevent unintentional overrides.
 */
.block.title-element-invisible h2.title {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

File

a11y-titles.css
View source 
  1. /**

  2.  * Hide elements visually, but keep them available for screen-readers.

  3.  *

  4.  * Used for information required for screen-reader users to understand and use

  5.  * the site where visual display is undesirable. Information provided in this

  6.  * manner should be kept concise, to avoid unnecessary burden on the user. Must

  7.  * not be used for focusable elements (such as links and form elements) as this

  8.  * causes issues for keyboard only or voice recognition users. "!important" is

  9.  * used to prevent unintentional overrides.

  10.  */

  11. .block.title-element-invisible h2.title {

  12.   position: absolute !important;

  13.   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

  14.   clip: rect(1px, 1px, 1px, 1px);

  15. }