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?


Komentáře (2)

RSS kanál komentářů

    • Komentář číslo: 1
    • *
    • Jméno: Radek Pavlíček
    • Odesláno:
      23.6. 2010 — 12:28

    kontrola přímo čtečkou – to jsem zatím nezkoušel a ani nevím, jestli to nějaký snadno dostupný software umožňuje.

    Ano, umožňuje, aktuální verze JAWS href=„http://­ewj.blindfrien­dly.cz“ rel=„nofollow“>http:/­/ewj.blindfri­endly.cz i NVDA href=„http://­ewn.blindfrien­dly.cz“ rel=„nofollow“>http:/­/ewn.blindfri­endly.cz landmarky podporují, takže je možné je pro ověření použít.

    • Komentář číslo: 2
    • *
    • Jméno: Kahi
    • Odesláno:
      23.6. 2010 — 22:56

    [1] Radek Pavlíček: Děkuji. Teď koukám, že nejen landmarks href=„http://­zdrojak.root.cz/clan­ky/pristupnost-ria-strukturovani-dokumentu-a-pristupnost-z-klavesnice/“ rel=„nofollow“>http:/­/zdrojak.root­.cz/clanky/pris­tupnost-ria-strukturovani-dokumentu-a-pristupnost-z-klavesnice/, ale i (přinejmenším některá) značení spíše pro aplikace href=„http://­zdrojak.root.cz/clan­ky/pristupnost-ria-dynamicke-zmeny-obsahu/“ rel=„nofollow“>http:/­/zdrojak.root­.cz/clanky/pris­tupnost-ria-dynamicke-zmeny-obsahu/ jsou implementovány a tedy testovatelné…

Přidat komentář

Nápověda ke psaní komentářů

Zde formátuje Texy!

  • *zvýraznění*
  • **silné zvýraznění**
  • > citace
  • "odkaz":http://kam
  • [4] reakce na komentář
  • zdrojové kódy a více

úplně nahoru