Ang Accessibility Inspector ay nagpapatakbo ng automated na WCAG 2.1 Level AA checks sa anumang webpage at gumagawa ng kategorisadong ulat ng mga accessibility issue. Makita ang kulang na color contrast ratio, nawawalang alt text sa larawan, maling ARIA roles at attributes, nawawalang form labels, mga problema sa keyboard navigation, at nawawalang landmark regions — na may one-click na element highlighting para sa bawat isyung natuklasan.
Ang web accessibility ay hindi opsyonal — ito ay legal na kinakailangan sa maraming hurisdiksyon at mahalaga para sa 15% ng pandaigdigang populasyon na may kapansanan. Ngunit ang mga accessibility issue ay hindi nakikita sa normal na pag-develop at pagsubok. Ang isang button ay maaaring magmukhang maayos ngunit ganap na hindi ma-access ng mga screen reader dahil ito ay isang styled div na walang role attribute. Ang teksto ay maaaring mabasa mo ngunit mabibigo sa contrast requirements para sa mga gumagamit na may mababang paningin. Awtomatikong inilalabas ng Accessibility Inspector ang mga di-nakikitang isyung ito. Sinusuri nito ang dose-dosenang WCAG 2.1 Level AA criteria kasama ang color contrast ratios (minimum 4.5:1 para sa normal na teksto, 3:1 para sa malaking teksto), nawawalang alt text sa mga larawan, nawawalang labels sa mga form input, maling ARIA roles at attributes, nawawalang document landmarks (nav, main, footer), at mga keyboard focus indicator. Bawat isyu ay nagsasama ng apektadong element, ang partikular na WCAG criterion na nilabag, at rekomendasyon kung paano ito ayusin. I-click ang anumang isyu para i-highlight ang element sa pahina.
Nagpapatakbo ng automated checks laban sa WCAG 2.1 Level AA success criteria kasama ang perceivability, operability, understandability, at robustness na kategorya. Bawat tseke ay nagpapakita ng partikular na criterion (hal., 1.4.3 Contrast, 1.1.1 Non-text Content) at pass/fail na status.
Kinakalkula ang contrast ratio sa pagitan ng teksto at background na kulay para sa bawat text element sa pahina. Nila-flag ang mga element na mas mababa sa 4.5:1 para sa normal na teksto o 3:1 para sa malaking teksto (18px+ o 14px+ bold). Ipinapakita ang aktwal na ratio at ang minimum na kinakailangan.
Sini-scan ang bawat img, svg, at image role element. Nila-flag ang nawawalang alt attributes, walang laman na alt sa mga hindi dekoratibong larawan, at labis na generic na alt text ("image", "photo"). Nagmumungkahi kung ang bawat larawan ay nangangailangan ng descriptive alt, walang laman na alt (dekoratibo), o role="presentation".
Sinusuri ang maling paggamit ng ARIA role (mga role sa maling element), nawawalang kinakailangang ARIA attributes (hal., aria-label sa mga icon button), duplicate na ID na tinutukoy ng aria-labelledby, at nawawalang landmark regions (walang main, walang nav). Nagrerekomenda ng semantic HTML na alternatibo.
Tinitiyak na ang bawat form input (text, email, password, checkbox, select) ay may kasamang label — alinman sa pamamagitan ng label element na may katugmang for/id, aria-label, o aria-labelledby. Ang mga input na walang label ay hindi ma-access ng mga screen reader.
Ang mga isyu ay inuri bilang Errors (kailangang ayusin — hadlang sa access), Warnings (dapat ayusin — potensyal na hadlang), at Passes (nakumpirmang accessible). Ang bilang ng Error ay kitang-kita. I-click ang anumang isyu para i-highlight ang apektadong element sa pahina.
Bago ilunsad ang isang bagong pahina o feature, patakbuhin ang Accessibility Inspector para mahuli ang mga isyu nang maaga. Ang nawawalang alt text, mga form field na walang label, at mga paglabag sa contrast ay madaling ayusin sa panahon ng pag-develop ngunit mahal na tuklasin sa produksyon.
Maraming hurisdiksyon ang nangangailangan ng WCAG 2.1 Level AA compliance (ADA sa US, EAA sa EU). Patakbuhin ang inspector sa iyong mga pahina na nakaharap sa publiko para matukoy ang mga compliance gap bago pa maging legal na panganib.
Isama ang accessibility checking bilang bahagi ng iyong proseso ng QA. Pagkatapos ng visual QA at functional testing, patakbuhin ang Accessibility Inspector para ma-verify na hindi nagpapakilala ng accessibility regression ang implementasyon.
Patakbuhin ang inspector sa iyong kasalukuyang site sa panahon ng team meeting para ipakita ang tunay na mga accessibility issue. Ang visual highlighting at malinaw na mga paliwanag ay tumutulong sa mga developer na maunawaan kung ano ang hitsura ng accessible markup at kung bakit ito mahalaga.
Mag-audit ng mga pahina na may kasamang third-party widgets, embedded na nilalaman, o user-generated HTML. Ang mga pinagkukuhang ito ay madalas na nagpapakilala ng mga accessibility issue (nawawalang alt text, mga paglabag sa contrast) na ikaw pa rin ang responsable bilang may-ari ng pahina.
Buksan ang DevSuite Pro floating dock at i-click ang Accessibility Inspector icon. Sini-scan ng tool ang page DOM para sa mga accessibility issue.
Lilitaw ang kategorisadong ulat na may Errors (pula), Warnings (dilaw), at Passes (berde). Bawat seksyon ay naglilista ng mga partikular na isyu na may mga apektadong element at mga WCAG criteria reference.
I-click ang anumang isyu para i-highlight ang apektadong element sa pahina gamit ang colored border at mag-scroll patungo dito. Ang koneksyon sa pagitan ng ulat at ng DOM element ay agad-agad.
Bawat isyu ay nagsasama ng partikular na rekomendasyon: "Magdagdag ng alt text na naglalarawan sa nilalaman ng larawan", "Dagdagan ang font color contrast sa hindi bababa sa 4.5:1", "Magdagdag ng label element na may for='email'".
Gumawa ng mga pagbabago sa iyong code, i-reload ang pahina, at patakbuhin muli ang audit. Dapat bumaba ang bilang ng error habang niresolba ang mga isyu. Layunin ang zero error.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
