Přístupnost pro vývojáře: Tvorba inkluzivního kódu
Vývojáři jsou architekty přístupnosti na úrovni implementace. Zatímco designéři stanovují vizuální a interakční základy, je to kód, který nakonec určuje, zda web funguje s navigací klávesnicí, správně komunikuje se čtečkami obrazovky a zachovává přístupnost napříč prohlížeči a zařízeními.
Dobrou zprávou je, že většina osvědčených postupů pro přístupnost je v souladu s obecnými osvědčenými postupy pro čistý, sémantický, standardům vyhovující kód. Psaní přístupného kódu není o přidávání složitosti — je to o správném psaní kódu na prvním místě.
Nejdříve sémantické HTML
Nejúčinnější věc, kterou můžete pro přístupnost udělat, je správné používání sémantických HTML prvků. HTML5 poskytuje bohatou slovní zásobu prvků, které nesou inherentní význam a funkce přístupnosti. Element <button> je automaticky zaostřitelný, aktivovatelný klávesnicí a oznámen jako tlačítko čtečkami obrazovky. <div> s onclick handlerem nemá žádnou z těchto funkcí bez značného dodatečného úsilí.
Používejte <nav> pro navigační oblasti, <main> pro hlavní obsah, <header> a <footer> pro příslušné sekce, <section> a <article> pro oblasti obsahu, <h1> až <h6> pro nadpisy ve správném hierarchickém pořadí, <ul> a <ol> pro seznamy, <table> s <th> pro tabulková data, <label> s atributy for pro formulářové prvky a nativní prvky <button> a <a> pro interaktivní ovládací prvky.
Tyto prvky vytvářejí strom přístupnosti, který asistenční technologie používají k prezentaci vašeho obsahu uživatelům. Když je používáte správně, většina přístupnosti je zajištěna automaticky.
Struktura nadpisů
Nadpisy vytvářejí strukturální osnovu vaší stránky. Uživatelé čteček obrazovky často navigují podle nadpisů, aby porozuměli organizaci obsahu a našli konkrétní sekce. Každá stránka by měla mít přesně jeden <h1> a nadpisy by měly následovat logickou hierarchii bez přeskakování úrovní — <h3> by neměl následovat po <h1> bez <h2> mezi nimi.
Nikdy nepoužívejte nadpisové prvky pro vizuální stylování. Pokud potřebujete velký tučný text, který není nadpisem, použijte CSS na jiném prvku. Naopak, pokud obsah funguje jako nadpis, označte ho jako nadpis bez ohledu na jeho vizuální prezentaci.
Přístupnost klávesnice
Veškerá funkcionalita musí být ovladatelná pouze prostřednictvím klávesnice. To znamená, že každý interaktivní prvek — odkazy, tlačítka, formulářové prvky, nabídky, modální okna, posuvníky, záložky — musí být dosažitelný klávesou Tab (nebo Shift+Tab pro zpětný směr), aktivovatelný klávesou Enter nebo mezerníkem a v příslušných případech zavřitelný.
Nikdy nevytvářejte pasti klávesnice, kde uživatelé mohou tabulátorem vstoupit do prvku, ale nemohou z něj vystoupit. Modální dialogy by měly udržet fokus uvnitř dialogu, dokud je otevřen, a vrátit fokus na spouštěcí prvek po zavření, ale stisknutí Escape by mělo dialog vždy zavřít.
Zajistěte, aby pořadí fokusu sledovalo logickou sekvenci odpovídající vizuálnímu rozložení. Pořadí DOM by mělo obecně odpovídat vizuální prezentaci. Vyhněte se používání kladných hodnot tabindex, které přepisují přirozené pořadí fokusu a vytvářejí zmatek. Používejte tabindex="0" pro zpřístupnění neinteraktivních prvků fokusu, když je to nutné, a tabindex="-1" pro prvky, které by měly být zaostřitelné pouze programově.
Jazyk stránky
Nastavte výchozí jazyk každé stránky pomocí atributu lang na prvku <html>. To říká čtečkám obrazovky, jaká pravidla výslovnosti použít. Pokud se jazyk v obsahu mění — například francouzská fráze v české stránce — označte změnu atributem lang na obsahujícím prvku.
Přístupnost formulářů
Formuláře jsou místem, kde uživatelé zadávají vstup, a jsou častým zdrojem selhání přístupnosti. Každý formulářový prvek musí mít programově přiřazený popisek, typicky pomocí prvku <label> s atributem for odpovídajícím id prvku. Seskupte související prvky pomocí <fieldset> a <legend>.
Když jsou zjištěny chyby vstupu, identifikujte pole s chybou a popište chybu textem. Poskytnějte návrhy na opravu, kde je to možné. Pro pole, která přijímají specifické formáty, poskytnějte jasné instrukce o očekávaném formátu. Používejte atribut autocomplete pro umožnění automatického vyplňování prohlížečem pro běžná pole jako jméno, email, adresa a telefonní číslo.
Stavové zprávy, které nezískají fokus — jako „položka přidána do košíku" nebo „nalezeny 3 výsledky" — musí být oznámeny uživatelům čteček obrazovky prostřednictvím ARIA live regionů nebo rolí status.
Alternativní text
Každý nedekorativní obrázek musí mít smysluplný alternativní text popisující jeho obsah nebo funkci. Pro informativní obrázky popište, co obrázek sděluje. Pro funkční obrázky (jako logo odkazující na domovskou stránku) popište funkci. Pro dekorativní obrázky, které nepřidávají žádnou informaci, použijte prázdný atribut alt (alt=""), aby je čtečky obrazovky zcela přeskočily.
Složité obrázky jako grafy, diagramy nebo schémata mohou potřebovat delší popisy poskytnuté prostřednictvím popisku, přilehlého textu nebo propojeného podrobného popisu.
WAI-ARIA
Specifikace Accessible Rich Internet Applications poskytuje další sémantiku pro situace, kdy nativní HTML není dostatečné. ARIA umožňuje komunikovat role, stavy a vlastnosti asistenčním technologiím pro vlastní widgety a dynamický obsah.
Nicméně ARIA by měla být používána uvážlivě. První pravidlo ARIA zní: pokud můžete použít nativní HTML prvek, který má potřebnou sémantiku a chování, udělejte to. ARIA nepřidává funkcionalitu — přidává pouze sémantiku. <div role="button"> stále potřebuje JavaScript pro zpracování klávesnice, zatímco nativní <button> to zvládá automaticky.
Používejte ARIA orientační role (nebo jejich HTML5 ekvivalenty) k definování oblastí stránky. Používejte aria-label a aria-labelledby k poskytnutí přístupných názvů, kde viditelný text nestačí. Používejte aria-expanded, aria-selected, aria-checked a další stavové atributy ke komunikaci aktuálního stavu interaktivních widgetů. Používejte aria-live regiony k oznamování aktualizací dynamického obsahu.
Responzivní design a přeformátování
Obsah musí být prezentovatelný bez ztráty informací při šířce 320 CSS pixelů bez nutnosti horizontálního posouvání. To zajišťuje, že uživatelé, kteří zvětší zobrazení na 400 % na standardním desktopu, mají stále přístup ke veškerému obsahu. Navrhujte své rozložení tak, aby přeformátovalo obsah do jednoho sloupce při úzkých šířkách namísto vyžadování posouvání ve dvou směrech.
Skip linky
Poskytnějte mechanismus pro uživatele klávesnice k obejití opakujících se bloků obsahu, jako jsou navigační menu, a přímému přeskočení na hlavní obsah. Nejběžnější implementací je odkaz „Přeskočit na hlavní obsah", který je prvním zaostřitelným prvkem na stránce a stane se viditelným při zaostření.
Kontrolní seznam testování pro vývojáře
Před nasazením jakékoli funkce ověřte: veškerá funkcionalita funguje pouze s klávesnicí; pořadí fokusu je logické; fokus je viditelný na všech interaktivních prvcích; všechny obrázky mají vhodný alt text; všechny formulářové prvky mají popisky; jazyk stránky je nastaven; hierarchie nadpisů je správná; ARIA je použita správně a pouze když je nutná; obsah se přeformátuje při šířce 320px; a aktualizace dynamického obsahu jsou oznamovány čtečkám obrazovky.
V této sekci
Je váš web přístupný?
Zdarma naskenujte svůj web a získejte WCAG skóre během několika minut.
Skenovat web zdarma