Соответствие WCAG 2: ‹table› против ‹div› для макета

Вопреки распространенному мнению, WCAG 2.0 не запрещает использование таблиц для разметки. Он косвенно принимает это, устанавливая правила о том, что не следует делать при использовании таблиц для макета, например. используя элементы th (которые обычно указывают на табличные данные), например. в F46: Невыполнение критерия успеха 1.3.1 из-за использования элементов th, элементов заголовка, или непустые сводные атрибуты в таблицах макетов.

Таким образом, использование макетной таблицы не нарушает WCAG 2.0, если таблица не содержит разметки, которая неправильно предлагает табличные данные. И естественно, авторы обычно не используют элементы th или caption в макетных таблицах, так как они в них бесполезны.

С другой стороны, заполняемая форма вполне может рассматриваться как табличные данные, т.е. содержащие метки в одном столбце, элементы управления (поля) в другом. Таким образом, это не нарушит WCAG 2.0, даже если вы используете caption (для заголовка формы) или th (для ячеек, содержащих метки, поскольку они вполне могут считаться заголовками строк).

Я согласен с тем, что сказал Юкка. Тем не менее, я немного не согласен с частью этого.

И естественно, авторы обычно не используют элементы th или caption в макетных таблицах, так как они в них бесполезны.

Я видел, как разработчики использовали <th> случайным образом в таблицах, потому что им нужно было выделить что-то по центру или выделить жирным шрифтом, а затем они использовали CSS для отмены той части, которая им не нужна. На самом деле это произошло дважды за последние несколько недель.

Одна вещь, которую Юкка не упомянул, это ARIA. Если вам нужно использовать таблицу для макета, хорошо добавить role="presentation" к объявлению <table>. В то время как вспомогательная технология довольно хорошо угадывает, когда таблица используется для презентации, но объявляя роль ARIA, сообщает ей игнорировать теги таблицы.

Хм... Я не уверен, что согласен с двумя комментариями выше. Да, это явно не упоминается в самом WCAG 2.0, но подразумевается прокси:

Контрольная точка 4.1.1: H88: Использование HTML в соответствии со спецификацией

«Использование функций способом, предписанным спецификацией. Спецификация HTML предоставляет конкретные рекомендации о том, как определенные элементы, атрибуты и значения атрибутов должны обрабатываться и пониматься семантически. Однако иногда авторы используют функции способом, который не поддерживается спецификацией. спецификация, например, использование семантических элементов для достижения визуальных эффектов без намерения передать основное семантическое сообщение. Это приводит к путанице для пользовательских агентов и вспомогательных технологий, которые полагаются на правильную семантическую информацию для представления связного представления страницы. Важно использовать функции HTML только в соответствии со спецификацией HTML».

Поэтому когда HTML4 и HTML5 говорят:

«Таблицы не должны использоваться в качестве вспомогательных средств для макета [...] Если таблица будет использоваться для макета, она должна быть помечена атрибутом role="presentation"».

Затем по доверенности использование таблиц для макета приведет к сбою техники (если не используется role="presentation" - что должно быть последним средством) и сбою контрольной точки 4.1.1 (уровень A). Довольно утомительная ссылка, но вкратце использование таблиц для макета означает, что вы вряд ли будете жаловаться на WCAG 2.0.