Začněte nativním HTML prvkem a logickým pořadím obsahu, ARIA přidávejte pouze tam, kde chybí sémantika. Ovládací prvky editoru pojmenujte a zpřístupněte klávesnici, blok neuzamykejte v pasti fokusu a zabraňte redaktorovi vytvořit nepovolený kontrast či hierarchii. Testujte editor i front end bez myši a se čtečkou obrazovky. Kontrolujte také zoom, dlouhý překlad a omezený pohyb. Automatický audit nenahrazuje manuální interakci.
Přístupnost Gutenberg bloků má dvě rozhraní. Návštěvník používá HTML na veřejné stránce, zatímco redaktor pracuje s ovládacími prvky v editoru. Blok může na webu vypadat správně, ale při vkládání nemít srozumitelný název, ztrácet fokus nebo vyžadovat myš. Naopak může být pohodlný v editoru a generovat nesémantický či neovladatelný výstup.
Přístupný blok nevznikne přidáním několika atributů ARIA na konci vývoje. Potřebuje sémantický základ, omezená a pojmenovaná nastavení, předvídatelné ovládání klávesnicí, správu fokusu a test dynamických stavů. Tento návod se věnuje blokové komponentě a redakčním ochranným mechanismům, čímž doplňuje obecnou přístupnost webu i širší návrh vlastních Gutenberg bloků.
Definujte sémantiku před vizuální variantou
Určete význam komponenty: navigace, seznam, upozornění, karta s odkazem nebo ovladatelný disclosure. Použijte nativní prvek, který už má očekávané chování. Klikatelný div nenahrazuje button a nadpis zvolený podle velikosti písma nenahrazuje logickou úroveň v dokumentu. CSS pak mění vzhled bez ztráty významu.
Rozhodněte, které texty jsou obsah a které přístupné označení. Ikona bez textu potřebuje název ovládacího prvku, dekorativní obrázek se má ignorovat a informativní obrázek potřebuje smysluplný alternativní text. Blok nemá automaticky skládat duplicitní název z viditelného textu i z aria-label.
Navrhněte editační ovládání pomocí komponent WordPressu
Používejte podporované komponenty editoru, které zajišťují označení, fokus a chování při ovládání klávesnicí. Každý přepínač, select a textové pole má viditelný nebo programově dostupný label a pomocný text vysvětlující důsledek. Tlačítko s ikonou potřebuje srozumitelný název, který popisuje akci, nikoli tvar ikony.
Pořadí ovládání kopíruje logiku úlohy. Po vložení, duplikování, přesunu a odstranění zůstane fokus na předvídatelném místě. Vnořené bloky neomezujte způsobem, který znemožní výběr nadřazeného prvku nebo opuštění komponenty klávesnicí. Chyba v nastavení se oznámí textem a propojí s příslušným ovládacím prvkem.
- Pojmenované vstupy a ikonová tlačítka
- Předvídatelný fokus po změně
- Ovládání vnoření z klávesnice
- Textová chyba spojená s nastavením
Omezte varianty, které mohou vytvořit bariéru
Redaktor nemá volit libovolnou barvu textu a pozadí, pokud kombinace může selhat na kontrastu. Nabídněte schválené tokeny nebo dvojice a při dynamickém výběru zobrazte kontrolu. Podobně omezte nepodporované velikosti, animace a hierarchii nadpisů podle kontextu, který blok dokáže rozpoznat.
Povinný alternativní text není správný pro každý obrázek; blok má umožnit označit dekorativní účel a vysvětlit rozdíl. Automaticky vygenerovaný název z názvu souboru často nepomáhá. U odkazu vyžadujte srozumitelný viditelný text a upozorněte na více stejných obecných odkazů bez kontextu.
Implementujte dynamické chování bez ztráty fokusu
Pokud blok otevírá dialog, fokus se přesune dovnitř, zůstane v něm po dobu otevření a po zavření se vrátí na spouštěcí prvek. Disclosure aktualizuje aria-expanded a vazbu na panel. Karusel potřebuje ovládání, možnost zastavit pohyb a nesmí měnit obsah tak rychle, že ho uživatel nestihne přečíst.
Stavové zprávy oznamujte vhodným live regionem bez zahlcení. Načítání, úspěch i chyba mají být dostupné i bez barvy. JavaScript při inicializaci zachová nativní obsah nebo bezpečný fallback. Hydratace nesmí měnit pořadí tabulátoru ani vytvářet duplicitní ovládací prvky skryté pouze vizuálně.
Testujte blok samostatně i v rámci celé stránky
V editoru vyzkoušejte vložení přes inserter, vyhledání názvu, změnu všech nastavení, undo, duplikování, přesun a odstranění pouze klávesnicí. Projděte také chybové a prázdné stavy se zapnutou čtečkou obrazovky. Automatická pravidla zachytí část problémů, ale neověří srozumitelnost a pořadí interakcí.
Na front endu vložte více výskytů bloku mezi nadpisy, formuláře a navigaci. Testujte zoom, úzký viewport, vysoký kontrast, omezený pohyb a dlouhý překlad. Kontrolu přidejte do regresní sady a dokumentace pro redaktory. Přístupnost se může pokazit změnou tokenu či společného skriptu i bez úpravy samotného bloku.
Časté dotazy
Stačí přidat ARIA atributy do Gutenberg bloku?
Ne. Nejprve použijte správné nativní HTML a očekávané chování klávesnice. ARIA doplňuje chybějící sémantiku, ale neopraví nefunkční fokus, pořadí ani klikatelný div.
Je třeba testovat i administraci bloku?
Ano. Redaktor může používat klávesnici, zoom nebo čtečku obrazovky. Inserter, inspector controls, vnoření a chybové stavy musí být přístupné stejně jako veřejný výstup.
Má být alternativní text obrázku vždy povinný?
Ne. Informativní obrázek potřebuje smysluplný alternativní text, dekorativní má mít prázdnou alternativu a být ignorován. Editor musí redaktorovi umožnit účel správně vyjádřit.
Zdroje a další čtení
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
