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

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

Эксперымент "табліца дзіў"

  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-descriptionby = "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> <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 {дысплей: table-row; } .th, .td {border-top: 1px solid; справа: мяжа 1px; абіўка: 4px 8px; дысплей: табліца; } .th {font-weight: bold; } .th [role = "rowheader"] {колер фону: светла-зялёны; } .th [role = "columnheader"] {background-color: lightpink; } Толькі вынік Клавіятура pass (пас) пропуск - 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 (праход) пераход - 2018-4-17

QED (Удзельнік дэманстрацыі.)

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

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

Табліца div з Flexbox

<p id = "caption"> Мае захапленні </ p> <div aria-descriptionby = "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> <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 {дысплей: flex; } .th, .td {border-top: 1px solid; справа: мяжа 1px; абіўка: 4px 8px; Flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {колер фону: светла-зялёны; } .th [role = "columnheader"] {background-color: lightpink; } Толькі вынік Клавіятура pass (пас) пропуск - 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 (праход) пераход - 2018-4-17

Неабходнасць сапраўднай структуры

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

Злёгку несапраўдная структура

У наступным прыкладзе дадаецца яшчэ адзін <div class = "Favorites"> кантэйнер вакол <tr> элементаў другога і трэцяга захапленняў, каб мы маглі стылізаваць іх паасобку. Гэта ламае табліцу для некаторых счытвальнікаў экрана: напрыклад, NVDA аб'яўляе аб гэтым як "табліца з 2 радкамі і 3 слупкамі" (замест 4 радкоў), а для другога і трэцяга захаплення навігацыя па табліцы больш не працуе.

Няправільная табліца divs

<p id = "caption"> Мае захапленні </ p> <div aria-descriptionby = "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> <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 = "Favorites"> <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 {дысплей: flex; } .th, .td {border-top: 1px solid; справа: мяжа 1px; абіўка: 4px 8px; Flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {колер фону: светла-зялёны; } .th [role = "columnheader"] {background-color: lightpink; } .favourites {font-style: курсіў; }

Гэта не павінна быць занадта дзіўна: у стандартным HTML даданне кантэйнера вакол элементаў <tr> не з'яўляецца сапраўдным. І хоць вышэйпрыведзены прыклад усё яшчэ працуе ў некаторых счытвальніках экрана, заўсёды дакладна: прасцей, чым HTML код, тым больш праблем будзе ўзнікаць.

Зрабіць яго сапраўдным зноў

Добрыя навіны: дадаўшы ролю = "прэзентацыю" у гэты дадатковы кантэйнер, мы выдаляем яго семантычнае значэнне, і табліца зноў працуе (таксама ў NVDA).

Выпраўленая табліца divs

<p id = "caption"> Мае захапленні </ p> <div aria-descriptionby = "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> <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 = "Favorites" 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 {дысплей: flex; } .th, .td {border-top: 1px solid; справа: мяжа 1px; абіўка: 4px 8px; Flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {колер фону: светла-зялёны; } .th [role = "columnheader"] {background-color: lightpink; } .favourites {font-style: курсіў; } Толькі вынік Клавіятура pass (пас) пропуск - 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 (праход) пераход - 2018-4-17

выснову

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

Наогул кажучы, прыведзены вышэй прыклад - адзін з тыповых памылак выкарыстання ARIA, а менавіта выправіць няправільную семантыку (калі вы гэтага яшчэ не зрабілі, вярніцеся і прачытайце Дрэнная практыка Арыя ).

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