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

    Как да подобрите достъпността на 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