Tee WooCommerce-kaupastasi aidosti saavutettava. EAA ja WCAG, ilman overlayta

Totuus: WooCommerce ei ole automaattisesti saavutettava

Siisti WooCommerce-teema kuten Storefront alkaa paremmasta lähtöpisteestä kuin moni kauppa, mutta harvoin yltää itsestään WCAG 2.2 AA -tasolle. Heti kun muokkaat kassaasi, asennat laajennuksia tai valitset teeman, jossa on vaaleanharmaat painikkeet, syntyy esteitä, joita asiakkaasi, ja European Accessibility Act, eivät hyväksy.

Mikä WooCommerce-alustalla menee usein pieleen

• Checkout-virheilmoitukset ilman aria-liveaJos kassalla maksaminen epäonnistuu, WooCommerce näyttää ilmoituksen kuten 'anna kelvollinen osoite'. Ilman aria-live="assertive" sokea käyttäjä ei kuule ilmoitusta ja jää arvailemaan miksi tilaus ei mene läpi.
• Lomakekentät ilman yhdistettyä nimilappuaMonissa teemoissa ja kassan mukautuksissa kentät ovat ilman oikein liitettyä nimilappua tai vain paikkamerkin kanssa. Ruudunlukijan käyttäjä kuulee tällöin tyhjän syöttökentän tietämättä, mitä siihen kuuluu.
• Liian heikko kontrasti teeman painikkeissaMonet WooCommerce-teemat käyttävät vaaleanharmaata tekstiä värillisellä painikkeella tai painikkeen väriä lähellä taustaa. Se ei useinkaan yllä WCAG:n kontrastin vähimmäistasoon, joten heikkonäköiset asiakkaat eivät voi lukea painiketta 'Lisää ostoskoriin'.
• Lisää ostoskoriin AJAXilla ilman tilailmoitustaKun asiakas klikkaa ’Lisää ostoskoriin’, se tapahtuu AJAXin kautta ilman sivun uudelleenlatausta. Ilman live-aluetta ruudunlukija ei ilmoita, että tuote on lisätty, joten käyttäjä ei tiedä, onnistuiko toiminto.

Miltä todellinen korjaus näyttää

Ota lomakenimiö WooCommerce-checkoutissasi. Filterin kautta kiinnityt kenttään ja annat sille oikean, kytketyn nimen, ei checkoutin uudelleenrakennusta:

<input type="text" name="billing_company" id="billing_company"
  placeholder="Bedrijfsnaam">

add_filter( 'woocommerce_checkout_fields', function( $fields ) {
  $fields['billing']['billing_company']['label'] = __( 'Bedrijfsnaam', 'theme' );
  return $fields;
} );

Mitä saat

Raportointityökalussa maksat lisenssin ja kehittäjäsi virheiden korjaamisesta. Sevirannassa korjaus on mukana, ei kaksinkertaista laskua.

Suojaa konversiosi ja oikeudellinen asemasi

Sovellus, joka liimaa saavutettavuuskuvakkeen WooCommerce-sivustosi päälle, on riski liiketoiminnallesi. Faktat rivissä:

Riittääkö WooCommerce-saavutettavuus-widgetti EAA:han?

Ei. Widget asettaa kerroksen sivustosi päälle, mutta ei korjaa taustalla olevaa koodia eikä käy rakenteellisesta vaatimustenmukaisuudesta.

Kuuluuko WooCommerce-kassani EAA:n piiriin?

Kyllä. Kassa ja navigointi ovat nimenomaisesti osa WCAG 2.1 AA:n mukaista velvollisuutta.

Skannaako Seviranta myös WooCommerce-sovellukseni?

Kyllä. Testaamme lopullisen generoidun HTML:n, teeman ja sovellukset, samoin kuin valvontaviranomainen tekee.

Hidastaako tämä WooCommerce-sivustoani?

Ei. Skannaamme ulkoisesti EU-palvelimiltamme; sivustollesi ei tule mitään skriptiä. 0% vaikutus latausnopeuteesi ja Core Web Vitals -arvoihin.