Альтернатива display: none

04.04.2007 css, usability, веб-стандарты

Довольно часто приходится скрывать некоторые элементы при создании сайта используя display: none. Screen reader'ы не отображают содержимое скрытых таким способом элементов. Поэтому предлагается более удобное решение в статье Accessible Display: None.

Смысл заключается в том, чтобы создав из inline элемента блок, задать ему нулевые размеры.

Пример CSS и XHML (Strict) кода, взятого с того же сайта для скрытия label:

<form method="get" action="#"
  id="search_form">
  <p>
    <label for="q">Search</label>
    <span>
      <input type="text" name="q" id="q" />
    </span>
    <input type="image"
    src="/img/search.gif" alt="Search" />
  </p>
</form>

#search_form label
{
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
}