система онлайн-бронирования
г. Донецк, Украина, ул. Артёма, 87
+38 (062) 332 33 32, 332-27-71
ЗАБРОНИРОВАТЬ
НОМЕР

Статьи

Эксперимент "таблица дивов"

  1. Таблица делений
  2. Полная свобода стиля
  3. Необходимость действительной структуры
  4. Немного неверная структура
  5. Сделав это снова
  6. Заключение

Вместо использования традиционных элементов таблицы HTML также возможно преобразовать структуру элементов вне таблицы в таблицу, используя ARIA. Это эксперимент, и мы явно не рекомендуем использовать его на продуктивных сайтах. Поэтому, пожалуйста, дети, не пытайтесь делать это дома!

Таблица делений

Как мы видели, можно повторно применить семантику к элементу, который каким-то образом утратил присущую ему семантику. Это делается с помощью ARIA (если вы еще этого не сделали, вернитесь и прочитайте Адаптивные таблицы ).

Мы можем попытаться следовать этому подходу «до абсурда», пытаясь добавить всю необходимую семантику, используя только ARIA.

Итак, следующий пример - эксперимент с чисто демонстрационной целью. Он содержит структуру HTML, состоящую из чистых элементов <div> (поэтому не использовалось ничего подобного <table>, <tr>, <td> или аналогичным). Благодаря добавлению соответствующего атрибута роли к каждому элементу, он передается в программы чтения с экрана, как таблица.

Таблица делений с использованием ARIA

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

QED (Quod Erat демонстрация.)

Полная свобода стиля

Поскольку все роли могут быть установлены явно с помощью ARIA, мы больше не ограничены в стилизации таблицы любым традиционным способом. Например, вместо использования display: table, display: table-row и display: table-cell и т. Д. Теперь мы можем стилизовать таблицу как flexbox:

Таблица делений с flexbox

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

Необходимость действительной структуры

При обработке таблицы с использованием случайных элементов HTML и ролей ARIA очень важно, чтобы используемая структура элементов (и ролей) напоминала действительную таблицу HTML.

Немного неверная структура

В следующем примере добавляется еще один контейнер <div class = "Favorites"> вокруг элементов <tr> второго и третьего хобби, чтобы мы могли их стилизовать по отдельности. Это разбивает таблицу для некоторых программ чтения с экрана: например, NVDA объявляет ее как «таблицу с 2 строками и 3 колонками» (вместо 4 строк), а для второго и третьего увлечения навигация по таблицам больше не работает.

Неверная таблица div

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

Это не должно вызывать удивления: в стандартном HTML добавление контейнера вокруг элементов <tr> также недопустимо. И хотя приведенный выше пример все еще работает в некоторых программах чтения с экрана, всегда верно следующее: чем сложнее HTML-код, тем больше проблем возникнет.

Сделав это снова

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

Фиксированная таблица div

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

Заключение

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

Вообще говоря, приведенный выше пример является случаем одного из типичных злоупотреблений ARIA, а именно исправления нарушенной семантики (если вы еще этого не сделали, вернитесь и прочитайте Плохая практика ARIA ).

Использование реальных традиционных структур таблиц значительно упрощает обнаружение табличных данных непосредственно в DOM. Кроме того, они полностью обратно совместимы, в то время как ARIA требует довольно продвинутых браузеров и программ чтения с экрана.

Новости

Сплавы по рекам

Прошлым летом решили хорошенько отдохнуть небольшой компанией, с друзьями. Наша компания любит активный и подвижный отдых. Решили подыскать , что-то интересное и необычное, дабы развлечься по полной.

Где заказать тур на Кипр

Наш мир, в котором мы живём так разнообразен и своеобразен, что если сравнивать различные места нашей планеты, о ни одного из них не будет совпадать по каким-либо данным, характеризующим их. В любой

Специальный держатель для смартфона

Мой муж работает таксистом, и для ориентировки по соседним городам ему нужен навигатор. Но телефон девать некуда, а с сидения или полки его брать неудобно, да и не видно изображения. Любимый не растерялся

Отель под Киевом
Главный нарколог Минздравсоцразвития России, директор московского научно-практического центра наркологии Евгений Брюн дал россиянам полезные советы о том, как пережить Новый год. А столичные власти уже

Где встретить Новый год
Но самое главное, что этот праздник можно провести рядом с самыми родными и любимыми людьми – нашими родственниками и друзьями. Если в этом году новогоднее веселье вы решили провести у вас дома, сразу

Недорогой и уютный хостел в самом
Новый фитнес-трекер Mi Band 4 от Xiaomi – один из лучших гаджетов 2019 года. В отличие от своих предшественников он оснащен цветным 0.95-дюймовым AMOLED экраном, для которого сам производитель уже придумал

Отдых на острове Хайнань
Благодаря стремительному росту благосостояния наших сограждан сегодня мы много времени проводим на отдыхе и в путешествиях. Большинству украинцев уже порядком надоели европейские курорты типа Куршавеля,

Плосковальгусная деформация стоп лечение
Самая распространённая деформация на стопе, которой подвержена большая часть людей (особенно женщин), называется Hallux Valgus. Рядовые пациенты именуют заболевание «шишкой на кости», «косточкой». Вальгусная

Выгодные туры в Турцию
Каждый человек имеет право на отдых, потому что просто напросто никто не способен только постоянно и все время работать и совсем не отдыхать. А самым лучшим отдыхом по праву считается смена обстановки,

Где заказать авиабилеты
В современном мире каждый человек (если, конечно, ему позволяет материальное положение) может путешествовать по всей планете с поистине поразительной легкостью. И способов перемещения существует достаточно,

Отель «Централь» Официальный сайт 83001, Украина, г. Донецк, ул. Артема, 87
Тел.: +38 062 332-33-32, 332-27-71
[email protected]
TravelLine: Аналитика


Студия web-дизайна Stoff.in © 2008