CSS tip: hiding content with clip

WEB ACCESSABILITY

Hide things visually, but not from screen readers

There are times when you want to provide information to screen readers, but it doesn't fit into the visual design. We use this mostly for form labels that are not needed for the visual user, but still required for screen readers. However, keep in mind that you do not want to hide links or other focusable elements, as keyboard users will be confused.

In the past, most developers used a combination of absolute positioning and/or negative text-indent. This can cause problems when the page template is used in a language that is read right-to-left, for it will generate a horizontal scroll bar.

The following example uses the clip property to hide a form label. Please visit our articleClip your hidden content for better accessibility for more information.

Sample code for a form with hidden label


<form class="hiddenlabel" action=" <form method="get">
<label for="searchbox">Enter a search term </label>
<input id="searchbox" name="q">
<button>Search</button>
</form> 

.hiddenlabel label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

Sample form with hidden label

Enter a search term 




What you can do

• Use display:none if you want the content to be hidden from everyone.
• Use the clip pattern if you want to hide content visually but still make it available to screen readers.
• Do not hide links or other focusable elements with the clip pattern as this will confuse keyboard users when they tab to a hidden element.
• 
  




.element-invisible {

  position: absolute !important;

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

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

}







Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. clip работает только для абсолютно позиционированных элементов.




Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto | inherit

Значения

В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пикселы (px), em и др. Если край области нужно оставить без изменений, следует установить auto, положение остальных значений показано на рис. 1.