Testování WAI-ARIA značení v HTML dokumentech

Spíš, než že bych chtěl radit, se ptám: jak testujete, jestli váš HTML kód je dobře udělaný z hlediska WAI-ARIA značení? (Řeč je teď hlavně o landmarks, ale pochopitelně testováním by měly projít i ostatní skupiny značení.) A nemyslím syntakticky správně – to vám do nějaké míry otestuje HTML validátor (víte, že element nemůže mít role="navigation search"?) Myslím:

• jestli všechny prvky na stránce, které mohou být opatřeny některou z landmarks, jí označeny jsou
• jestli všechny prvky na stránce, které jsou nějak WAI-árijsky označeny, jsou označeny správně

Čili jde mi o sémantické chyby a neúplnosti. Totiž, prvních pár webů, které jsem nakódoval včetně WAI-ARIA landmarks, jsem nijak netestoval. Napsal jsem kód, a spoléhal jsem, že je napsán správně. Na ověřování jsem nemyslel.

Napadají mě dva způsoby ověřování:

• kontrola přímo čtečkou (nebo simulátorem hlasové čtečky), nebo kontrola výstupu nějakého parseru, který se na landmarks zaměří. Dá se říct, že je kontrolována použitelnost při přístupu k prvkům stránky skrze landmarks. To jsem zatím nezkoušel a ani nevím, jestli to nějaký snadno dostupný software umožňuje.
• kontrola vizuální. Zobrazím si stránku v prohlížeči a vizuálně zvýrazním prvky takto označkované (vč. popisku, jak jsou označkované). Myslím, že to může nabídnout informaci, která není patrná z pohledu na zdrojový kód. Vidím stránku z jiného pohledu, mohu kontrolovat shodu mezi značkováním a obsahem i úplnost označkování. To jsem zkoušel.

Vizuální kontrola WAI-ARIA značkování

1. Jednak je tady pěkný Firefox add-on Juicy Studio Accessibility Toolbar, který může buď vygenerovat tabulku použitých rolí anebo označit orolované prvky přímo ve stránce. (Mrkněte na stránku pluginu, je to tam na obrázku.) Nějaké info poskytne i add-on Semantic Checker, ale ten je trochu kvantitativně ujetej.
2. Druhá možnost je použít takovýto banální jQuery kód (alespoň pro základný info o rolích na stránce). Předpokládám, že si ho vložíte do konzole ve Firebugu, Web Inspectoru, Dragonfly nebo jiné.

   $('<style>[role] {border:2px dotted #456; position:relative} [role]:before {content:attr(role); background-color:#456; color:#fff; padding:3px; position:absolute; left:0; top:0}</style>').appendTo('body');

Vyzkoušet si a) i b) můžete třeba zde (jo, mám tam chyby).

Při svém průzkumu jsem narazil na tento zajímavý blog o přístupnosti: The Paciello Group Blog. Myslím, že jim patří i něco kreditu za informace zde, pozornost ale zajisté.

Hm?