Как улучшить доступность таблиц HTML с помощью разметки
Доступность веб-ресурсов означает разработку веб-приложений таким образом, чтобы их легко могли использовать люди с нарушениями зрения. Некоторые из этих пользователей полагаются на программы чтения с экрана для чтения содержимого веб-страниц. Программы чтения с экрана интерпретируют код, представленный на странице, и считывают его содержимое пользователю.
<
table> является широко используемым элементом HTML для структурированного отображения данных на веб-страницах. Его дизайн варьируется от простых до сложных, с заголовками строк, объединенными заголовками и т. Д.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Если таблица не разработана с учетом доступности, для программ чтения с экрана будет сложно переводить данные в сложные таблицы, имеющие смысл для пользователей. Следовательно, чтобы сделать сложные таблицы HTML более понятными, для обеспечения доступности мы должны обеспечить четкое определение заголовков, групп столбцов, групп строк и т. Д. Ниже мы увидим, как это достигается в разметке.
Атрибут Scope
Даже для простого стола с
| Имя сотрудника | Код сотрудника | Код проекта | Наименование сотрудника |
|---|---|---|---|
| Джон Доу | 32456 | 456789 | директор |
| Мириам Лютер | 78902 | 456789 | Заместитель директора |
Что делает атрибут scope? В соответствии с W3C:
Примечание. Этот атрибут определяет набор ячеек данных, для которых текущая ячейка заголовка предоставляет информацию заголовка.
Другими словами, это помогает нам связать ячейки данных с соответствующими им ячейками заголовка.
Обратите внимание, что в приведенном выше примере вы можете переключиться
Атрибут области может иметь любое из этих четырех значений; 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 строки обычно группируются с использованием
, а также<
table> элемент может иметь один
, один и несколько
| Тема | Джон Доу | Мириам Лютер | |
|---|---|---|---|
| Биология | практический | ||
| теория | A + | ||
| Химия | практический | В | С |
| теория | C + | ||
| физика | практический | ||
| теория | A- | A- | |
Мы добавили строки «Практические» и «Теория» в каждом теле, создав группы строк по две строки в каждой. Мы также добавили scope = “rowgroup” в ячейки, содержащие информацию о заголовке этих двух строк (в данном случае это имя субъекта, к которому относятся оценки).
Примечание. Дополнительные сведения о правилах обеспечения доступности можно найти в W3C сайт,
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
