Как да подобрите достъпността на HTML таблицата с маркиране

Уеб достъпността се отнася до проектирането на уеб приложения по начин, който може лесно да се използва от хора с увреждания на зрението. Някои от тези потребители разчитат четци на екрани да прочетете съдържанието в уеб страниците. Екранните четци интерпретирате кода, който се намира на страницата и чете неговото съдържание на потребителя.

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

Ако таблицата не е проектирана с оглед на достъпността, ще бъде трудно за екранните четци да преведат данните в сложни таблици смислено за потребителите. Следователно, за да направим сложните HTML таблици по-лесно разбираеми, за достъпността, ние трябва гарантира, че заглавията, групите колони, групите редове и т.н. са ясно определени. По-долу ще видим как е това постигнато в маркиране.

Атрибутът на обхвата

Дори за проста маса с

маркиране с обхват = "колона" помага на помощната технология да определи, че клетките, които следват в същата колона, са имената на учениците.

По същия начин, клетки като

съдържащ обхват = "colgroup" помага на потребителите да идентифицират, че данните в клетките, които следват в групата от колони, над които се намират, са свързани с този конкретен предмет.

Тогава там е

маркиране с обхват = "ред" което определя, че клетките, които го следват в същия ред, съдържащи “клас” информация за това конкретно име на студент.

Групи редове

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

, който ясно определя заглавките, можете да подобрите достъпността му с обхват атрибут и не отстъпват на каквото и да е объркване, което може да възникне от подобни видове данни в клетките.

  Име на служителя  Код на служителя  Код на проекта  Обозначение на служителите  
  Джон Доу  32456  456789  директор  
  Мириам Лутер  78902  456789  Заместник директор

Какво прави атрибутът на обхвата? Според W3C:

С други думи, това ни помага да свържем клетките с данни със съответните им заглавни клетки.

Моля, обърнете внимание, че в горния пример можете да превключвате

за

. Докато е обхват има стойността седловина, то ще бъде интерпретирано като заглавие на съответната колона.

Най- обхват атрибутът може да има всяка една от тези четири стойности; седловина, ред, rowgroup, colgroup да се отнасят до заглавието на колона, заглавието на ред, заглавната група на колоните и съответно заглавието на групата от редове.

Комплексни таблици

Сега нека преминем към по-сложна таблица.

Над е таблица, която изброява учениците в клас и техните оценки по практически и теоретични теми за три предмета.

Ето HTML кода за него. Таблицата е използвана rowspan и ColSpan за създаване на обединени заглавия за клетките с данни.

  Име на ученика  Биология  Химия  Физика  
  Практичен  теория  Практичен  теория  Практичен  теория  
  Джон Доу  А  А+  B  А  А  А-  
  Мириам Лутер  А  А  ° С  ° С+  А  А-

В горната таблица, всяка клетка с данни, която е всяка от клетките на таблицата показва класа, се свързва с три части:

На кой ученик принадлежи този клас?
Към кой предмет принадлежи този клас?
Дали това е оценката за секцията Практически или Теория?

Тези три данни са дефинирани в три различни типа клетки за заглавие структурно и визуално:

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

Нека дефинираме същото за достъпността.

      Име на ученика  Биология  Химия  Физика  
  Практичен  теория  Практичен  теория  Практичен  теория  
  Джон Доу  А  А+  B  А  А  А-  
  Мириам Лутер  А  А  ° С  ° С+  А  А-

В горната маркировка добавихме обхват към клетки, които съдържат информация за клетките с данни.

Група от колони

Клетките по биология, химия и физика трябва да бъдат свързани с група от по две колони (теория и практически). Просто добавям ColSpan = "2" не създава групите колони, а само показва, че конкретната клетка заема пространство от две клетки.

За да създадете група графи, трябва да използвате colgroup и след това добавете педя атрибут към него, който показва колко колони включва тази група колони.

Най-

Име на ученика

Биология

Джон Доу

Предмет		Джон Доу	Мириам Лутер
Биология	Практичен	А	А
Биология	теория	А+	А
Химия	Практичен	B	° С
Химия	теория	А	° С+
Физика	Практичен	А	А
Физика	теория	А-	А-

Сега, когато използваме нашата извадка, нека да започнем със създаването на групи от редове, както направихме за групите колони в предишния пример.

Групите редове обаче не могат да бъдат създадени с помощта на маркер colgroup защото няма rowgroup елемент.

HTML редовете обикновено се групират , и елементи. Един HTML

елемент може да има такъв , един и многократно . Ще използваме няколко tbody в нашата таблица, за да създадете групите от редове и да добавите съответния обхват към клетките на заглавния ред.

Предмет		Джон Доу	Мириам Лутер
Биология	Практичен	А	А
Биология	теория	А+	А
Химия	Практичен	B	° С
Химия	теория	А	° С+
Физика	Практичен	А	А
Физика	теория	А-	А-

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

Сега прочетете: Равна височина на колоната с CSS