Блог уютное место для бесед Обратно в студию

Сышышь ты, выходи сюда,
поговорим !

Експеримент "таблиця divs"

  1. Таблиця divs
  2. Загальна свобода укладання
  3. Необхідність дійсної структури
  4. Незначна структура
  5. Знову зробивши це
  6. Висновок

Замість того, щоб використовувати традиційні елементи таблиці HTML, можна також перетворити структуру нестолових елементів у таблицю за допомогою ARIA. Це експеримент, і ми не рекомендуємо використовувати його на продуктивних веб-сайтах. Так що, будь ласка, діти, не намагайтеся це вдома!

Таблиця divs

Як ми бачили, можна повторно застосувати семантику до елемента, який якимось чином втратив свою притаманну семантику. Це робиться за допомогою програми ARIA (якщо ви ще цього не зробили, поверніться і прочитайте Відповідні таблиці ).

Ми можемо спробувати слідувати цьому підходу "ad absurdum", намагаючись додати всі необхідні семантики за допомогою ARIA.

Таким чином, наступним прикладом є експеримент з чисто демонстративною метою. Він містить структуру HTML, яка складається з чистих елементів <div> (тому нічого подібного <table>, <tr>, <td> або подібного не було використано). Завдяки додаванню відповідного атрибуту ролей до кожного елемента, він передається читачам екрану, як таблиця.

Таблиця DIV з використанням ARIA

<p id = "caption"> Мої хобі </ p> <div aria-servedby = "caption" class = "table" role = "grid"> <div class = "tr" рол = "рядок"> <div class = "th" role = "columnheader"> Ім'я </ div> <div class = "th" role = "columnheader"> Опис </ div> <div class = "th" role = "columnheader"> Додаткові ресурси </ div> div> </ div> <div class = "tr" role = "rowheader"> </ div> </ div> <div class = "td" роль = "gridcell" > Футбол - це командний спорт між двома командами з одинадцяти гравців зі сферичним м'ячем. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Association_football"> Вікіпедія </ a> </ div> </ div> <div class = "th" role = "row"> <div class = "th" role = "rowheader"> Танці </ div> <div class = "td" роль = "gridcell"> Танець - це форма виконавського мистецтва що складається з цілеспрямовано вибраних послідовностей людського руху. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Dance"> Вікіпедія </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Садівництво </ div> <div class = "td" роль = "gridcell"> Садівництво - це практика вирощування і вирощування рослин як частини садівництва. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Gardening"> Вікіпедія </ a> </ div> </ div> </ div> .table {border-left: 1px solid; кордон нижній: 1px твердий; дисплей: таблиця; } .tr {display: table-row; } .th, .td {кордон-вершина: 1px твердий; правий край: 1px твердий; заповнення: 4px 8px; дисплей: таблична клітина; } .th {font-weight: bold; } .th [role = "rowheader"] {колір тла: світло-зелений; } .th [role = "columnheader"] {колір фону: lightpink; } Результат тільки клавіатури ✔ (прохід) пропуск - 2018-4-17 NVDA 2018.1 + FF Quantum 59.0.2) (пропуск) пропуск - 2018-4-17 JAWS 2018.3 + IE 11 ✔ (пропуск) пропуск - 2018-4-23 JAWS 2018.3 + FF ESR 52.7.3 pass (pass) pass - 2018-4-17

QED (Qued erat demonstrandum.)

Загальна свобода укладання

Оскільки всі ролі можуть бути встановлені явно за допомогою ARIA, ми більше не обмежуємось стилізацією таблиці будь-яким традиційним способом. Наприклад, замість використання дисплея: table, display: table-row і display: table-cell і т.д., тепер ми можемо стилювати таблицю як flexbox:

Таблиця divs з flexbox

<p id = "caption"> Мої хобі </ p> <div aria-servedby = "caption" class = "table" role = "grid"> <div class = "tr" рол = "рядок"> <div class = "th" role = "columnheader"> Ім'я </ div> <div class = "th" role = "columnheader"> Опис </ div> <div class = "th" role = "columnheader"> Додаткові ресурси </ div> div> </ div> <div class = "tr" role = "rowheader"> </ div> </ div> <div class = "td" роль = "gridcell" > Футбол - це командний спорт між двома командами з одинадцяти гравців зі сферичним м'ячем. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Association_football"> Вікіпедія </ a> </ div> </ div> <div class = "th" role = "row"> <div class = "th" role = "rowheader"> Танці </ div> <div class = "td" роль = "gridcell"> Танець - це форма виконавського мистецтва що складається з цілеспрямовано вибраних послідовностей людського руху. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Dance"> Вікіпедія </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Садівництво </ div> <div class = "td" роль = "gridcell"> Садівництво - це практика вирощування і вирощування рослин як частини садівництва. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Gardening"> Вікіпедія </ a> </ div> </ div> </ div> .table {border-left: 1px solid; кордон нижній: 1px твердий; } .tr {display: flex; } .th, .td {кордон-вершина: 1px твердий; правий край: 1px твердий; заповнення: 4px 8px; flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {колір тла: світло-зелений; } .th [role = "columnheader"] {колір фону: lightpink; } Результат тільки клавіатури ✔ (прохід) пропуск - 2018-4-17 NVDA 2018.1 + FF Quantum 59.0.2) (пропуск) пропуск - 2018-4-17 JAWS 2018.3 + IE 11 ✔ (пропуск) пропуск - 2018-4-23 JAWS 2018.3 + FF ESR 52.7.3 pass (pass) pass - 2018-4-17

Необхідність дійсної структури

При розробці таблиці за допомогою випадкових елементів HTML і ролей ARIA дуже важливо, щоб використана структура елементів (і ролей) нагадувала дійсну таблицю HTML.

Незначна структура

Наступний приклад додає контейнер <div class = "favorites"> навколо елементів <tr> другого і третього хобі, щоб ми могли стилізувати їх окремо. Це розбиває таблицю для деяких читачів екрану: наприклад, NVDA оголошує його "таблицею з 2 рядками і 3 колонками" (замість 4 рядків), а для другого і третього хобі, навігація таблиці більше не працює.

Недійсна таблиця divs

<p id = "caption"> Мої хобі </ p> <div aria-servedby = "caption" class = "table" role = "grid"> <div class = "tr" рол = "рядок"> <div class = "th" role = "columnheader"> Ім'я </ div> <div class = "th" role = "columnheader"> Опис </ div> <div class = "th" role = "columnheader"> Додаткові ресурси </ div> div> </ div> <div class = "tr" role = "rowheader"> </ div> </ div> <div class = "td" роль = "gridcell" > Футбол - це командний спорт між двома командами з одинадцяти гравців зі сферичним м'ячем. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Association_football"> Вікіпедія </ a> </ div> </ div> <div class = "favorites"> <div class = "tr" роль = "рядок"> танці </ div> <div class = "td" role = "gridcell Танець - форма виконавського мистецтва, що складається з цілеспрямовано вибраних послідовностей людського руху. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Dance"> Вікіпедія </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Садівництво </ div> <div class = "td" роль = "gridcell"> Садівництво - це практика вирощування і вирощування рослин як частини садівництва. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Gardening"> Вікіпедія </ a> </ div> </ div> </ div> </ div> .table {border-left: 1px solid; кордон нижній: 1px твердий; } .tr {display: flex; } .th, .td {кордон-вершина: 1px твердий; правий край: 1px твердий; заповнення: 4px 8px; flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {колір тла: світло-зелений; } .th [role = "columnheader"] {колір фону: lightpink; } .favourites {font-style: курсив; }

Це не повинно бути занадто дивно: у стандартному HTML додавання контейнера навколо елементів <tr> також не є дійсним. І хоча вищевикладений приклад все ще працює в деяких програмах для читання з екрану, завжди залишається наступним: месіє HTML-код, тим більше проблем буде.

Знову зробивши це

Гарна новина: додавши role = "presentation" до цього додаткового контейнера, ми видалимо його семантичне значення, і таблиця знову працює (також у NVDA).

Виправлена ​​таблиця divs

<p id = "caption"> Мої хобі </ p> <div aria-servedby = "caption" class = "table" role = "grid"> <div class = "tr" рол = "рядок"> <div class = "th" role = "columnheader"> Ім'я </ div> <div class = "th" role = "columnheader"> Опис </ div> <div class = "th" role = "columnheader"> Додаткові ресурси </ div> div> </ div> <div class = "tr" role = "rowheader"> </ div> </ div> <div class = "td" роль = "gridcell" > Футбол - це командний спорт між двома командами з одинадцяти гравців зі сферичним м'ячем. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Association_football"> Вікіпедія </ a> </ div> </ div> <div class = "favorites" role = "presentation"> <div class = "th" role = "rowheader"> Танці </ div> <div class = "td" "role =" gridcell "> Танець - це форма виконавського мистецтва, що складається з цілеспрямовано вибраних послідовностей людського руху. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Dance"> Вікіпедія </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Садівництво </ div> <div class = "td" роль = "gridcell"> Садівництво - це практика вирощування і вирощування рослин як частини садівництва. </ div> <div class = "td" role = "gridcell"> <a href = "https://uk.wikipedia.org/wiki/Gardening"> Вікіпедія </ a> </ div> </ div> </ div> </ div> .table {border-left: 1px solid; кордон нижній: 1px твердий; } .tr {display: flex; } .th, .td {кордон-вершина: 1px твердий; правий край: 1px твердий; заповнення: 4px 8px; flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {колір тла: світло-зелений; } .th [role = "columnheader"] {колір фону: lightpink; } .favourites {font-style: курсив; } Результат тільки клавіатури ✔ (прохід) пропуск - 2018-4-17 NVDA 2018.1 + FF Quantum 59.0.2) (пропуск) пропуск - 2018-4-17 JAWS 2018.3 + IE 11 ✔ (пропуск) пропуск - 2018-4-23 JAWS 2018.3 + FF ESR 52.7.3 pass (pass) pass - 2018-4-17

Висновок

Хоча чисті таблиці ARIA, здається, працюють досить добре в більшості сучасних читачів екрана, ми дуже перешкоджаємо їх використанню на продуктивних веб-сайтах.

Взагалі кажучи, вищенаведений приклад - випадок одного з типових неправильних вживань ARIA, а саме фіксації зламаної семантики (якщо ви ще цього не зробили, поверніться назад і прочитайте Погана практика ARIA ).

Використання реальних, традиційних табличних структур значно полегшує виявлення даних, подібних до таблиці, безпосередньо в DOM. Крім того, вони повністю сумісні, у той час як ARIA вимагає досить просунутих браузерів і читачів екрану.