- Tabela div
- Całkowita swoboda stylizacji
- Konieczność prawidłowej struktury
- Nieco nieprawidłowa struktura
- Znowu to ważne
- Wniosek
Zamiast korzystać z tradycyjnych elementów tabeli HTML, możliwe jest również przekonwertowanie struktury elementów nie będących tabelami na tabelę za pomocą ARIA. To jest eksperyment i wyraźnie nie zalecamy korzystania z niego na wydajnych stronach internetowych. Więc proszę, dzieci, nie próbujcie tego w domu!
Tabela div
Jak widzieliśmy, możliwe jest ponowne zastosowanie semantyki do elementu, który w jakiś sposób utracił swoją wewnętrzną semantykę. Odbywa się to za pomocą ARIA (jeśli jeszcze tego nie zrobiłeś, wróć i przeczytaj Stoły reagujące ).
Możemy spróbować zastosować to podejście „ad absurdum”, próbując dodać całą potrzebną semantykę za pomocą samej ARIA.
Poniższy przykład jest eksperymentem o czysto demonstracyjnym celu. Zawiera strukturę HTML składającą się z czystych elementów <div> (więc nie użyto niczego takiego jak <table>, <tr>, <td> lub podobne). Dzięki dodaniu odpowiedniego atrybutu roli do każdego elementu jest on przenoszony do czytników ekranowych, takich jak tabela.
Tabela div z użyciem ARIA 
<p id = "caption"> Moje hobby </ p> <div aria-describedby = "caption" class = "table" role = "grid"> <div class = "tr" role = "row"> <div class = "th" role = "columnheader"> Nazwa </ div> <div class = "th" role = "columnheader"> Opis </ div> <div class = "th" role = "columnheader"> Dodatkowe zasoby </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Odtwarzanie piłki nożnej </ div> <div class = "td" role = "gridcell" > Piłka nożna to sport zespołowy rozgrywany między dwiema drużynami po jedenastu zawodników z kulistą kulą. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Association_football"> Wikipedia </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Dancing </ div> <div class = "td" role = "gridcell"> Dance to forma sztuki wykonawczej składający się z celowo wybranych sekwencji ludzkiego ruchu. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Dance"> Wikipedia </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Gardening </ div> <div class = "td" role = "gridcell"> Ogrodnictwo to praktyka uprawy i uprawa roślin jako część ogrodnictwa. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Gardening"> Wikipedia </ a> </ div> </ div> </ div> .table {border-left: 1px solid; border-bottom: 1px bryła; wyświetlacz: tabela; } .tr {display: table-row; } .th, .td {border-top: 1px solid; border-right: 1px solid; dopełnienie: 4px 8px; display: table-cell; } .th {font-weight: bold; } .th [role = "rowheader"] {background-color: lightgreen; } .th [role = "columnheader"] {background-color: lightpink; } Wynik Tylko klawiatura pass pass (pass) - 2018-4-17 NVDA 2018 + FF Quantum 59.0.2 pass (pass) - 2018-4-17 JAWS 2018,3 + IE 11 ✔ (pass) - 2018-4-23 JAWS 2018 + FF ESR 52.7.3 ✔ (pass) pass - 2018-4-17 QED (Quod erat demonstrandum.)
Całkowita swoboda stylizacji
Ponieważ wszystkie role można ustawić bezpośrednio za pomocą ARIA, nie jesteśmy już ograniczeni stylizowaniem stołu w tradycyjny sposób. Na przykład zamiast używać display: table, display: table-row i display: table-cell itp., Możemy teraz stylizować tabelę jako flexbox:
Tabela div z Flexbox 
<p id = "caption"> Moje hobby </ p> <div aria-describedby = "caption" class = "table" role = "grid"> <div class = "tr" role = "row"> <div class = "th" role = "columnheader"> Nazwa </ div> <div class = "th" role = "columnheader"> Opis </ div> <div class = "th" role = "columnheader"> Dodatkowe zasoby </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Odtwarzanie piłki nożnej </ div> <div class = "td" role = "gridcell" > Piłka nożna to sport zespołowy rozgrywany między dwiema drużynami po jedenastu zawodników z kulistą kulą. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Association_football"> Wikipedia </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Dancing </ div> <div class = "td" role = "gridcell"> Dance to forma sztuki wykonawczej składający się z celowo wybranych sekwencji ludzkiego ruchu. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Dance"> Wikipedia </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Gardening </ div> <div class = "td" role = "gridcell"> Ogrodnictwo to praktyka uprawy i uprawa roślin jako część ogrodnictwa. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Gardening"> Wikipedia </ a> </ div> </ div> </ div> .table {border-left: 1px solid; border-bottom: 1px bryła; } .tr {display: flex; } .th, .td {border-top: 1px solid; border-right: 1px solid; dopełnienie: 4px 8px; flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {background-color: lightgreen; } .th [role = "columnheader"] {background-color: lightpink; } Wynik Tylko klawiatura pass pass (pass) - 2018-4-17 NVDA 2018 + FF Quantum 59.0.2 pass (pass) - 2018-4-17 JAWS 2018,3 + IE 11 ✔ (pass) - 2018-4-23 JAWS 2018 + FF ESR 52.7.3 ✔ (pass) pass - 2018-4-17 Konieczność prawidłowej struktury
Podczas majstrowania przy użyciu losowych elementów HTML i ról ARIA bardzo ważne jest, aby użyta struktura elementów (i ról) przypominała poprawną tabelę HTML.
Nieco nieprawidłowa struktura
Poniższy przykład dodaje kolejny kontener <div class = "favorites"> wokół drugiego i trzeciego elementu hobby <tr>, abyśmy mogli stylizować je indywidualnie. Przerywa to tabelę dla niektórych czytników ekranu: na przykład NVDA ogłasza to jako „tabelę z 2 wierszami i 3 kolumnami” (zamiast 4 wierszy), aw drugim i trzecim hobby nawigacja tabelami nie działa.
Nieprawidłowa tabela div 
<p id = "caption"> Moje hobby </ p> <div aria-describedby = "caption" class = "table" role = "grid"> <div class = "tr" role = "row"> <div class = "th" role = "columnheader"> Nazwa </ div> <div class = "th" role = "columnheader"> Opis </ div> <div class = "th" role = "columnheader"> Dodatkowe zasoby </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Odtwarzanie piłki nożnej </ div> <div class = "td" role = "gridcell" > Piłka nożna to sport zespołowy rozgrywany między dwiema drużynami po jedenastu zawodników z kulistą kulą. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Association_football"> Wikipedia </ a> </ div> </ div> <div class = "favorites"> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Dancing </ div> <div class = "td" role = "gridcell „> Taniec to forma sztuki wykonawczej składająca się z celowo wybranych sekwencji ludzkiego ruchu. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Dance"> Wikipedia </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Gardening </ div> <div class = "td" role = "gridcell"> Ogrodnictwo to praktyka uprawy i uprawa roślin jako część ogrodnictwa. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Gardening"> Wikipedia </ a> </ div> </ div> </ div> </ div> .table {border-left: 1px solid; border-bottom: 1px bryła; } .tr {display: flex; } .th, .td {border-top: 1px solid; border-right: 1px solid; dopełnienie: 4px 8px; flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {background-color: lightgreen; } .th [role = "columnheader"] {background-color: lightpink; } .favourites {font-style: italic; } Nie powinno to być zbyt zaskakujące: w standardowym HTML dodawanie kontenera wokół elementów <tr> również nie jest poprawne. I chociaż powyższy przykład nadal działa w niektórych czytnikach ekranowych, zawsze zachowuje się prawda: im większy jest kod HTML, tym więcej problemów wystąpi.
Znowu to ważne
Dobra wiadomość: dodając rolę = „prezentacja” do tego dodatkowego kontenera, usuwamy jego znaczenie semantyczne, a tabela działa ponownie (także w NVDA).
Naprawiono tabelę div 
<p id = "caption"> Moje hobby </ p> <div aria-describedby = "caption" class = "table" role = "grid"> <div class = "tr" role = "row"> <div class = "th" role = "columnheader"> Nazwa </ div> <div class = "th" role = "columnheader"> Opis </ div> <div class = "th" role = "columnheader"> Dodatkowe zasoby </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Odtwarzanie piłki nożnej </ div> <div class = "td" role = "gridcell" > Piłka nożna to sport zespołowy rozgrywany między dwiema drużynami po jedenastu zawodników z kulistą kulą. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Association_football"> Wikipedia </ a> </ div> </ div> <div class = "favorites" role = "presentation"> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Dancing </ div> <div class = "td "role =" gridcell "> Dance to forma sztuki wykonawczej składająca się z celowo wybranych sekwencji ludzkiego ruchu. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Dance"> Wikipedia </ a> </ div> </ div> <div class = "tr" role = "row"> <div class = "th" role = "rowheader"> Gardening </ div> <div class = "td" role = "gridcell"> Ogrodnictwo to praktyka uprawy i uprawa roślin jako część ogrodnictwa. </ div> <div class = "td" role = "gridcell"> <a href = "https://en.wikipedia.org/wiki/Gardening"> Wikipedia </ a> </ div> </ div> </ div> </ div> .table {border-left: 1px solid; border-bottom: 1px bryła; } .tr {display: flex; } .th, .td {border-top: 1px solid; border-right: 1px solid; dopełnienie: 4px 8px; flex: 1; } .th {font-weight: bold; } .th [role = "rowheader"] {background-color: lightgreen; } .th [role = "columnheader"] {background-color: lightpink; } .favourites {font-style: italic; } Wynik Tylko klawiatura pass pass (pass) - 2018-4-17 NVDA 2018 + FF Quantum 59.0.2 pass (pass) - 2018-4-17 JAWS 2018,3 + IE 11 ✔ (pass) - 2018-4-23 JAWS 2018 + FF ESR 52.7.3 ✔ (pass) pass - 2018-4-17 Wniosek
Podczas gdy czyste tablice ARIA wydają się działać całkiem dobrze w większości współczesnych czytników ekranu, bardzo zniechęcamy do korzystania z nich na wydajnych stronach internetowych.
Ogólnie rzecz biorąc, powyższy przykład jest przykładem jednego z typowych błędów ARIA, mianowicie naprawiania złamanej semantyki (jeśli jeszcze tego nie zrobiłeś, wróć i przeczytaj Złe praktyki ARIA ).
Użycie prawdziwych, tradycyjnych struktur tabel znacznie ułatwia wykrycie danych podobnych do tabeli bezpośrednio w DOM. Ponadto są w pełni kompatybilne wstecz, podczas gdy ARIA wymaga całkiem zaawansowanych przeglądarek i czytników ekranu.
