Головна » Кодування » Як покращити доступність таблиці HTML з розміткою
Як покращити доступність таблиці HTML з розміткою
Веб-доступність відноситься до розробки веб-додатків таким чином, щоб їх можна було легко використовувати для людей з вадами зору. Деякі з цих користувачів покладаються на читачів екрану прочитати вміст веб-сторінок. Читачі екрана інтерпретувати код присутній на сторінці і прочитати його вміст для користувача.
- широко використовуваний елемент HTML для відображення даних у структурованому вигляді в веб-сторінках. Його дизайн варіюється від простих до складних, в комплекті з заголовками рядків, об'єднаними заголовками тощо.
Якщо таблиця не розроблена з урахуванням доступності, для читачів з екрана важко перекласти дані в складні таблиці для користувачів. Тому, щоб зробити складні HTML-таблиці більш зрозумілими, для доступності ми повинні забезпечити чітке визначення заголовків, груп стовпців, груп рядків тощо. Ми побачимо нижче, як це досягнуто в розмітці.
Атрибут області
Навіть для простого столу з
тег, який чітко визначає заголовки, можна поліпшити його доступність за допомогою сфера атрибут і не дають місця будь-якій плутанині, яка може виникнути від аналогічних типів даних у клітинах.
ім'я працівника
Кодекс працівників
Код проекту
Призначення працівників
Джон Доу
32456
456789
Директор
Міріам Лютер
78902
456789
Заступник директора
Що робить атрибут області? Відповідно до W3C:
Іншими словами, це допомагає нам асоціювати клітини даних з відповідними клітинами заголовків.
Зверніть увагу, що у наведеному вище прикладі можна переключитися
для
. Поки її сфера має значення col, воно буде інтерпретоване як заголовок відповідного стовпця.
The сфера атрибут може мати будь-яке з цих чотирьох значень; col, рядок, rowgroup, colgroup посилатися на заголовок стовпця, заголовок рядка, групу заголовків стовпців і групу заголовків рядків відповідно.
Комплексні таблиці
Тепер перейдемо до більш складної таблиці.
Вище наведена таблиця, яка перераховує студентів класу та їх оцінювання за практичною та теоретичною тематикою для трьох предметів.
Ось HTML-код для нього. Використовується таблиця rowspan і colspan для створення об'єднаних заголовків для комірок даних.
Ім'я студента
Біологія
Хімія
Фізика
Практичний
Теорія
Практичний
Теорія
Практичний
Теорія
Джон Доу
A
A+
B
A
A
A-
Міріам Лютер
A
A
C
C+
A
A-
У наведеній вище таблиці, кожна клітинка даних, тобто кожна з комірок таблиці відображення класу, пов'язано з трьома інформацією:
До якого студента належить цей клас?
До якого предмету відноситься цей клас?
Чи є цей клас практичним або теоретичним?
Ці три інформації визначаються у трьох різних типах комірок заголовка структурно і візуально:
Ім'я студента
Назва теми
Практичний або теоретичний
Давайте визначимо те ж саме для доступності.
Ім'я студента
Біологія
Хімія
Фізика
Практичний
Теорія
Практичний
Теорія
Практичний
Теорія
Джон Доу
A
A+
B
A
A
A-
Міріам Лютер
A
A
C
C+
A
A-
У вищевказаній розмітці ми додали сфера до комірок, які містять інформацію про заголовки даних.
Група стовпців
Клітини біології, хімії та фізики повинні бути пов'язані з групою з двох стовпців кожна (теорія і практична). Просто додаємо colspan = "2" не створює групи стовпців, це лише вказує на те, що певна клітина займає дві клітинки простору.
Для створення групи стовпців необхідно використовувати colgroup а потім додайте span атрибут, що вказує, скільки стовпців містить група стовпців.
The
Ім'я студента
розмітка з scope = "col" допомагає допоміжній технології визначити, що клітини, які слідують в одному стовпці, є іменами студентів.
Аналогічно, клітинам подобається
Біологія
містить scope = "colgroup" допомагає користувачам визначити, що дані в клітинах, які слідують за групою стовпців, що перевищує, пов'язані з даною темою.
Тоді є
Джон Доу
розмітка з scope = "рядок" що визначає, що клітини, що слідують за нею, в тому ж рядку, що містить “сорт” інформацію про це ім'я студента.
Групи рядків
Тепер перейдемо до іншого прикладу, цей приклад буде мати майже таку ж таблицю, що й вище, за винятком того, що ми будемо міняти заголовки рядків і стовпців, тому ми зможемо працювати з групами рядків..
Тема
Джон Доу
Міріам Лютер
Біологія
Практичний
A
A
Теорія
A+
A
Хімія
Практичний
B
C
Теорія
A
C+
Фізика
Практичний
A
A
Теорія
A-
A-
Тепер, коли у нас є зразок для роботи, давайте почнемо створювати групи рядків, як це робили для груп стовпців у попередньому прикладі.
Однак групи рядків не можуть бути створені за допомогою тега, як colgroup тому що немає rowgroup елемент.
Рядки HTML зазвичай групуються за допомогою , і елементи. Один HTML
елемент може мати один , один і множинні . Ми будемо використовувати кілька тіло у нашій таблиці створюються групи рядків і додаються відповідні області до заголовків комірок.
Тема
Джон Доу
Міріам Лютер
Біологія
Практичний
A
A
Теорія
A+
A
Хімія
Практичний
B
C
Теорія
A
C+
Фізика
Практичний
A
A
Теорія
A-
A-
Ми додали рядки “Практичний” і “Теорія” в кожному тіло створення груп рядків з двома рядками. Ми також додали scope = "rowgroup" до осередків, що містять інформацію про заголовки цих двох рядків (що в даному випадку є назвою предметів).
