Demo
Pozrite si video predstavenie histórie a funkcií nástroja, alebo skúste upraviť obsah ukážky nižšie, otvoriť a odmietnuť upozornenia a pomocou panela () zobraziť osnovu nadpisov. Táto ukážka zahŕňa základné testy aj sadu CSA.
Táto ukážka používa editor TinyMCE. Editoria11y je kompatibilný s väčšinou textových editorov a má implementácie na kľúč pre CKEditor a Gutenberg vo WordPress a Drupal.
Nadpisy
Tento nadpis preskočil úroveň:
Chyba
Tento nadpis nemá vôbec žiadny text:
Tento krátky citát by mohol byť nadpisom:
Som falošný nadpis
Tento celotučný odsek by mohol byť nadpisom:
Som falošný nadpis
Tento nadpis je veľmi dlhý:
Nadpisy a podnadpisy vytvárajú navigovateľný obsah pre asistívne zariadenia. Čísla označujú odsadenie vo vzťahu vnorenia. Veľmi dlhé nadpisy pravdepodobne znamenajú, že autor hovorí v nadpise príliš veľa.
Textové alternatívy pre obrázky
Tento nadpis je tvorený obrázkom textu bez alternatívneho textu:
Obrázok bez atribútu alt vôbec:

Obrázok s neplatným atribútom alt, napr. alt="'"

Obrázok s názvom súboru ako alternatívny text

Obrázok s nadbytočným textom v alternatívnom texte, napríklad „obrázok:"

Prepojený obrázok s nadbytočným textom v alternatívnom texte, napríklad „obrázok:"
Obrázok so zástupným alternatívnym textom:

Prepojený obrázok so zástupným alternatívnym textom:
Obrázok s alternatívnym textom v strojovom kóde:

Prepojený obrázok s alternatívnym textom v strojovom kóde:
Obrázok s veľmi dlhým alternatívnym textom:

Obrázky v odkazoch, kde alternatívny text môže opisovať obrázok namiesto odkazu
Tento odkaz má text a
obrázok.
Ľubovoľný prepojený obrázok (test predvolene vypnutý)
Obrázok vo figure označený ako dekoratívny:
Obrázok vo figure s alternatívnym textom rovnakým ako figcaption:
Obrázok v karuseli bez alternatívneho textu:
Kontrast
Nečitateľná kombinácia farieb:
Veľmi čitateľné.
Farba vyžaduje manuálnu kontrolu:
A nevypočítateľná.
SVG grafika s nedostatočným kontrastom
SVG grafika, ktorej kontrast vyžaduje manuálnu kontrolu
Vložený obsah & médiá
Video označené na manuálnu kontrolu titulkov:
Audio potrebuje prepis:
Iframe bez titulku, ktorý tiež vyžaduje manuálnu kontrolu:
Iframe bez možnosti fokusu:
Vnorené interaktívne komponenty
Akordeón
Akordeón
Surprise!Zmysluplné odkazy
Odkazy bez akéhokoľvek textu
Odkazy pomenované iba URL adresou:
https://www.youtube.com/watch?v=DLzxrzFCyOs
Odkazy pomenované iba symbolmi:
Odkazy s rovnakými názvami vedú na rôzne miesta
Odkazy pomenované iba číslom DOI:
doi.org/10.1145/3493612.3520468
Odkazy s nezmyselnými popiskami:
Prepojené ikony bez textových alternatív:
Odkazy otvárané v novom okne bez ikony externého odkazu alebo textového upozornenia
Upozornenie pre test otvorenia v novom okne.
Odkazy na PDF súbory
Odkazy na iné dokumenty
Odkazy s nadbytočnými atribútmi title
Odkazy s atribútmi, ktoré ich odstraňujú z poradia kariet:
Odkaz s atribútom aria-labelledby odkazujúcim na prvky bez textu:
Odkazy s generickými slovami v aria popisku:
Prepojený obrázok bez alternatívneho textu:
Prepojený obrázok s nevysloviteľným alternatívnym textom:
Prepojený obrázok bez atribútu alt:
Prepojený obrázok bez atribútu alt v odkaze s textom:
Prepojený obrázok s iba názvom súboru ako alternatívny text:
Prepojený obrázok s podozrivo dlhým alternatívnym textom:
Nefunkčné kotviace odkazy na stránke
Odkazy na vývojársky server
Duplicitné kotvy
Tabuľky
Tabuľky bez platných hlavičiek
| Tabuľka bez hlavičky TH je neplatná |
Nadpisy osnovy sa nepočítajú |
Zakázať test obsahových nadpisov vnútri tabuliek |
| Prázdne hlavičky | |
|---|---|
| Našiel som | 700 videí o korytnačkách |
| Každé | 2 sekundy dlhé |
Čitateľnosť
NIEKOĽKO SLOV ZA SEBOU PÍSANÝCH VEĽKÝMI PÍSMENAMI SPUSTÍ VAROVANIE O MANUÁLNEJ KONTROLE.
Podčiarknutý text
Trochu kurzívy je v poriadku, ale veľké bloky zdôrazneného textu nie sú veľmi čitateľné. Trochu je samozrejme prijateľné, ale sú tu limity a celý odsek je priveľa. Toto je napríklad celý odsek. Je to trochu ťažko čitateľné, nie? Ale tento test sa nespustí, kým nie je takto dlhý, takže by ste nemali vidieť falošné pozitívy vo vašom obsahu, pokiaľ pravidelne nepíšete naozaj veľké odseky ako tento.
Zarovnaný text
Nadmerný horný alebo dolný index; dolný index by sa mal používať pre malé referencie a poznámky pod čiarou, nie celé vety alebo odseky.
Veľmi malé písmo
* Falošné zoznamy pomocou bežných znakov,
* písmen, čísiel a emoji.
Formuláre
Tlačidlo bez popisky
Vstupy s neviditeľnou popiskou s otázkou, či existuje aj viditeľná popiska.
Vstupy s iba zástupným textom ako popiskou s otázkou, či existuje aj viditeľná popiska.
Tlačidlo s prístupnou popiskou odlišnou od viditeľnej popisky.
Tlačidlo s neplatným atribútom aria-labelledby.
Tlačidlo s nadbytočnou popiskou.
Tlačidlo Reset.