Accessibility ng header ng table: ang WCAG rule na nalalagpasan ng karamihan ng site

Ang data table na walang tunay na header markup ay binabasa ng screen reader bilang agos ng hubad na mga numero, na walang ideya kung aling row o column ang kinabibilangan ng bawat isa. Ang pag-aayos nito ay ang paggamit ng <th> sa halip na <td> para sa mga header cell at pagdaragdag ng scope attribute, na tumutugon sa WCAG 1.3.1 (Info at mga Ugnayan) at ginagawang bagay na talagang mapag-nanavigahan ng screen reader ang table na dating layout lang sa paningin.

Mga pangunahing punto

• Magkamukha ang <th> at <td> kung pareho ang estilo, pero ang <th> lang ang nagsasabi sa screen reader ng "ito ay header." Ang makapal at naka-center na teksto sa <td> ay di-nakikita bilang header ng assistive technology, kahit ano pa ang itsura nito.
• Sinasabi ng scope attribute sa screen reader kung saang direksyon nalalapat ang header. Ang mga wastong halaga ay col, row, colgroup, at rowgroup, wala nang iba.
• Isa itong kinakailangan ng WCAG 1.3.1 (Info at mga Ugnayan), Level A. Tumutugma rin ito sa 1194.22(g) ng Section 508 at 9.1.3.1 ng EN 301 549, kaya hindi ito patakaran ng US lang.
• Sinusuri ng axe-core ang pitong magkakaibang problema sa table, at isa lang sa mga ito, ang maling baybay na halaga ng scope, ang may awtomatikong ayos ngayon. Ang iba ay nangangailangan ng taong nakakaunawa sa tunay na kahulugan ng table.
• Ang mga simpleng table (header lang sa unang row o unang column) ay nangangailangan ng mas kaunting markup kaysa sa ipinahihiwatig ng karamihan ng gabay. Sapat na ang payak na <th> doon; nagiging kailangan ang scope kapag may header ang table sa higit sa isang direksyon.

Bakit ang <th> laban sa <td> ang lahat

Binabasa ng bisitang nakakakita ang table sa pamamagitan ng pag-scan sa isang row at pagtingin pataas sa pamagat ng column, nang hindi pinag-iisipan. Walang katumbas na paraan ang screen reader para "sulyapan pataas." Binabasa nito ang cell kada cell, at ang tanging paraan para malaman nitong header ang isang cell, at hindi basta isa pang piraso ng datos, ay ang pinagbabatayang elemento ng HTML.

Ang <th> ay header cell. Pinakakapal at isinasentro ito ng mga browser bilang default, at ina-announce ito ng mga screen reader bilang header kapag nag-navigate ang user sa table. Ang <td> ay payak na data cell. Wala itong ganoong announcement, kahit anong CSS ang ilapat dito.

Dito bumabagsak ang halos bawat totoong table. Gumagawa ang developer ng table, gusto niyang makapal ang itsura ng header row, at gumagamit ng <td style="font-weight: bold"> sa halip na <th>. Sa paningin, hindi ito mapagkakaiba sa tunay na header. Sa screen reader, isa lang itong data cell na nagkataong makapal, na walang kaugnayan sa mga cell sa ibaba.

<!-- Bumabagsak: mukhang header row, ina-announce bilang payak na datos -->
<table>
  <tr>
    <td><strong>Day</strong></td>
    <td><strong>Open</strong></td>
    <td><strong>Close</strong></td>
  </tr>
  <tr>
    <td>Monday</td>
    <td>9:00 AM</td>
    <td>6:00 PM</td>
  </tr>
</table>

<!-- Pumapasa: tunay na header cell, ina-announce bilang header, kasama ang caption -->
<table>
  <caption>Store hours</caption>
  <tr>
    <th scope="col">Day</th>
    <th scope="col">Open</th>
    <th scope="col">Close</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>9:00 AM</td>
    <td>6:00 PM</td>
  </tr>
</table>

Magkapareho ang itsura ng dalawa para sa bisitang nakakakita. Ang pangalawa lang ang nagsasabi sa gumagamit ng screen reader na ang "9:00 AM" ay kabilang sa "Open" sa "Monday."

Ang scope attribute, at kailan mo ito talagang kailangan

Para sa simpleng table, iyong may header lang sa unang row, o lang sa unang column, hindi pareho, sapat na ang <th> lang. Tama ang magiging hinuha ng screen reader sa direksyon. Ito ay kasong mas magaan talaga ang mahigpit na kinakailangan ng WCAG kaysa sa ipinahihiwatig ng maraming nilalaman tungkol sa accessibility.

Kapag may mga header na tumatakbo sa dalawang direksyon nang sabay, halimbawa isang iskedyul na may mga araw sa itaas at mga oras sa gilid, hindi na opsyonal sa praktika ang scope. Kung wala ito, walang maaasahang paraan ang screen reader para malaman kung ang isang <th> ay naglalagay ng label sa row o sa column na kinalalagyan nito.

<table>
  <caption>Weekly class schedule</caption>
  <tr>
    <th scope="col"></th>
    <th scope="col">Monday</th>
    <th scope="col">Wednesday</th>
  </tr>
  <tr>
    <th scope="row">9:00 AM</th>
    <td>Yoga</td>
    <td>Pilates</td>
  </tr>
  <tr>
    <th scope="row">6:00 PM</th>
    <td>Spin</td>
    <td>Yoga</td>
  </tr>
</table>

Dito, minamarkahan ng scope="col" ang mga header ng araw at ng scope="row" ang mga header ng oras. Ang gumagamit ng screen reader na dumating sa cell na "Pilates" ay naririnig ang dalawa: Wednesday, 9:00 AM, Pilates.

Para sa talagang di-regular na table, may pinagsamang cell, mga header na hindi malinis na nasa iisang row o column, hindi sapat ang scope lang. Iyan ang gamit ng mga attribute na headers at id: tahasang inililista ng bawat data cell ang mga id ng bawat header cell na nalalapat dito.

<th id="q3">Q3</th>
...
<td headers="q3">42</td>

Mas maraming trabaho ito sa pagsulat at pagpapanatili, kaya nga nakalaan lang ito sa mga table na talagang hindi kayang ilarawan ng scope, hindi ginagamit bilang default.

Ano talaga ang sinusuri ng axe-core sa isang table

Ang axe-core, ang parehong engine sa likod ng accessibility panel ng Chrome DevTools at ng scanner ng Axeazy, ay nagpapatakbo ng pitong magkakahiwalay na pagsusuri sa markup ng table. Isa lang sa mga ito ang may awtomatikong ayos ngayon.

Rule	Ano ang sinusuri	Daan ng ayos
scope-attr-valid	Hindi tunay na salita ang halaga ng scope, maling baybay o plural ng col/row/colgroup/rowgroup	Awtomatikong inaayos sa pamamagitan ng GitHub pull request, makitid: mga kilalang maling baybay lang
empty-table-header	May <th> pero walang teksto sa loob nito	Manwal
th-has-data-cells	May <th> pero walang data cell na gumagamit nito	Manwal
td-has-header	Walang kaugnay na header ang isang data cell	Manwal
td-headers-attr	Tumuturo ang headers attribute sa id na hindi tunay na header cell	Manwal
table-duplicate-name	Dalawang table sa iisang pahina ang may parehong accessible name	Manwal
table-fake-caption	Tekstong ginawang mukhang caption sa halip na tunay na elementong <caption>	Manwal

Pinalilinaw ng talahanayang iyon ang tapat na larawan. Ang istruktura ng table ay halos buong manwal na kategorya ng ayos. Ang tanging bahaging awtomatikong isinusulat ay ang pagwawasto ng halaga ng scope na naroon na pero mali ang baybay, tulad ng "cols" o "ROW " na ginagawang "col" o "row". Ang pagdaragdag ng nawawalang header, pagsulat ng caption, o pagtukoy kung aling headers id ang nasa aling cell ay lahat nangangailangan ng pag-unawa sa tunay na kahulugan ng table, at trabaho pa rin iyon ng tao.

Paano suriin ang sarili mong mga table

Hindi mo kailangang may naka-install na screen reader para mahuli ang pinakakaraniwang bersyon ng pagkakamaling ito.

1. Tingnan ang page source. I-right-click ang anumang table sa site mo at piliin ang View Page Source, o buksan ang DevTools at tingnan ang Elements panel. Hanapin ang <th. Kung gawa sa mga elementong <td> ang row na mukhang header, bumabagsak ang table na iyon.
2. Suriin ang halaga ng scope sa mga table na maraming direksyon. Kung may header ang table na tumatakbo parehong pahalang sa itaas at pababa sa gilid, kumpirmahing may scope="col" o scope="row" ang bawat <th>, at hindi lang makapal na estilo.
3. Pakinggan ito. Sa NVDA, ang paggalaw sa maayos na namarkahang table gamit ang table navigation (Ctrl+Alt+mga arrow key) ay nag-a-announce ng kaugnay na header kasama ng halaga ng bawat cell. Kung hilaw na numero lang ang naririnig mo na walang unang binibigkas na header, hindi maayos na nakaugnay ang table.
4. O magpatakbo ng scan sa halip na suriin ang bawat table. Sinusuri ng libreng scan ng Axeazy ang bawat table sa homepage mo laban sa lahat ng pitong rule sa itaas sa loob ng mga 60 segundo, kasama ng iba pang kategorya ng ayos na sakop nito.

Mga karaniwang pagkakamali

• Makakapal na <td> cell na pumapalit sa <th>. Ang pinakakaraniwang pagkabigo, at pinakamahirap mahuli ng mata, dahil mukhang tama ang lahat.
• Caption na isang linya lang ng makapal na teksto sa itaas ng table, sa halip na tunay na elementong <caption>. Hindi napapansin ng mga bisitang nakakakita ang pagkakaiba; napapansin ito ng screen reader.
• Maraming table sa iisang pahina na walang natatanging caption, kaya hindi alam ng gumagamit ng screen reader kung aling table ang alin kapag tumatalon sa pagitan nila.
• Paggamit ng table para lang sa visual na layout, hindi para sa tabular na datos. Sinusubukan pa ring i-announce ng screen reader ang mga ugnayan ng row at column na hindi dapat umiral kailanman, na mas nakalilito kaysa sa walang istruktura. Hinahawakan ng modernong CSS (Grid o Flexbox) ang layout nang walang ganitong side effect.
• Paggamit ng scope kapag talagang headers/id ang kailangan ng table. Inilalarawan lang ng scope ang simpleng ugnayan ng row o column. Ang table na may pinagsamang cell o mga header na hindi malinis na nasa iisang row o column ay nangangailangan ng mas tahasang pagpapares ng headers/id.

Ano ang maaayos ng Axeazy dito

Mas tapat pag-usapan ang kategoryang ito kaysa sa karamihan, dahil talagang maliit ang awtomatikong bahagi nito.

Ifa-flag ng scan ng Axeazy ang lahat ng pitong table rule sa itaas sa sandaling makita ang mga ito, ang parehong pagtuklas Axeazy man, Chrome DevTools, o anumang tool na nakabatay sa axe-core. Ang pagsulat ng ayos ang nagiging manwal. Ang tanging ayos na may kinalaman sa table na umaabot sa totoong GitHub pull request ngayon ay ang pagwawasto ng nakalagay nang halaga ng scope na kilalang maling baybay o plural; walang iba pa sa kategoryang ito ang may awtomatikong daan.

Wala ring daan sa WordPress plugin para sa mga ayos ng table sa ngayon. Ang tatlong instant na ayos ng libreng plugin ay sumasaklaw sa skip navigation, language attribute, at fallback ng alt text, wala sa mga ito ang humahawak sa markup ng table, at hindi rin umaabot ang mga bayad na tier sa istruktura ng table ngayon.

Hindi iyon puwang na nakalimutan ng kung sino. Ang pagpapasya kung dapat bang <th> ang isang <td>, o kung aling header talaga kabilang ang isang di-regular na cell, ay nangangailangan ng pag-unawa sa kung ano ang sinusubukang ipahayag ng table. Ang script na mali ang hula rito ay tahimik na magpapakahulugan nang mali sa datos sa mismong mga taong umaasa sa markup para maunawaan ito, na mas masama kaysa iwanan itong naka-flag para tama itong ayusin ng tao. Tingnan ang buong paghahati ng mga kategorya ng ayos.

Mga madalas itanong

Kailangan ko ba ng scope attribute sa bawat header cell?

Hindi. Para sa simpleng table na may header lang sa unang row o lang sa unang column, sapat na ang payak na <th>. Nagiging kailangan ang scope kapag may header ang table na tumatakbo sa dalawang direksyon nang sabay, tulad ng iskedyul na may mga araw sa itaas at mga oras sa gilid.

Ano ang pagkakaiba ng scope at headers/id?

Inilalarawan ng scope ang simpleng ugnayang may isang direksyon, isang header na nalalapat sa buong row, column, o grupo ng mga row o column. Mas tahasan ang headers/id: inililista ng bawat data cell kung aling mga header cell ang nalalapat dito sa pamamagitan ng id. Gamitin ang scope para sa regular na table na hugis-grid at ang headers/id para lang sa di-regular na table na may pinagsamang cell o mga header na hindi malinis na nasa iisang row o column.

Awtomatikong inaayos ba ng Axeazy ang nawawalang header ng table?

Karamihan ay hindi, at sulit na maging tuwiran dito. Ang tanging ayos na may kinalaman sa table na may gumaganang awtomatikong daan ngayon ay ang pagwawasto ng halaga ng scope na naroon na pero mali ang baybay. Ang pagdaragdag ng nawawalang header, pagsulat ng tunay na caption, o pag-map ng headers sa tamang id ay lahat nangangailangan ng pag-unawa sa kahulugan ng table, kaya nananatili silang manwal na item ng pagsusuri.

Kailangan ko ba ng caption sa bawat table?

Hindi ito mahigpit na kinakailangan ng WCAG 1.3.1 mismo, pero talagang kapaki-pakinabang, lalo na kapag higit sa isang table ang pahina. Binibigyan ng caption ang table ng accessible name nito, para malaman ng gumagamit ng screen reader na tumatalon sa pagitan ng mga table kung alin ang nasa harap niya.

Paano ang mga table na ginagamit para sa layout ng pahina sa halip na datos?

Iwasan hangga't maaari. Sinusubukan pa ring i-announce ng screen reader ang mga ugnayan ng row at column sa layout table, na lumilikha ng kalituhang hindi iiral kung payak na CSS layout ang gamit. Kung hindi agad matatanggal ang lumang layout table, ang pagmamarka rito ng role="presentation" ay nagsasabi sa assistive technology na laktawan nang buo ang semantics ng table.

Mga sanggunian

• W3C: Pag-unawa sa SC 1.3.1, Info at mga Ugnayan
• W3C Tables Tutorial: markup ng header at data cell
• W3C Technique H63: Paggamit ng scope attribute
• W3C Technique H43: Paggamit ng id at headers attribute para sa kumplikadong data table