Как улучшить доступность таблиц HTML с помощью разметки

Доступность веб-ресурсов означает разработку веб-приложений таким образом, чтобы их легко могли использовать люди с нарушениями зрения. Некоторые из этих пользователей полагаются на программы чтения с экрана для чтения содержимого веб-страниц. Программы чтения с экрана интерпретируют код, представленный на странице, и считывают его содержимое пользователю.

table> является широко используемым элементом HTML для структурированного отображения данных на веб-страницах. Его дизайн варьируется от простых до сложных, с заголовками строк, объединенными заголовками и т. Д.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Если таблица не разработана с учетом доступности, для программ чтения с экрана будет сложно переводить данные в сложные таблицы, имеющие смысл для пользователей. Следовательно, чтобы сделать сложные таблицы HTML более понятными, для обеспечения доступности мы должны обеспечить четкое определение заголовков, групп столбцов, групп строк и т. Д. Ниже мы увидим, как это достигается в разметке.
Атрибут Scope
Даже для простого стола с

Тег, который четко определяет заголовки, вы можете улучшить его доступность с помощью атрибута scope и не допустить путаницы, которая может возникнуть из-за сходных типов данных в ячейках.

Имя сотрудника	Код сотрудника	Код проекта	Наименование сотрудника
Джон Доу	32456	456789	директор
Мириам Лютер	78902	456789	Заместитель директора

Что делает атрибут scope? В соответствии с W3C:

Примечание. Этот атрибут определяет набор ячеек данных, для которых текущая ячейка заголовка предоставляет информацию заголовка.

Другими словами, это помогает нам связать ячейки данных с соответствующими им ячейками заголовка.

Обратите внимание, что в приведенном выше примере вы можете переключиться

за

, Пока его область имеет значение col, оно будет интерпретироваться как заголовок соответствующего столбца.

Атрибут области может иметь любое из этих четырех значений; col, row, rowgroup, colgroup для ссылки на заголовок столбца, заголовок строки, заголовок группы столбцов и заголовок группы строк соответственно.
Сложные таблицы
Теперь давайте перейдем к более сложному столу.
Выше приведена таблица, в которой перечислены ученики в классе и их практические и теоретические оценки по трем предметам.

Вот код HTML для этого. В таблице использовались rowspan и colspan для создания объединенных заголовков для ячеек данных.

Имя студента	Биология		Химия		физика
Имя студента	практический	теория	практический	теория	практический	теория
Джон Доу		A +	В			A-
Мириам Лютер			С	C +		A-

В приведенной выше таблице каждая ячейка данных, то есть каждая из ячеек таблицы, отображающих оценку, связана с тремя частями информации:

К какому ученику относится этот класс?
К какому предмету относится эта оценка?
Эта оценка для практического или теоретического раздела?

Эти три информации определены в трех различных типах ячеек заголовка структурно и визуально:

Имя студента
Имя субъекта
Практическое или теория

Давайте определим то же самое для доступности.

Имя студента	Биология		Химия		физика
Имя студента	практический	теория	практический	теория	практический	теория
Джон Доу		A +	В			A-
Мириам Лютер			С	C +		A-

В приведенной выше разметке мы добавили область видимости для ячеек, содержащих информацию о заголовках ячеек данных.
Колонна группы
Клетки биологии, химии и физики должны быть связаны с группой из двух столбцов (Теория и практика). Простое добавление colspan = “2” не создает группы столбцов, а только указывает, что конкретная ячейка должна занимать пространство в две ячейки.

Чтобы создать группу столбцов, вы должны использовать colgroup, а затем добавить к нему атрибут span, указывающий, сколько столбцов входит в эту группу столбцов.

Примечание: вы можете узнать больше об элементах col и colgroup в этом Документация W3C,

Имя студента

разметка с помощью scope = “col” помогает вспомогательной технологии определить, что ячейки, которые следуют в одном столбце, являются именами учащихся.

Точно так же, как клетки

Биология

Параметр содержит область действия = “группа” помогает пользователям определить, что данные в ячейках, которые следуют в группе столбцов, которую они охватывают, связаны с этим конкретным субъектом.

Тогда есть

Джон Доу

разметка с областью действия = “строка”, которая определяет, что ячейки, следующие за ней в одной строке, содержат информацию о “оценке”, касающуюся этого конкретного имени учащегося.
Группы строк
Теперь давайте перейдем к другому примеру, в этом примере будет почти та же таблица, что и выше, за исключением того, что мы поменяем местами заголовки строк и столбцов, поэтому мы сможем работать с группами строк.

<table>
    <tr>
    <th colspan="2">Тема</th>
    <th>Джон Доу</th>
    <th>Мириам Лютер</th>
    </tr>
    <tr>
        <th rowspan="2">Биология</th>
        <th>практический</th>
        <td></td>           
        <td></td>
    </tr>
    <tr>            
        <th>теория</th>
        <td>A +</td>           
        <td></td>
    </tr>
    <tr>
        <th rowspan="2">Химия</th>
        <th>практический</th>
        <td>В</td>           
        <td>С</td>
    </tr>
    <tr>            
        <th>теория</th>
        <td></td>           
        <td>C +</td>
    </tr>
    <tr>
        <th rowspan="2">физика</th>
        <th>практический</th>
        <td></td>           
        <td></td>
    </tr>
    <tr>            
        <th>теория</th>
        <td>A-</td>           
        <td>A-</td>
    </tr>
</table>

Теперь, когда у нас есть пример для работы, давайте начнем с создания групп строк, как мы делали для групп столбцов в предыдущем примере.

Тем не менее, группы строк не могут быть созданы с использованием тега, такого как colgroup, потому что нет элемента rowgroup.

HTML строки обычно группируются с использованием

а также элементы. Единый HTML

table> элемент может иметь один

, один

и несколько

, Мы будем использовать несколько tbody в нашей таблице для создания групп строк и добавим соответствующую область видимости в ячейки заголовка.

Тема		Джон Доу	Мириам Лютер
Биология	практический
Биология	теория	A +
Химия	практический	В	С
Химия	теория		C +
физика	практический
физика	теория	A-	A-

Мы добавили строки «Практические» и «Теория» в каждом теле, создав группы строк по две строки в каждой. Мы также добавили scope = “rowgroup” в ячейки, содержащие информацию о заголовке этих двух строк (в данном случае это имя субъекта, к которому относятся оценки).

Примечание. Дополнительные сведения о правилах обеспечения доступности можно найти в W3C сайт,