Libreng tool para sa Accessibility

Libreng Website Accessibility Checker

Ilagay ang iyong address at susubukan namin ang page na iyon at hanggang apat na pangunahing page sa totoong browser laban sa mga patakaran ng WCAG 2.2 Level A at AA. Bawat hadlang ay may kasamang elemento, page, screenshot at paliwanag kung sino ang naaapektuhan nito.

Libre. Tine-test ang hanggang limang pangunahing page sa loob ng halos isang minuto.

Ano ang sinusuri ng tool na ito

  • Limang page na kumakatawan sa iyong site

    Ang page na inilagay mo, at hanggang apat na page na pinili mula sa mga link nito ayon sa uri ng site. Sa isang online store, ibig sabihin nito ay isang collection, isang produkto, ang cart at isang content page; sa ibang site, mga page gaya ng pricing, contact, isang artikulo o services. Paulit-ulit ang mga template, kaya kadalasang ipinapakita ng isang product page ang mga problema ng lahat ng iba pa.

  • Mga patakaran ng WCAG sa na-render na page

    Bawat page ay nilo-load sa Chromium sa 1366 × 900, at pinapatakbo ng axe-core, ang open-source na rules engine ng Deque, ang mga patakaran nito para sa WCAG 2.0, 2.1 at 2.2 Level A at AA pagkatapos tumakbo ang mga script ng page. Dahil dito, nahuhuli ang mga problemang nalilikha lang ng isang theme o app kapag nabuo na ang page sa browser.

  • Impact at success criteria

    Bawat bumagsak na patakaran ay nagpapakita ng impact nito (critical, serious, moderate o minor), ng mga WCAG success criteria na katapat nito, at kung ilang elemento at page ang apektado.

  • Ang bumagsak na elemento, naka-outline

    Ang HTML ng isang halimbawang elemento at screenshot ng page na naka-outline ang elementong iyon, para mahanap mo o ng iyong developer ito sa template nang hindi nanghuhula.

  • Mga item na kailangang pagpasyahan ng tao

    Kapag may nakita ang axe-core na hindi nito kayang pagpasyahan, gaya ng text sa ibabaw ng background image na hindi nito masukat ang contrast, inililista ang item bilang kailangang suriin (needs review). Hindi ito kailanman ibinibilang na pagkabigo.

  • Pagsubok gamit ang keyboard

    Sa unang page, pinipindot namin ang Tab nang 40 beses at itinatala kung saan napupunta ang focus: kung gumagalaw ba ito, kung naiipit ba ito sa isang loop (madalas sa loob ng cookie banner), kung skip link ba ang unang hinto, at kung aling mga naka-focus na elemento ang walang nakikitang focus indicator. Heuristic ang huling check na iyon, kaya ipinapakita ito bilang kailangang suriin (needs review).

Ano ang hindi nito kayang suriin

  • Marinig kung ano ang inaanunsyo ng screen reader. Makukumpirma ng software na may pangalan ang isang button, pero hindi kung may saysay ang pangalang iyon kapag binasa nang malakas.
  • Husgahan ang captions, transcript o audio description ng video at audio.
  • Suriin ang mga cognitive at content criteria, gaya ng kung malinaw ang mga tagubilin o kung natutulungan ng mga error message ang mga tao na maitama ang mali.
  • Subukan ang mga page na nasa likod ng login, password o bot protection, o dumaan sa checkout.
  • Sabihin sa iyo kung sumusunod ang iyong site sa WCAG o sa anumang batas. Bahagi lang ng mga problema ang nahahanap ng mga awtomatikong patakaran; tao ang kailangan para sa iba pa.

Bakit ito mahalaga

Kadalasang maliliit na pagkakamali sa template ang mga hadlang sa accessibility, pero malaki ang epekto. Ang cart button na icon lang at walang accessible name ay inaanunsyo bilang “button” lang, kaya hindi malaman ng gumagamit ng screen reader kung ano ang ginagawa nito. Ang gray na text sa puting background na hindi umaabot sa 4.5:1 na contrast ratio ay mahirap basahin para sa maraming taong malabo ang paningin, at para sa sinumang gumagamit ng phone sa ilalim ng matinding sikat ng araw.

Dahil lumalabas ang parehong header, product card at footer sa bawat page, kayang alisin ng iisang ayos sa template ang daan-daang pagkabigo nang sabay-sabay. Kaya naka-grupo ang mga resulta ayon sa patakaran, may bilang ng mga elemento at page, sa halip na ilista ang bawat pagkakataon bilang hiwalay na problema.

May legal na aspeto rin ang accessibility sa maraming bansa. Hindi masasabi ng isang scan kung saklaw ka ng isang batas o kung sumusunod ka rito. Ang ibinibigay nito ay may-petsang listahan ng mga totoong hadlang sa sarili mong mga page, na praktikal na simula anuman ang sitwasyon.

Paano basahin ang mga resulta

Kritikal
Maaaring tuluyang pigilan ng hadlang ang ilang tao na magamit ang elemento, halimbawa ang form field na walang label o button na walang pangalan. Unahin itong ayusin.
Seryoso
Pinahihirap nang husto ng hadlang ang isang gawain para sa ilang tao, gaya ng body text na hindi pumapasa sa contrast ratio.
Katamtaman
Nagdudulot ng hirap o kalituhan ang hadlang, pero kadalasan ay may paraan ang mga tao para malampasan ito.
Maliit
Maliit na problema o abala. Sulit pa ring ayusin sa susunod na pag-edit mo sa template na iyon.
Mga WCAG success criterion
Ang mga numero sa tabi ng isang patakaran, gaya ng 1.1.1 o 1.4.3, ay ang mga criterion na sinusubok nito. Ang patakarang walang nakalistang criterion ay best practice at hindi requirement ng WCAG.
Mga elemento at page
Kung ilang elemento ang bumagsak sa patakaran at sa ilan sa mga sinubukang page. Ang patakarang bumabagsak sa bawat page ay kadalasang nasa isang shared na bahagi gaya ng header, menu o footer.
Kailangang suriin
May nakita ang axe-core na hindi nito napagpasyahan. Tingnan mo mismo ang elemento: maaaring pumasa ito o bumagsak. Hindi ibinibilang na pagkabigo ang mga item na ito.
Nakakulong na focus
Paulit-ulit na umiikot ang Tab sa iisang ilang elemento. Kung bahagi ang mga ito ng cookie banner, maaaring hindi maabot ng mga gumagamit ng keyboard ang natitirang bahagi ng page.
Hindi gumagalaw ang focus (Focus doesn’t move)
Walang na-focus kahit kailan sa pagpindot ng Tab. Maaaring gawa sa div o span na elemento ang mga link at button, o may script na humaharang sa key.
Skip link
Kung link na “Lumaktaw sa nilalaman” (Skip to content) ba ang unang hinto ng Tab. Kung wala nito, kailangang dumaan ng mga gumagamit ng keyboard sa buong header sa bawat page. Maaari ring matugunan ng mga landmark at heading ang WCAG 2.4.1 Bypass Blocks.
Walang nakikitang focus indicator
Mga naka-focus na elemento kung saan wala kaming nakitang outline, box shadow o underline. Maaari pa ring makita ang ibang istilo, gaya ng pagbabago ng kulay, kaya i-Tab mo mismo ang mga ito para makumpirma.

Paano ayusin ang mga pinakakaraniwang problema

  • Text na hindi pumapasa sa contrast ratio

    Kailangan ng normal na text ng hindi bababa sa 4.5:1 laban sa background nito, at 3:1 naman para sa malaking text (mga 24 px, o mga 18.7 px kung bold). Palitan ang kulay sa settings ng iyong theme o sa design tokens sa halip na isa-isa sa bawat elemento, at pagkatapos ay suriin muli ang placeholder text, ang mga hover state at ang text sa ibabaw ng mga larawan.

  • Mga larawang walang alt text

    Bigyan ang bawat makabuluhang larawan ng alt attribute na nagsasabi kung ano ang ipinapakita o ginagawa nito, gaya ng pangalan at kulay ng produkto. Ang mga dekoratibong larawan ay binibigyan ng walang lamang alt (alt="") para laktawan ito ng mga screen reader. Sa Shopify, idinadagdag mo ang alt text mula sa larawan sa Media section ng produkto; sa WordPress, sa Alternative Text field ng Media Library.

  • Mga form field na walang label

    Ikabit ang label sa bawat input gamit ang <label for> na tugma sa id ng field, o gumamit ng aria-label kapag walang nakikitang text. Huwag umasa sa placeholder text bilang tanging label: nawawala ito sa sandaling magsimulang mag-type ang tao. Ang mga newsletter sign-up at search box sa header ang karaniwang may ganitong problema.

  • Mga button at link na walang accessible name

    Kadalasang SVG lang ang laman ng mga icon control para sa cart, search, menu o social profile. Magdagdag ng nakikitang text o aria-label na nagsasabi kung ano ang ginagawa ng control (“Buksan ang cart”, hindi “icon”), at idagdag ang aria-hidden="true" sa SVG mismo.

  • Cookie banner na kumukulong sa focus

    Siguraduhing naaabot ng Tab ang bawat button ng banner at nagagamit ito sa Enter o Space, na bumabalik sa page ang focus kapag isinara ang banner, at na hindi humahawak ng focus ang banner na hindi naman humaharang sa page. Suriin ang settings ng iyong consent tool at i-update ito kung luma na ang script.

  • Mga focus outline na tinanggal sa CSS

    Hanapin sa iyong mga stylesheet ang outline: none o outline: 0 sa mga link, button at :focus. Palitan ito ng nakikitang istilo gaya ng :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Mga tanong tungkol sa tool na ito

Libre ba ang accessibility checker na ito?

Oo. Walang sign-up; kukumpirmahin mo lang na ikaw ang may-ari o namamahala ng site. Ang bayad na Ulat sa Accessibility ay nagdadagdag ng hanggang 20 pang page mula sa iyong sitemap, isang keyboard-only na journey, 320 px na reflow check, before-and-after na code na binuo mula sa iyong bumabagsak na markup, mga AI prompt, PDF at 5 re-test.

Gaano kalaking bahagi ng WCAG ang kayang subukan ng isang awtomatikong checker?

Bahagi lang. Kayang i-check ng isang patakaran kung may alt text ang larawan, pero hindi kung inilalarawan ng text ang larawan, at kung may label ang isang field, pero hindi kung malinaw ang label. Ituring ang mga resulta bilang listahan ng mga tiyak na problema, at pagkatapos ay subukan ang iba pa gamit ang keyboard at screen reader.

Kung walang nakita ang scan, sumusunod na ba ang site ko sa ADA o WCAG?

Hindi. Walang awtomatikong test na makapagpapakitang sumusunod ang isang site sa WCAG o sa ADA, sa European Accessibility Act o sa anumang ibang batas. Ang malinis na resulta ay nangangahulugang walang nakitang pagkabigo ang mga awtomatikong patakaran sa mga sinubukang page.

Puwede ko bang i-check ang staging site o mga page na nasa likod ng login?

Hindi masusubukan ang mga page na nasa likod ng login, password o bot protection. Kung hinaharang ng iyong bot protection ang scan, payagan ang FixReportsScanner user agent o sumubok ng pampublikong kopya ng staging.

Inayos ko na ang isang isyu. Bakit pareho pa rin ang resulta?

Maaaring gamitin muli ang mga resulta para sa parehong address mula sa scan sa nakaraang isang oras. Hintaying lumipas ang oras na iyon, at i-clear ang anumang page cache o CDN cache, bago ka sumubok muli.

Mga sanggunian

Mga kaugnay na tool

Nagsisimula ang Ulat sa Accessibility ($174, isahang bayad) sa buong libreng scan at nagdadagdag ng mas maraming page, ng pagbabagong gagawin para sa bawat natuklasan, ng PDF at ng mga re-test para matiyak ang mga inayos mo.

Tungkol sa Ulat sa Accessibility