Mga pagkakamali sa istruktura ng heading na sumisira sa accessibility

Ang mga heading ang paraan ng karamihan ng mga gumagamit ng screen reader para maghanap ng mga bagay sa pahina. Sa 2024 screen reader survey ng WebAIM, 71.6% ang nagsabing unang nagna-navigate sila sa mahabang pahina gamit ang mga heading nito, kaya sinisira ng sirang heading outline ang pangunahing sistema ng navigation ng pahina. Limang pagkakamali ang nagdudulot ng karamihan ng pinsala: pekeng heading, nilaktawang antas, heading na pinili dahil sa laki, walang laman na heading, at nawawala o nakalilitong H1. Mas makitid ang kaugnayan sa SEO kaysa sa inaangkin ng karamihan ng tool, at saklaw ng post na ito kung ano mismo iyon.

Mga pangunahing punto

• Ginagamit ng mga gumagamit ng screen reader ang mga heading na parang talaan ng nilalaman. 71.6% ang unang nagna-navigate sa mahabang pahina gamit ang mga heading, at 88.8% ang nakakakita na napaka o medyo kapaki-pakinabang ang mga antas ng heading (WebAIM Screen Reader User Survey #10).
• Ang heading ay tunay na elemento ng HTML, hindi itsura. Ang makapal at mas malaking teksto sa isang talata ay di-nakikita bilang heading ng screen reader, kahit ano pa ang itsura nito.
• Napakakaraniwan ng mga pagkakamali sa heading. Sa pagsusuri ng WebAIM noong 2026 sa nangungunang isang milyong home page, 41.8% ang may kahit isang nilaktawang antas ng heading, at 7.5% ang walang heading kahit isa.
• Hindi nagra-rank ang Google ayon sa pagkakasunod-sunod ng heading. Sinabi ng mga tagapagsalita nito sa search na maayos ang rank ng pahina kahit walang H1 o marami, at hindi salik sa ranking ang pagkakasunod-sunod ng heading. Ang binabasa ng Google ay kung ano ang sinasabi ng heading, hindi kung anong antas ito.
• Awtomatikong inaayos ng Axeazy ang ilan dito at ang ilan ay kapag aprubado mo lang. Purong dagdag ang nawawalang H1 o walang laman na heading. Binabago ng pag-aayos muli ng kasalukuyang mga heading ang istruktura ng pahina mo, kaya naghihintay ito ng pag-apruba. Ang pekeng heading na gawa sa may-estilong teksto ay nangangailangan ng tao.

Ano ang ginagawa ng mga heading para sa gumagamit ng screen reader

Ang mga bisitang nakakakita ay nag-i-scan ng pahina sa pamamagitan ng pagtingin. Sinasabi sa kanila ng mas malaki at mas makapal na teksto kung saan nagsisimula ang isang seksyon. Nakukuha ng gumagamit ng screen reader ang parehong impormasyon kung minarkahan lang ito ng pahina bilang heading. Saka nila maaaring ilabas ang listahan ng bawat heading sa pahina, o tumalon nang diretso sa susunod gamit ang isang key, gaya ng mata ng nagbabasang nakakakita na tumatalon pababa sa pahina.

Kaya nasa sentro ng buong kategoryang ito ng trabaho sa accessibility ang mga heading. Ang mga antas ng heading, H1 hanggang H6, ay naghahatid din ng hierarchy: ang H2 ay nasa ilalim ng H1 sa itaas nito, at ang H3 ay nasa ilalim ng H2 sa itaas nito. Kapag tama ang outline na iyon, malalaman ng user kung ano ang pangunahing seksyon at ano ang subseksyon nang hindi nagbabasa ng anuman.

Limang pagkakamali sa heading na sumisira sa outline

1. Makapal na teksto o may-estilong talatang nagpapanggap na heading

Ito ang pinakakaraniwang pagkabigo at pinakamahirap makita ng mata, dahil mukhang tamang-tama.

<!-- Bumabagsak: mukhang heading, ina-announce bilang payak na teksto -->
<p style="font-size: 24px; font-weight: bold;">Our Services</p>

<!-- Pumapasa: tunay na heading, na-estilo gamit ang CSS -->
<h2 class="section-title">Our Services</h2>

Umiiral ang WCAG 1.3.1, Info at mga Ugnayan, para mismo rito: ang istrukturang halata sa paningin ay dapat ding magamit ng assistive technology, hindi lang sa pamamagitan ng estilo.

2. Paglaktaw ng mga antas

<!-- Bumabagsak: tumatalon mula H1 diretso sa H3 -->
<h1>Maple Street Bakery</h1>
<h3>Today's Specials</h3>

<!-- Pumapasa: walang nilaktawang antas -->
<h1>Maple Street Bakery</h1>
<h2>Today's Specials</h2>

Ang nilaktawang antas ay nag-iiwan sa user na nagtataka kung may na-miss siyang seksyon. Ang H1 na sinundan ng H3 ay nagpapahiwatig na may H2 sa kung saan, at wala naman.

3. Pagpili ng antas dahil sa laki

May pumipili ng H4 dahil masyadong malaki ang tingin sa H2. Nasisira ang outline para lutasin ang problemang visual. Ang ayos ay panatilihin ang tamang antas at baguhin ang itsura nito gamit ang CSS.

<h2 class="small-heading">Opening Hours</h2>

.small-heading { font-size: 1.1rem; }

4. Mga walang laman na heading

<!-- Bumabagsak: ina-announce bilang heading na walang laman -->
<h2></h2>

Karaniwang galing ang mga walang laman na heading sa template o page builder na nag-iiwan ng elemento pagkatapos mabura ang teksto nito. Ina-announce ng screen reader ang heading, at walang naririnig ang user.

5. Walang H1, o maraming nagpapaligsahang H1

Dapat may isang malinaw na H1 ang bawat pahina na nagsasabi kung ano ang tungkol sa pahina, dahil tradisyonal na tinatrato ito ng mga screen reader bilang pangunahing tagakilala ng pahina. Best practice ito para sa accessibility, hindi mahigpit na pagkabigo sa WCAG, at ang pahinang may higit sa isang H1 ay hindi awtomatikong sira. Sulit itong ayusin dahil pinalalabo nito ang outline, lalo na kapag inuulit ng template ang H1 sa logo o banner.

Gaano kakaraniwan ang mga pagkakamaling ito

Ipinapakita ng taunang pagsusuri ng WebAIM sa nangungunang isang milyong home page, na isinagawa noong Pebrero 2026, kung gaano ito kalawak.

Problema sa heading	Bahagi ng mga home page
Kahit isang nilaktawang antas ng heading	41.8%
Higit sa isang H1	18.1%
Walang heading kahit isa	7.5%

Inilalarawan ng mga numerong ito ang malalaki at propesyonal na ginawang site. Ang site ng maliit na negosyong gawa sa theme o page builder ay kasing-tsansang magkaroon ng parehong problema, o higit pa.

Ano talaga ang binibigyang-halaga ng SEO

Dito nagpapalabis ang maraming nilalaman tungkol sa accessibility, kaya sulit na maging tiyak.

Paulit-ulit nang sinabi ng Google na hindi salik sa ranking ang pagkakasunod-sunod ng heading. Sinabi ng mga tagapagsalita nito sa search na maaaring maayos ang rank ng pahina kahit walang H1 o may lima, at kapaki-pakinabang ang semantikong pagkakasunod-sunod ng H1, H2, H3 para sa accessibility pero hindi ito malaking nakaaapekto sa ranking. Kaya ang nilaktawang antas ng heading ay hindi nagkakahalaga ng ranking mo.

Ang binabasa ng Google ay kung ano ang sinasabi ng heading. Ang heading na tulad ng "Oras ng bukas at lokasyon" ay nagsasabi sa search engine kung tungkol saan ang seksyon sa ibaba nito, gaya ng pagsasabi nito sa tao. Iyan ang tunay na pagsasapawan ng accessibility at SEO rito: ang mga naglalarawang heading na nagpapangalan sa seksyon nila ay naglilingkod sa dalawang audience.

Kaya ayusin ang istruktura ng heading mo para sa dahilang accessibility, na totoo at nasusukat. Ituring ang anumang benepisyo sa SEO bilang side effect ng pagsusulat ng malinaw at naglalarawang mga heading, hindi bilang dahilan para gawin ito. Ang istrukturang madaling i-skim ng mga tao ay malamang na mas madali ring i-parse ng mga awtomatikong sistema, pero walang nagkumpirma nito bilang epekto sa ranking, at hindi ito dapat ipangako bilang ganoon.

Paano suriin ang sarili mong mga heading

1. Tingnan ang outline gamit ang screen reader. Sa NVDA, pindutin ang Insert+F7 at piliin ang listahan ng mga heading, o pindutin ang H para tumalon mula heading hanggang heading. Sa VoiceOver, buksan ang rotor gamit ang VO+U at piliin ang Headings. Maririnig mo ang outline gaya ng pagkarinig ng user.
2. Tingnan ang page source. Hanapin ang <h para makita ang bawat heading at antas nito, at suriin kung ang anumang mukhang heading ay talagang <p> o <div>.
3. Basahin ang outline mula itaas hanggang ibaba. May katuturan ba ito kung wala ang pahina sa paligid? Nakaayos ba ang mga antas? May walang laman ba?
4. O magpatakbo ng scan. Sinusuri ng libreng scan ng Axeazy ang istruktura ng heading ng pahina sa loob ng mga 60 segundo, kasama ng iba pang kategorya ng ayos na sakop nito. Dalawang kaugnay na pagsusuri sa istruktura ang saklaw ng gabay sa header ng table at ng gabay sa landmark.

Ano ang maitutulong ng Axeazy dito

Nahahati sa tatlong grupo ang mga ayos sa heading, batay sa kung gaano nila binabago ang pahina mo.

Rule	Ano ang sinusuri	Daan ng ayos
page-has-heading-one	Walang H1 ang pahina	Awtomatikong inaayos, purong dagdag, best-effort
empty-heading	Walang laman ang elemento ng heading	Awtomatikong inaayos, purong dagdag, best-effort
heading-order	Nilalaktawan o hindi nakaayos ang mga antas ng heading	Kinukuwenta, pero naghihintay ng pag-apruba mo
p-as-heading	May-estilong tekstong kumikilos bilang heading	Manwal na pagsusuri

Ang pagdaragdag ng nawawalang H1 o pag-asikaso sa walang laman na heading ay hindi gumagalaw o nagpapalit ng pangalan ng anuman, kaya isinusulat ito nang hindi nagtatanong muna. Binabago ng pag-aayos muli ng kasalukuyang mga heading kung paano nakabalangkas ang pahina mo, kaya kinukuwenta ng Axeazy ang ayos pero walang isinusulat hangga't hindi ito inaaprubahan mo o ng developer mo. Ang talatang ginawang mukhang heading ay nangangailangan ng tao, dahil ang taong nakakakilala sa pahina lang ang makapagsasabi kung ano ang dapat na maging teksto.

Tatlo sa mga ito ay best-practice na pagsusuri sa axe-core, hindi pormal na pagkabigo sa WCAG. Ang problema ng pekeng heading ang pinakamalapit sa tunay na isyu sa WCAG 1.3.1.

Nakadepende sa platform mo kung paano makararating sa site mo ang ayos. Ang mga React at Next.js na site na nakakonekta sa GitHub ay nakakakuha ng totoong pull request. Ang mga Shopify store ay nakakakuha ng resulta ng scan at gabay na checklist sa halip na awtomatikong pagbabago sa mga template ng theme. Sa WordPress, hindi kasama ang mga ayos sa heading sa tatlong instant na ayos ng libreng plugin, kaya sinusunod din nito sa kasalukuyan ang daan ng checklist. Tingnan ang buong paghahati ng mga kategorya ng ayos.

Mga madalas itanong

Dapat bang isang H1 lang ang pahina?

Magtangka ng isa. Ang iisang H1 na nagpapangalan sa paksa ng pahina ay nagbibigay sa mga gumagamit ng screen reader ng malinaw na panimulang punto. Hindi pagkabigo sa WCAG ang maraming H1 at hindi ito pinaparusahan ng Google, pero ang iisang malinaw na H1 ay nagpapanatiling madaling sundan ang outline.

Nakasasama ba sa SEO ang paglaktaw ng mga antas ng heading?

Sinabi ng Google na hindi salik sa ranking ang pagkakasunod-sunod ng heading, kaya ang mga nilaktawang antas ay hindi nagkakahalaga ng ranking mo. Ang pinsala ay sa mga gumagamit ng screen reader, na umaasa sa mga antas para maunawaan ang outline.

Maaari ba akong gumamit ng H4 dahil mukhang tama ang laki?

Panatilihin ang tamang antas at baguhin ang laki gamit ang CSS. Ang pagpili ng antas ng heading dahil sa default na itsura nito ay sumisira sa outline para lutasin ang problemang visual.

Binabanggit ba ang mga problema sa heading sa mga ADA demand letter?

Wala ang istruktura ng heading sa iilang kategoryang pinakamadalas banggitin sa totoong demand letter, na karaniwang nakatuon sa alt text, skip navigation, language attribute, label ng form, at pangalan ng link o button. Totoong hadlang pa rin ito para sa mga taong nagna-navigate gamit ang mga heading, at sulit ayusin dahil sa sarili nitong halaga.

Gagawin bang accessible ng pag-aayos sa mga heading ang site ko?

Walang iisang ayos na gumagawa niyon. Ang mga heading ay isang mahalagang piraso kung paano nahahanap ng tao ang daan sa pahina, at ang pahina ay maaaring may malinis na outline pero may iba pang isyu, tulad ng nawawalang label ng form o button na hindi maabot, na nangangailangan ng sariling pagsusuri.

Mga sanggunian

• WebAIM: mga resulta ng Screen Reader User Survey #10
• WebAIM: The WebAIM Million, ulat ng 2026 tungkol sa mga nangungunang home page
• W3C: Pag-unawa sa SC 1.3.1, Info at mga Ugnayan
• W3C: Pag-unawa sa SC 2.4.6, Headings at Labels
• Search Engine Journal: Google tungkol sa mga H1 heading at SEO
• Stan Ventures: paglilinaw ng Google tungkol sa pagkakasunod-sunod ng heading at SEO