Začnite natívnym HTML prvkom a logickým poradím obsahu, ARIA pridávajte iba na chýbajúcu sémantiku. Ovládacie prvky editora pomenujte a sprístupnite klávesnici, blok neuzamykajte v pasci fokusu a redaktorovi zabráňte vytvoriť nepovolený kontrast či hierarchiu. Testujte editor aj front end bez myši a s čítačkou obrazovky. Kontrolujte aj zoom, dlhý preklad a obmedzený pohyb. Automatický audit nenahrádza manuálnu interakciu.
Prístupnosť Gutenberg blokov má dve rozhrania. Návštevník používa HTML na verejnej stránke, zatiaľ čo redaktor pracuje s ovládacími prvkami v editore. Blok môže na webe vyzerať správne, ale pri vkladaní nemať zrozumiteľný názov, strácať fokus alebo vyžadovať myš. Opačne môže byť pohodlný v editore a generovať nesémantický či neovládateľný výstup.
Dostupný blok nevznikne pridaním niekoľkých atribútov ARIA na konci vývoja. Potrebuje sémantický základ, obmedzené a pomenované nastavenia, predvídateľnú klávesnicu, správu fokusu a test dynamických stavov. Tento návod sa venuje blokovému komponentu a redakčným ochranným mechanizmom, čím dopĺňa všeobecnú prístupnosť webu aj širší návrh vlastných Gutenberg blokov.
Definujte sémantiku pred vizuálnym variantom
Určte význam komponentu: navigácia, zoznam, upozornenie, karta s odkazom alebo ovládateľný disclosure. Použite natívny prvok, ktorý už má očakávané správanie. Klikateľný div nenahrádza button a nadpis zvolený podľa veľkosti písma nenahrádza logickú úroveň v dokumente. CSS potom mení vzhľad bez straty významu.
Rozhodnite, ktoré texty sú obsah a ktoré prístupné označenie. Ikona bez textu potrebuje názov ovládania, dekoratívny obrázok sa má ignorovať a informatívny obrázok potrebuje zmysluplný alternatívny text. Blok nemá automaticky skladať duplicitu názvu z viditeľného textu aj aria-label.
Navrhnite editovacie ovládanie cez WordPress komponenty
Používajte podporované komponenty editora, ktoré poskytujú označenie, fokus a klávesnicové správanie. Každý toggle, select a textové pole má viditeľný alebo programovo dostupný label a pomocný text pre dôsledok. Ikonové tlačidlo potrebuje zrozumiteľný názov, ktorý opisuje akciu, nie tvar ikony.
Poradie ovládania kopíruje logiku úlohy. Po vložení, duplikovaní, presune a odstránení zostane fokus na predvídateľnom mieste. Vnorené bloky neobmedzujte spôsobom, ktorý znemožní výber rodiča či opustenie komponentu klávesnicou. Chyba v nastavení sa oznámi textom a spojí s príslušným ovládaním.
- Pomenované vstupy a ikonové tlačidlá
- Predvídateľný fokus po zmene
- Klávesnicové ovládanie vnorenia
- Textová chyba spojená s nastavením
Obmedzte varianty, ktoré môžu vytvoriť bariéru
Redaktor nemá vyberať ľubovoľnú farbu textu a pozadia, ak kombinácia môže zlyhať na kontraste. Ponúknite schválené tokeny alebo dvojice a pri dynamickom výbere zobrazte kontrolu. Podobne obmedzte nepodporované veľkosti, animácie a hierarchiu nadpisov podľa kontextu, ktorý blok dokáže poznať.
Povinný alternatívny text nie je správny pre každý obrázok; blok má umožniť označiť dekoratívny účel a vysvetliť rozdiel. Automaticky generovaný názov z názvu súboru často nepomáha. Pri odkaze vyžadujte zrozumiteľný viditeľný text a upozornite na viac rovnakých všeobecných odkazov bez kontextu.
Implementujte dynamické správanie bez straty fokusu
Ak blok otvára dialóg, fokus sa presunie dovnútra, zostane v ňom počas otvorenia a po zatvorení sa vráti na spúšťač. Disclosure aktualizuje aria-expanded a väzbu na panel. Karusel potrebuje ovládanie, možnosť zastaviť pohyb a nesmie meniť obsah tak rýchlo, že ho používateľ nevie prečítať.
Stavové správy oznamujte primeraným live regiónom bez zahltenia. Načítanie, úspech a chyba majú byť dostupné aj bez farby. JavaScript pri inicializácii zachová natívny obsah alebo bezpečný fallback. Hydratácia nesmie meniť poradie tabulátorov ani vytvoriť duplicitné ovládacie prvky skryté iba vizuálne.
Testujte blok v izolácii aj v celej stránke
V editore skúste vloženie cez inserter, vyhľadanie názvu, zmenu všetkých nastavení, undo, duplikovanie, presun a odstránenie iba klávesnicou. Prejdite aj chybové a prázdne stavy so zapnutou čítačkou obrazovky. Automatické pravidlá zachytia časť problémov, ale neoveria zrozumiteľnosť a poradie interakcie.
Na front ende vložte viac výskytov bloku medzi nadpisy, formuláre a navigáciu. Testujte zoom, úzky viewport, vysoký kontrast, obmedzený pohyb a dlhý preklad. Kontrolu pridajte do regresnej sady a dokumentácie redaktorov. Prístupnosť sa môže pokaziť zmenou tokenu či spoločného skriptu aj bez úpravy samotného bloku.
Časté otázky
Stačí pridať ARIA atribúty do Gutenberg bloku?
Nie. Najprv použite správne natívne HTML a očakávané klávesnicové správanie. ARIA dopĺňa chýbajúcu sémantiku, ale neopraví nefunkčný fokus, poradie alebo klikateľný div.
Treba testovať aj administráciu bloku?
Áno. Redaktor môže používať klávesnicu, zoom alebo čítačku obrazovky. Inserter, inspector controls, vnorenie a chybové stavy musia byť dostupné rovnako ako verejný výstup.
Má byť alternatívny text obrázka vždy povinný?
Nie. Informatívny obrázok potrebuje zmysluplný alternatívny text, dekoratívny má mať prázdnu alternatívu a byť ignorovaný. Editor musí redaktorovi umožniť účel správne vyjadriť.
Zdroje a ďalšie čítanie
Web developer zo Spišskej Novej Vsi. Venuje sa WordPressu, WooCommerce, vlastným pluginom, API integráciám, webovým aplikáciám a praktickým AI automatizáciám.
