Istruktura ng landmark: paano nagna-navigate ang mga screen reader

Hindi bumabasa ang mga gumagamit ng screen reader ng pahina mula itaas hanggang ibaba na parang nag-i-scroll sa dokumento, tumatalon sila sa pagitan ng mga may-pangalang rehiyon, header, navigation, pangunahing nilalaman, footer, kung paanong ang mata ng taong nakakakita ay dumidiretso sa menu bar nang hindi binabasa ang lahat ng nasa itaas nito. Tinatawag na landmark ang mga rehiyong iyon, at kung wala ang mga ito, nakukulong ang gumagamit ng screen reader sa pagbasa ng lahat nang sunud-sunod, na walang paraan para dumiretso sa talagang pinuntahan niya.

Mga pangunahing punto

• Ang mga landmark ay semantic na rehiyon ng HTML, <header>, <nav>, <main>, <footer>, <aside>, na nagbibigay sa pahina ng di-nakikitang mapa. Maaaring tumalon ang screen reader nang diretso sa pagitan ng mga ito.
• Kung walang landmark, kailangang pakinggan ng gumagamit ng screen reader ang lahat nang sunud-sunod, ang parehong navigation menu na inuulit sa bawat pahina, bawat pagkakataon, na walang paraan para laktawan.
• Dapat may eksaktong isang <main> ang pahina. Ang higit sa isa ay nakalilito sa landmark navigation at agad na bumabagsak sa awtomatikong scan.
• Kailangan ng label ang maraming <nav> para mapag-iba. Ang dalawang navigation region na parehong ina-announce na "navigation" lang ay walang paraan para malaman ng user kung alin ang alin.
• Ang pagbalot sa lahat ng generic na <div> sa halip na semantic na elemento ay tuluyang nag-aalis ng mapa. Walang role ang <div>, kaya walang matatalunan ang screen reader.

Eksaktong mga mensahe ng error at paano ayusin ang mga ito

Kung dito ka dinala ng isang scanner, ito ang mga mensaheng iniuulat ng axe-core, ang open-source na engine sa likod ng karamihan ng awtomatikong accessibility checker, para sa mga problema sa landmark. Tumutugma ang pananalita sa axe-core 4.11 at nananatiling Ingles gaya ng lumalabas sa mga report.

"Document does not have a main landmark"

Ito ang rule na landmark-one-main ("dapat may isang main landmark ang dokumento"). Walang elementong <main> ang pahina at walang role="main". Balutin ang pangunahing nilalaman ng pahina sa iisang <main>, at panatilihin sa labas nito ang header at footer ng site.

"All page content should be contained by landmarks"

Ito ang rule na region; sa elementong bumabagsak, nakasulat ang "Some page content is not contained by landmarks". May teksto, larawan o kontrol na nasa labas ng bawat <header>, <nav>, <main> at <footer>. Ilipat ang bawat isa sa landmark na kinabibilangan nito, kadalasan ay <main>.

"Document should not have more than one main landmark"

Ito ang rule na landmark-no-duplicate-main. Dalawang elemento sa pahina ang kumikilos bilang <main>, sa tag man o sa role="main". Itago ang may hawak ng tunay na nilalaman ng pahina at gawing <div> o may-label na <section> ang isa pa.

"Landmarks should have a unique role or role/label/title (i.e. accessible name) combination"

Ito ang rule na landmark-unique. Ang dalawang landmark na magkapareho ng uri, kadalasan ay dalawang <nav>, ay walang pangalan o parehong pangalan. Bigyan ang bawat isa ng sariling aria-label, tulad ng aria-label="Main" at aria-label="Footer".

"Main landmark should not be contained in another landmark"

Ito ang rule na landmark-main-is-top-level. May <main> na nakapugad sa loob ng <header>, <nav>, <aside> o <footer>. Ilabas ito para nasa pinakamataas na antas ng pahina.

Ang saklaw kung alin sa mga ito ang awtomatikong inaayos ng Axeazy at alin ang naghihintay ng pag-apruba mo ay nasa "Ano ang maaayos ng Axeazy dito" sa ibaba. Isa ang mga landmark sa dalawang paraan ng paggalaw ng mga gumagamit ng screen reader sa pahina; ang isa pa ay ang mga heading, na tinalakay sa mga pagkakamali sa istruktura ng heading na sumisira sa accessibility.

Ano talaga ang ginagawa ng mga landmark

Ang mga landmark ay semantic na elemento ng HTML na nagmamarka ng mga pangunahing rehiyon ng pahina: <header> para sa itaas na bahagi, <nav> para sa mga navigation menu, <main> para sa aktuwal na nilalamang pinuntahan para basahin, <footer> para sa nasa ibaba, at <aside> para sa nilalamang may di-tuwirang kaugnayan tulad ng sidebar.

May dalang implied role ang bawat isa na awtomatikong nakikilala ng screen reader. Iyan ang nagpapatingkad sa kanila bilang landmark at hindi basta lalagyan lang: kayang ipakita ng screen reader ang listahan ng bawat landmark sa pahina at hayaan ang user na tumalon nang diretso sa alinman, ang parehong shortcut na nakukuha ng taong nakakakita nang libre sa isang sulyap sa visual layout ng pahina.

Nagkakaiba ang mga shortcut ng screen reader ayon sa software pero pareho ang ideya sa lahat: umiikot ang mga gumagamit ng NVDA sa mga landmark gamit ang D key, ang mga gumagamit ng JAWS gamit ang R, at ang mga gumagamit ng VoiceOver sa pamamagitan ng rotor. Pinapayagan ng tatlo na lampasan ang paulit-ulit na header at navigation menu papunta sa aktuwal na nilalaman, ang menu ring narinig na nila sa bawat ibang pahina ng site.

Bakit mas mahalaga ito kaysa sa hitsura

Isipin mong pinakikinggan mo ang bawat website na binabasa sa iisang tuloy-tuloy na daloy, logo, buong navigation menu, mga announcement banner, saka pa lang ang aktuwal na nilalaman ng pahina, sa bawat pahina, na walang paraan para laktawan. Iyan ang karanasan kapag walang landmark. Ang taong bumibisita sa sampung pahina ng produkto sa online store ay naririnig ang buong header at navigation nang sampung magkakahiwalay na beses bago maabot ang talagang gusto niyang ihambing.

Ginagawa ng mga landmark na tunay na mapa ang tuwid na linyang iyon. Ito ang WCAG 1.3.1, Info at mga Ugnayan, sa Level A: kailangang matukoy sa pamamagitan ng programa ang istruktura at mga ugnayan ng pahina, hindi lang halata sa paningin. Kaugnay rin ito ng 2.4.1, Bypass Blocks, ang kinakailangang may paraan ang mga user na laktawan ang paulit-ulit na nilalaman; isa ang mga landmark sa karaniwang paraan para matugunan ito.

Mga karaniwang pagkakamaling sumisira sa mapa

Pagbalot sa lahat ng <div> sa halip na semantic na elemento. Walang role ang <div>. Sa paningin, maaari itong magmukhang kapareho ng wastong <header> o <nav>, pero walang matatalunan ang screen reader, hindi umiiral ang landmark.

<!-- Bumabagsak: header sa paningin, di-nakikita ng landmark navigation -->
<div class="header">
  <div class="logo">Site Name</div>
</div>

<!-- Pumapasa: tunay na landmark na matatalunan ng screen reader -->
<header>
  <a href="/tl" class="logo">Site Name</a>
</header>

Higit sa isang <main> sa pahina. Eksaktong isa lang ang pinapayagan ng HTML specification. Ang pangalawa ay hindi lang lumalabag sa patakaran, aktibo itong nakalilito sa landmark navigation at bumabagsak sa awtomatikong scan.

Maraming <nav> na walang label. Kung may pangunahing navigation menu ang pahina at hiwalay na footer navigation, ina-announce ng screen reader ang dalawa bilang "navigation" lang, na walang paraan para mapag-iba, maliban kung may natatanging label ang bawat isa.

<!-- Bumabagsak: parehong ina-announce nang magkapareho, walang label na "navigation" -->
<nav>...</nav>
<nav>...</nav>

<!-- Pumapasa: bawat isa ay ina-announce nang naiiba -->
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>

Pagpapaloob ng <header> o <footer> sa <article> o <section>. Tuluyan silang nawawalan ng landmark role kapag ganito ang pagkakapugad; nakikilala lang silang landmark sa antas ng pahina kapag nasa pinakamataas na antas ng dokumento, hindi sa loob ng ibang rehiyon ng nilalaman.

Paggamit ng <section> na walang label. Nagiging tunay na landmark lang ang <section> kapag binigyan ng accessible name sa pamamagitan ng aria-label o aria-labelledby. Ang <section> na walang label ay hindi nagrerehistro bilang landmark.

Paano suriin ang sarili mong site

Hindi mo kailangang may naka-install na screen reader para mahuli ang karamihan nito.

1. Tingnan ang page source o buksan ang Elements panel ng DevTools. Hanapin ang <div class="header"> o katulad, ang mga generic na lalagyang pumapalit sa tunay na landmark na elemento ang pinakakaraniwang pagkabigo.
2. Bilangin ang mga <main> mo. Dapat ay eksaktong isa bawat pahina.
3. Suriin kung may label ang bawat <nav>, kung higit sa isa ang nasa pahina.
4. O magpatakbo ng scan sa halip na suriin ang bawat elemento. Sinusuri ng libreng scan ng Axeazy ang buong istruktura ng landmark ng pahina sa loob ng mga 60 segundo, kasama ang iba pang kategorya ng ayos na sakop nito.

Ano ang maaayos ng Axeazy dito

Malinis na nahahati sa dalawang uri ng pagbabago ang kategoryang ito, at isa lang ang maaaring mangyari nang hindi nagtatanong muna.

Ang pagdaragdag ng nawawalang label ay purong dagdag, walang gumagalaw, walang pinapalitan ng pangalan, kaya awtomatikong inaayos ito ng Axeazy: ang walang-labeled na ulilang rehiyon ng nilalaman ay binibigyan ng label na hango sa id, class o pangalan ng tag nito, at ang mga duplicate na landmark na walang natatanging label ay dinadagdagan ng isa. Parehong totoo at gumaganang awtomatikong ayos ang dalawa.

Ang pag-aayos muli ng istruktura ng kasalukuyang landmark, pagpapalit ng duplicate na <header> sa simpleng <div>, paglilipat ng nakapugad na <main> sa pinakamataas na antas, pag-aayos ng <nav> na nakabaon kung saan hindi dapat, ay nakikitang pagbabago sa istruktura, hindi tahimik na dagdag. Kinukwenta ng Axeazy ang tamang ayos para sa mga ito, pero walang isinusulat hanggang tahasang aprubahan mo o ng developer mo sa dashboard. Sinadyang hangganan iyan: ang pagdaragdag ng di-nakikitang label ay hindi nangangailangan ng pahintulot, ang pagbabago sa aktuwal na istruktura ng pahina mo ay nangangailangan.

Mga madalas itanong

Ilang elementong <main> ang dapat mayroon ang isang pahina?

Eksaktong isa. Isa lang ang pinapayagan ng HTML specification, at ang higit sa isa ay sumisira sa landmark navigation para sa mga gumagamit ng screen reader at bumabagsak sa awtomatikong accessibility scan.

Kailangan ko bang lagyan ng label ang bawat <nav> sa pahina ko?

Kung higit sa isa lang. Hindi kailangan ng label ang nag-iisang navigation region, ina-announce ito ng screen reader bilang "navigation" at malinaw iyon. Kapag dalawa o higit pa, kailangan ng bawat isa ng natatanging label tulad ng aria-label="Main" o aria-label="Footer" para mapag-iba ng mga user.

Awtomatiko bang lumilikha ng landmark ang paggamit ng <section>?

Hindi. Nagiging landmark lang ang <section> kapag may accessible name na ito, na ibinigay sa pamamagitan ng aria-label o aria-labelledby. Kung wala, generic na lalagyan lang ito, walang pinagkaiba sa <div> sa usapin ng mga landmark.

Maaari ko bang ipaloob ang <header> sa loob ng <article>?

Maaari, pero nawawala ang page-level na landmark role nito kapag ganoon ang pagkakapugad. Nakikilala lang ang <header> o <footer> bilang top-level na landmark kapag nasa mismong antas ng pahina, hindi sa loob ng ibang rehiyon ng nilalaman.

Napapadali ba ang pag-navigate sa site ko sa pag-aayos lang ng mga landmark?

Walang iisang ayos na sumasaklaw sa lahat. Isang partikular na problema ang nilulutas ng mga landmark, ang pagpapahintulot sa mga user na tumalon sa pagitan ng mga pangunahing rehiyon sa halip na basahin ang lahat nang sunud-sunod. Maaari pa ring may ibang problema sa navigation ang pahina, sirang istruktura ng heading o nakalilitong tab order, na kailangan ng sariling hiwalay na pagsusuri.

Mga sanggunian

• W3C: Pag-unawa sa SC 1.3.1, Info at mga Ugnayan
• W3C: Pag-unawa sa SC 2.4.1, Bypass Blocks