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

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

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

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

Атрибут Scope

Даже для простого стола с

разметка с Объем = "Col" помогает вспомогательной технологии определить, что ячейки, которые следуют в одном столбце, являются именами учащихся.

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

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

Тогда есть

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

Группы строк

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

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

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

Что делает атрибут scope? Согласно W3C:

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

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

за

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

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

Сложные таблицы

Теперь давайте перейдем к более сложному столу..

Выше приведена таблица, в которой перечислены ученики в классе и их практические и теоретические оценки по трем предметам..

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

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

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

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

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

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

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

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

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

Колонна группы

Клетки биологии, химии и физики должны быть связаны с группой из двух столбцов (Теория и практика). Просто добавив Объединение колонок = "2" не создает группы столбцов, это только указывает на то, что конкретная ячейка должна занимать пространство в две ячейки.

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

Имя ученика

Биология

Джон Доу

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

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

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

HTML-строки обычно группируются с использованием , а также элементы. Единый HTML

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

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

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

Теперь прочитайте: равная высота столбца с CSS