мы решили использовать таблицы для компоновки веб-форм: (как) мы можем сделать их действительными/доступными?
Мы создаем сайт с десятками очень сложных форм, и мы решили, что лучшее решение для нас - сделать их с помощью <table>
Но мы беспокоимся о доступности и стандартах.
Я думаю, что форма может быть полностью доступной и соответствовать стандартам, если она сделана надлежащим образом
Например:
<table>
<tr>
<th rowspan="2">Your informations</th>
<th><label for="name">Name</label></th>
<td><input id="name"></td>
</tr>
<tr>
<th><label for="surname">Surname</label></th>
<td><input id="surname"></td>
</tr>
</table>
Для меня это совершенно правильная форма и к тому же доступная. но я могу ошибаться. я?
Что должно я знаю, куда нужно направить мое внимание, чтобы сделать доступные формы/стандарты действительными в настоящее время?
Меня также интересует перспектива seo.
P.s. наши таблицы не являются простыми таблицами, мы часто используем диапазон строк, colspan, Но структура (значения столбцов и строк, заголовки и т. Д. Идеально подходят)
3 answers
Доступность в целом может варьироваться в зависимости от того, какой тип HTML-документа, т.е.:
- XHTML 1.0 Переходный
- HTML 4.01 Переходный
- HTML5
Это связано с тем, что W3C имеет множество атрибутов доступности, устаревших в HTML5, поэтому ваше первое решение должно заключаться в том, какой тип документа вы собираетесь поддерживать. Доступность - не самая сильная моя область, и мне не нужно ее обслуживать, но я решил попробовать, и я использовал HTML5 и использовал методы HTML W3C для руководства по доступности веб-контента 1.0, которое вы должны использовать, если доступность важна для вашего веб-дизайна.
В любом случае, переход на HTML5 с хорошей доступностью с использованием таблиц будет выглядеть примерно так:
<table>
<CAPTION>Please Input Your information</CAPTION>
<tr>
<th><label for="firstname" accesskey="n">Name</label></th>
<td><input id="firstname" tabindex="1"></td>
</tr>
<tr>
<th><label for="surname" >Surname</label></th>
<td><input id="surname" tabindex="2"></td>
</tr>
</table>
В основном вам нужно убедиться, что все описано хорошо, как вы знаете, поле заголовка хорошо работает с синтезаторами речи, и оно должно точно указывать, что такое таблица.. Ваша информация довольно обширна, и вы должны как можно лучше описать свою таблицу следующим образом важно для пользователей с ограниченными возможностями, поэтому в этом примере "Пожалуйста, введите свою информацию" является хорошим описанием, так как он запрашивает информацию, кроме того, вы можете добавить где-нибудь на странице, почему вам требуется эта информация для еще лучшего доступа.
tabindex задает порядок вкладок, слепые люди и другие пользователи с ограниченными возможностями будут очень часто использовать вкладку как отличный ключ для навигации.
accesskey задает точку фокусировки на таблице, поэтому в этом случае нажатие N сфокусирует стол.
В HTML4 вы можете использовать такие вещи, как ABBR, какие синтезаторы речи будут считываться поверх меток в качестве предпочтительного метода, по неизвестным причинам я не уверен, почему это было удалено в HTML5, но тем не менее HTML5 не проходит проверку при его использовании.
Другое полезное поле, с которым я столкнулся, - это <table summary="I am a input table for user information">, которое снова устарело в версии HTML5, что опять-таки не совсем понятно, почему, потому что кажется довольно полезным добавлять дополнительную информацию, может быть, W3C хочет, чтобы заголовок использовался чаще, может быть, кто-то на это может ответить кто-то другой.
Настоятельно рекомендуется не использовать таблицу для компоновки.
Но, допустим, вы все еще хотите использовать таблицу для компоновки и быть доступным для нее, вы должны:
- НЕ использовать тег
<caption> - НЕ использовать
<th> - Если вы используете HTML5, не используйте атрибут summary, потому что он устарел
Это связано с критерием успеха 1.3.1, и чтобы соответствовать требованиям, вы должны избегать распространенных сбоев. Особенно распространенный сбой номер 46. Вы не соответствуете требованиям, если используете распространенный сбой.
Использование CSS для презентации считается консультативным методом (это означает, что он улучшает существующую доступность). Основная причина, по которой этого недостаточно, заключается в том, что вспомогательная технология полностью игнорирует таблицы стилей для отображения контента. И это действительно, действительно хорошая вещь.
Я могу гарантировать, даже не глядя на всю форму, что она не соответствует 508 или WCAG.
Также, если вы думаете, что с точки зрения пользователя программы чтения с экрана ваша форма будет звучать как
Таблица с 2 столбцами и 2 строками. Введите свою информацию. Строка 1 Столбец 1 Столбец имени 2 редактировать Строку 2 Столбец 1 Столбец фамилии 2 редактировать
Это только для 2 полей в действительно простой таблице. Если вы добавите диапазон строк, ваша таблица может фактически вызвать еще один сбой (FR49).
Вам определенно следует избегать этой техники.
ПС. Что касается SEO, то разметка на самом деле не важно, но Некоторое время назад Google объявил , что скорость страницы повлияет на ваш рейтинг, а таблицы определенно утяжелят ваш HTML.
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" /></td>
</tr>
Значительно дольше как для кода, так и для загрузки, чем
<label class="cssClass" for="name">Name:
<input type="text" name="name" id="name" />
</label>
Использование CSS для макета определенно предпочтительнее, чем использование разметки таблицы HTML для макета. В тех случаях, когда потребуется много усилий для преобразования существующих таблиц компоновки в CSS, альтернативный метод заключается в том, чтобы придать таблице компоновки роль ARIA для представления.
Роль презентации ARIA сообщает агентам пользователей, что этот элемент является презентационным и его можно безопасно игнорировать.