Как да подобрите достъпността на HTML таблицата с маркиране
Уеб достъпността се отнася до проектирането на уеб приложения по начин, който може лесно да се използва от хора с увреждания на зрението. Някои от тези потребители разчитат четци на екрани да прочетете съдържанието в уеб страниците. Екранните четци интерпретирате кода, който се намира на страницата и чете неговото съдържание на потребителя.
е широко използван HTML елемент за показване на данни по структуриран начин в уеб страниците. Дизайнът му варира от прости до сложни, пълни със заглавия на редове, обединени заглавки и т.н..
Ако таблицата не е проектирана с оглед на достъпността, ще бъде трудно за екранните четци да преведат данните в сложни таблици смислено за потребителите. Следователно, за да направим сложните HTML таблици по-лесно разбираеми, за достъпността, ние трябва гарантира, че заглавията, групите колони, групите редове и т.н. са ясно определени. По-долу ще видим как е това постигнато в маркиране.
Атрибутът на обхвата
Дори за проста маса с
, който ясно определя заглавките, можете да подобрите достъпността му с обхват атрибут и не отстъпват на каквото и да е объркване, което може да възникне от подобни видове данни в клетките.
Име на служителя
Код на служителя
Код на проекта
Обозначение на служителите
Джон Доу
32456
456789
директор
Мириам Лутер
78902
456789
Заместник директор
Какво прави атрибутът на обхвата? Според W3C:
С други думи, това ни помага да свържем клетките с данни със съответните им заглавни клетки.
Моля, обърнете внимание, че в горния пример можете да превключвате
за
. Докато е обхват има стойността седловина, то ще бъде интерпретирано като заглавие на съответната колона.
Най- обхват атрибутът може да има всяка една от тези четири стойности; седловина, ред, rowgroup, colgroup да се отнасят до заглавието на колона, заглавието на ред, заглавната група на колоните и съответно заглавието на групата от редове.
Комплексни таблици
Сега нека преминем към по-сложна таблица.
Над е таблица, която изброява учениците в клас и техните оценки по практически и теоретични теми за три предмета.
Ето HTML кода за него. Таблицата е използвана rowspan и ColSpan за създаване на обединени заглавия за клетките с данни.
Име на ученика
Биология
Химия
Физика
Практичен
теория
Практичен
теория
Практичен
теория
Джон Доу
А
А+
B
А
А
А-
Мириам Лутер
А
А
° С
° С+
А
А-
В горната таблица, всяка клетка с данни, която е всяка от клетките на таблицата показва класа, се свързва с три части:
На кой ученик принадлежи този клас?
Към кой предмет принадлежи този клас?
Дали това е оценката за секцията Практически или Теория?
Тези три данни са дефинирани в три различни типа клетки за заглавие структурно и визуално:
Име на ученика
Име на темата
Практически или теоретично
Нека дефинираме същото за достъпността.
Име на ученика
Биология
Химия
Физика
Практичен
теория
Практичен
теория
Практичен
теория
Джон Доу
А
А+
B
А
А
А-
Мириам Лутер
А
А
° С
° С+
А
А-
В горната маркировка добавихме обхват към клетки, които съдържат информация за клетките с данни.
Група от колони
Клетките по биология, химия и физика трябва да бъдат свързани с група от по две колони (теория и практически). Просто добавям ColSpan = "2" не създава групите колони, а само показва, че конкретната клетка заема пространство от две клетки.
За да създадете група графи, трябва да използвате colgroup и след това добавете педя атрибут към него, който показва колко колони включва тази група колони.
Най-
Име на ученика
маркиране с обхват = "колона" помага на помощната технология да определи, че клетките, които следват в същата колона, са имената на учениците.
По същия начин, клетки като
Биология
съдържащ обхват = "colgroup" помага на потребителите да идентифицират, че данните в клетките, които следват в групата от колони, над които се намират, са свързани с този конкретен предмет.
Тогава там е
Джон Доу
маркиране с обхват = "ред" което определя, че клетките, които го следват в същия ред, съдържащи “клас” информация за това конкретно име на студент.
Групи редове
Сега нека преминем към друг пример, този пример ще има почти същата таблица като тази по-горе, с изключение на това, че ще сменяме заглавията на редовете и колоните, така че ще можем да работим с групи редове..
Предмет
Джон Доу
Мириам Лутер
Биология
Практичен
А
А
теория
А+
А
Химия
Практичен
B
° С
теория
А
° С+
Физика
Практичен
А
А
теория
А-
А-
Сега, когато използваме нашата извадка, нека да започнем със създаването на групи от редове, както направихме за групите колони в предишния пример.
Групите редове обаче не могат да бъдат създадени с помощта на маркер colgroup защото няма rowgroup елемент.
HTML редовете обикновено се групират , и елементи. Един HTML
елемент може да има такъв , един и многократно . Ще използваме няколко tbody в нашата таблица, за да създадете групите от редове и да добавите съответния обхват към клетките на заглавния ред.
Предмет
Джон Доу
Мириам Лутер
Биология
Практичен
А
А
теория
А+
А
Химия
Практичен
B
° С
теория
А
° С+
Физика
Практичен
А
А
теория
А-
А-
Добавихме редовете “Практичен” и “теория” във всеки tbody създаване на групи от редове с два реда във всяка. Добавихме и обхват = "rowgroup" към клетките, съдържащи информацията за заглавието на тези два реда (което е името на предмета, на което класовете принадлежат в този случай).