Должны ли мы стилизовать тег fieldset как скрытый для обеспечения доступности? - PullRequest
Новая
       25

Должны ли мы стилизовать тег fieldset как скрытый для обеспечения доступности?

1 голос
/ 01 декабря 2019

Из того, что я прочитал в этом посте SO , основные цели тега fieldset не состоят в том, чтобы логически группировать другие метки и входные данные семантически и стилизовать их.

Если я наденуне хочу стилизацию, но хочу семантическое значение, я должен просто скрыть это? или не использовать его вообще?

1 Ответ

1 голос
/ 01 декабря 2019

Если ваш дизайн все еще визуально правильный (то есть фокус отображается правильно, расположение имеет смысл, логический порядок табуляции и т. Д.), Тогда вы можете использовать fieldset и скрывать его визуально (вы не можете использовать визуально скрытый класс наfieldset сам как бы скрывал все).

Чтобы использовать его правильно, вам нужно добавить legend, объясняющий, что такое fieldset.

A fieldset и legend могут повысить удобство использования для пользователя программы чтения с экрана (и помогают Google понять вашу форму, что является небольшим бонусом для SEO), поэтому вам обязательно следует включить ее в форму, если она семантически уместна.

Чтобы удалить стиль, удалите границу fieldset, а затем добавьте класс visually-hidden css к легенде.

Я собрал быстрый фрагмент, чтобы показать вам, какЯ бы настроил его без какого-либо визуального оформления.

Группа будет читать: «Отфильтровать нашу работу» и параметр, выбранный программой чтения с экрана. 

fieldset{
  border: none;
}
.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
<fieldset>
    <legend class="visually-hidden">filter our work by</legend>
    <input type="radio" name="filter" id="webdesign">
    <label for="webdesign">web design</label>
    <input type="radio" name="filter" id="graphicdesign">
    <label for="graphicdesign">graphic design</label>
    <input type="radio" name="filter" id="signage">
    <label for="signage">Signage Production</label>
</fieldset>
...