Проста таблица с данни с един ред заглавки на колони в горната част е сравнително лесна за достъп. Истинската болка започва със сложни таблици - такива със заглавки както в колони, така и в редове, обединени клетки или обобщени редове. Тази статия обяснява как да маркирате заглавки на таблици, така че екранният четец да „разбира“ за всяка клетка кои заглавки се отнасят за нея, без да губи контекст.
Накратко — какво обхваща това ръководство
Защо TH е различен от TD
В HTML таблица или PDF с етикет всяка клетка има един от двата типа роли: TH (Заглавка на таблица) или TD (Таблица с данни — обикновена клетка с данни). Разликата не е непременно визуална — заглавна клетка и клетка с данни могат да изглеждат еднакво оформени — тя е семантична: TH казва на екранния четец „това е заглавна част, която обяснява какво означават данните под или до нея“. Без правилно маркиране екранният четец се движи през таблицата ред по ред, сякаш всяка клетка е равна, и е лесно напълно да загубите представа кои данни към коя категория принадлежат.
Когато обхватът е достатъчен и когато имате нужда от повече
За повечето таблици добавяте a обхват атрибут към всяка TH клетка, за да посочи дали това е заглавка на колона (scope="col") или заглавка на ред (scope="row"). Когато екранен четец достигне клетка с данни, той автоматично обявява съответното заглавие на колона и заглавие на ред – така че потребителят чува например „1200 – Продажби, Q1“ вместо само изолирано „1200“.
За особено сложни таблици с повече от две нива на заглавки (например суперзаглавка, която групира няколко подколони), обхватът сам по себе си не винаги е достатъчен. В тези случаи използвайте двойката атрибути ид и заглавки: дайте на всяка заглавна клетка уникален идентификатор и във всеки списък с клетки с данни, в атрибута на заглавките, всички идентификационни номера на заглавките, които са свързани с нея. Този метод е по-гъвкав, но и по-сложен и податлив на грешки - запазете го за случаи, които наистина се нуждаят от него.
scope="col"и заглавките на редовете („Q1,“ „Q2,“ „Q3“) с scope="row" — така че всяка клетка с данни е свързана с двете заглавки, свързани с нея.Обобщени редове и множество заглавки
Обобщен ред в долната част на таблица („Общо“, „Средно“) сам по себе си е вид заглавка — обикновено е подходящо самата обща клетка да се маркира като TH с scope="row", така че екранният четец да я разграничи от обикновения ред с данни. По същия начин таблица със суперзаглавка, която групира няколко колони (например „2026 Продажби“, обхващащи „Q1,“ „Q2“) изисква правилно използване на colspan атрибут заедно с обхват, така че йерархичното групиране се запазва и когато се чете на глас.
💡 Практически съвет
Ако дадена таблица изглежда твърде сложна за правилно етикетиране (повече от две нива на заглавки, множество сливания), понякога най-простото и достъпно решение е да я разделите на няколко по-прости таблици или да добавите обобщение в обикновен текст до нея.
Как изглежда това на практика в Word и PDF
В Word използването на стандартния инструмент „Вмъкване ▸ Таблица“ и поставянето на отметка на „Заглавен ред“ в Дизайн на таблица създава правилната основа, която в повечето случаи автоматично се експортира в PDF като TH. В Acrobat, след експортиране от Word и извършване на проверка за достъпност, струва си да отворите дървото на таговете и да потвърдите, че заглавните клетки наистина са маркирани като TH, а не като обикновен TD — това е често срещана грешка при експортиране, която лесно може да се пропусне.
Имате ли таблици с данни в документи, които никога не са били тествани?
Нашият инструмент идентифицира таблици с липсващи или неправилни заглавки във всеки PDF файл на вашия сайт.
Сканирайте сайта си безплатно ←