Альтернатива 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; }