# Mga accessibility issue na tine-test namin Ipinapaliwanag ng bawat page ang isang problemang nakikita ng aming mga awtomatikong test: ano ang ibig sabihin nito, aling WCAG criterion ang kaugnay nito, paano ito ayusin sa anumang site, sa Shopify at sa WooCommerce, at paano susuriin ang ayos. ## Mga accessibility issue - [Hindi dapat focusable o may lamang focusable na elemento ang elementong ARIA hidden](https://www.fixreports.com/fil/issues/aria-hidden-focus): WCAG 4.1.2 · Level A. May mga focusable na elementong nakatago sa mga screen reader pero naaabot pa rin gamit ang keyboard. (Mga ARIA attribute at role) - [Dapat gamitin nang tama ang autocomplete attribute](https://www.fixreports.com/fil/issues/autocomplete-valid): WCAG 1.3.5 · Level AA. Gumagamit ang isang form field ng autocomplete value na hindi kinikilala ng mga browser. (Mga form field na walang label) - [Dapat may malinaw na text ang mga button](https://www.fixreports.com/fil/issues/button-name): WCAG 4.1.2 · Level A. May mga button na walang accessible name, kaya 'button' lang ang naririnig ng mga gumagamit ng screen reader. (Mga link at button na walang pangalan) - [Dapat umabot ang mga elemento sa minimum na threshold ng color contrast ratio](https://www.fixreports.com/fil/issues/color-contrast): WCAG 1.4.3 · Level AA. May text na hindi sapat na namumukod sa background nito para mabasa ng mga taong malabo ang paningin. (Mababang color contrast) - [Dapat may element ang mga dokumento para makatulong sa pag-navigate](https://www.fixreports.com/fil/issues/document-title): WCAG 2.4.2 · Level A. Walang title ang isang page, kaya hindi malaman ng mga user kung anong page ang kinaroroonan nila. (Mga page title) - [Dapat natatangi ang mga ID na ginagamit sa ARIA at sa mga label](https://www.fixreports.com/fil/issues/duplicate-id-aria): WCAG 4.1.2 · Level A. May ilang elementong pareho ang id na ginagamit bilang label o paglalarawan, kaya maaaring maling label ang basahin ng assistive technology. (Mga ARIA attribute at role) - [Dapat may accessible name ang mga frame](https://www.fixreports.com/fil/issues/frame-title): WCAG 4.1.2 · Level A. Walang title ang isang naka-embed na frame (kadalasang mapa, video o app widget), kaya hindi alam ng mga gumagamit ng screen reader kung ano ang laman nito. (Istruktura ng page, mga heading at landmark) - [Nararapat na isa-isang antas lang ang pagtaas ng mga heading](https://www.fixreports.com/fil/issues/heading-order): Best practice sa accessibility. Lumalaktaw ang mga antas ng heading (halimbawa mula H2 papuntang H4), kaya nakakalito ang istruktura ng page para sa mga gumagamit ng screen reader. (Istruktura ng page, mga heading at landmark) - [Dapat may lang attribute ang <html> element](https://www.fixreports.com/fil/issues/html-has-lang): WCAG 3.1.1 · Level A. Hindi idinedeklara ng page ang wika nito, kaya maaaring mali ang pagbigkas ng mga screen reader. (Wika ng page) - [Dapat may valid na value para sa lang attribute ang <html> element](https://www.fixreports.com/fil/issues/html-lang-valid): WCAG 3.1.1 · Level A. Hindi valid ang language code ng page, kaya hindi mapili ng mga screen reader ang tamang boses. (Wika ng page) - [Dapat may alternatibong text ang mga larawan](https://www.fixreports.com/fil/issues/image-alt): WCAG 1.1.1 · Level A. May mga larawang walang text alternative, kaya hindi alam ng mga gumagamit ng screen reader kung ano ang ipinapakita ng mga ito. (Mga larawang walang text alternative) - [Dapat may malinaw na text ang mga input button](https://www.fixreports.com/fil/issues/input-button-name): WCAG 4.1.2 · Level A. Walang text ang isang input button, kaya hindi masabi ng mga screen reader kung ano ang ginagawa nito. (Mga form field na walang label) - [Dapat may alternatibong text ang mga image button](https://www.fixreports.com/fil/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · Level A. Walang alt text ang isang image button, kaya hindi masabi ng mga screen reader kung ano ang ginagawa nito. (Mga larawang walang text alternative) - [Dapat may label ang mga form element](https://www.fixreports.com/fil/issues/label): WCAG 4.1.2 · Level A. May mga form field na walang label, kaya hindi alam ng mga gumagamit ng screen reader kung ano ang ilalagay. (Mga form field na walang label) - [Nararapat na may isang main landmark ang dokumento](https://www.fixreports.com/fil/issues/landmark-one-main): Best practice sa accessibility. Walang main landmark ang page, kaya hindi makadiretso sa nilalaman ang mga gumagamit ng screen reader. (Istruktura ng page, mga heading at landmark) - [Dapat makilala ang mga link nang hindi umaasa sa kulay](https://www.fixreports.com/fil/issues/link-in-text-block): WCAG 1.4.1 · Level A. Kulay lang ang nagpapakilala sa mga link sa loob ng mga talata, kaya hindi napapansin ang mga ito ng mga taong hindi nakikita ang pagkakaiba ng kulay. (Mababang color contrast) - [Dapat may malinaw na text ang mga link](https://www.fixreports.com/fil/issues/link-name): WCAG 2.4.4, 4.1.2 · Level A. May mga link na walang text na mabibigkas ng screen reader, kadalasan mga link na icon lang gaya ng mga social icon o ang cart icon. (Mga link at button na walang pangalan) - [Hindi dapat i-disable ang pag-zoom at pag-scale](https://www.fixreports.com/fil/issues/meta-viewport): WCAG 1.4.4 · Level AA. Hinaharangan ng page ang pinch-zoom sa mobile. (Zoom at reflow) - [Nararapat na may level-one heading ang page](https://www.fixreports.com/fil/issues/page-has-heading-one): Best practice sa accessibility. Walang top-level na heading ang page. (Istruktura ng page, mga heading at landmark) - [Nararapat na nasa loob ng mga landmark ang lahat ng nilalaman ng page](https://www.fixreports.com/fil/issues/region): Best practice sa accessibility. May nilalamang wala sa loob ng isang page landmark (header, nav, main o footer). (Istruktura ng page, mga heading at landmark) - [Dapat may alternatibong text ang mga [role="img"] at [role="image"] element](https://www.fixreports.com/fil/issues/role-img-alt): WCAG 1.1.1 · Level A. Walang text alternative ang isang elementong ipinapakita bilang larawan. (Mga larawang walang text alternative) - [Dapat maabot gamit ang keyboard ang scrollable na region](https://www.fixreports.com/fil/issues/scrollable-region-focusable): WCAG 2.1.1 · Level A. Hindi maabot ng keyboard ang isang scrolling area, kaya hindi ito ma-scroll ng mga gumagamit ng keyboard. (Keyboard access at focus) - [Dapat may accessible name ang select element](https://www.fixreports.com/fil/issues/select-name): WCAG 4.1.2 · Level A. May dropdown (kadalasang sort o variant selector) na walang label. (Mga form field na walang label) - [Dapat may alternatibong text ang mga <svg> element na may img o image role](https://www.fixreports.com/fil/issues/svg-img-alt): WCAG 1.1.1 · Level A. Walang text alternative ang isang SVG image na nagbibigay ng impormasyon. (Mga larawang walang text alternative) - [Dapat 24px ang laki ng lahat ng touch target, o may sapat na espasyo sa paligid nito](https://www.fixreports.com/fil/issues/target-size): WCAG 2.5.8 · Level AA. May mga tap target na mas maliit sa 24 by 24 pixel at masyadong magkakalapit, kaya mahirap pindutin ang mga ito sa phone. (Keyboard access at focus)