Odstraňte bariéry svého webu – odkazy a formuláře

14. května 2002

•

Vytvořit odkaz není na první pohled nic složitého. Totéž by se dalo říci o formulářích. Vytváříte je ale správně, nebo se jen spokojíte s funkčností, nikoli však s užitečností? Přitom není složité odstranit bariéry i tady.

Odkazy

Odkazy jsou základním stavebním prvkem webu, a proto byste jejich dobré přístupnosti měli věnovat velkou pozornost. Nejprve musíte dobře zvážit obsah odkazu, nebo-li text, který ho reprezentuje. Ten by měl být volen tak, aby i sám o sobě, tedy bez kontextu, dával smysl a uživatel věděl, co pod ním najde. Při nevizuálním výstupu si totiž často nejdříve projde všechny odkazy na stránce a až potom samotnou stránku.

Podrobný popisný text u každého odkazu by ovšem při vizuálním výstupu nepůsobil příliš dobře. Tento problém řeší atribut title elementu a. Do něj můžete ukrýt podrobný popis odkazu a jako samotný obsah odkazu uvést pouze text zapadající do celkového vyznění stránky. Obsahem atributu title by tedy měl být text, který by plně nahrazoval text odkazu (k čemuž často dochází u nevizuálních prohlížečů) a zároveň ho i rozšiřoval. Proto nepřichází v úvahu jakýkoli text, který by byl pouze jakýmsi pokračováním textu odkazu. Vizuální prohlížeče většinou interpretují atribut title jako tooltip při najetí myší nad odkaz.

Pokud je obsahem odkazu obrázek, měli byste uvést rozšiřující popisný text do jeho atributu alt. V takovém případě už se atribut title neuvádí. Pokud je odkaz tvořen obrázkem i vysvětlujícím textem, měla by být obsahem atributu alt mezera (“ „). V tomto případě opět můžete použít atribut title elementu a pro další popis odkazu.

Pokud uvádíte více odkazů vedle sebe, měli byste je něčím oddělit, například pomocí znaků „|“,“[]“, jejich výběr závisí jen na vás. Pokud jsou dva nebo více odkazů na stránce reprezentovány stejným textem, měly by vést na stejnou adresu, jinak může dojít ke zmatení uživatele. Pokud musíte uvést odkazy se stejným textem a odlišnou adresou, měli byste je odlišit alespoň rozdílným obsahem atributu title. Příklad:

Záznam mých narozenin si můžete prohlédnout ve formátu
<a href=“narozeniny.mpeg“ title=“Záznam mých narozenin ve formátu MPEG“>MPEG</a>,
<a href=“narozeniny.avi“ title=“Záznam mých narozenin ve formátu AVI“>AVI</a>
nebo <a href=“narozeniny.swf“ title=“Záznam mých narozenin ve formátu SWF“>SWF</a>.

Někteří uživatelé se stránkou pohybují tak, že přeskakují po odkazech a formulářových polích (většinou pomocí klávesy TAB). Tento postup je běžný u nevizuálních prohlížečů. Takový uživatel musí ve většině případů nejprve projít část stránky, která je společná pro celý web (navigace, novinky…), a až poté se dostane k samotnému obsahu stránky. Proto byste mu měli umožnit takovou část stránky přeskočit. To se dá vcelku dobře realizovat pomocí odkazu na kotvu, která se nachází dále v dokumentu. Příklad:

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.0//EN“ „http://www.w3.org/TR/REC-html40/strict.dtd“>
<html lang=“cs“>
<head>
  <title>Dokument</title>
  <meta http-equiv=“content-language“ content=“cs“>
  <meta http-equiv=“content-type“ content=“text/html; charset=iso-8859-2″>
</head>
<body>
<p>
[<a href=“#obsah“>přeskočit navigaci</a>]
…zde se nachází navigace…
</p>
<p><a name=“obsah“></a>
…zde se nachází obsah…
</p>
</body>
</html>

Přeskakovací odkaz můžete také poskytovat jen pro určitá media (pomocí CSS vlastnosti display a příkazu @media) nebo můžete jako jeho obsah definovat jednopixelový průhledný GIF, kterému přiřadíte atribut alt „přeskočit xxx„, díky čemuž se k němu dostanou opravdu jen výše zmínění uživatelé. Další možností je potom umožnit uživateli celý „zbytečný obsah“ pomocí CSS schovat.

Další pravidlo se týká otevírání nových oken prohlížeče. Nebudu zde polemizovat, zda je tato metoda vhodná či ne (takovou polemiku si můžete přečíst například na serveru Sova v síti). Podle pravidel pro přístupný web byste neměli otevírat nová okna ani měnit obsah jiných oken bez předchozího upozornění uživatele.

Dále bych vám chtěl představit tři atributy elementu a, jejichž použití není pro přístupnost bezpodmínečně nutné, ovšem jistě vaší stránce v této oblasti pomohou:

charset – v tomto atributu můžete uvést kódování dokumentu, na který se odkazujete
hreflang – v tomto atributu můžete uvést kód jazyka dokumentu, na který se odkazujete, podle RFC 1766 (alternativní zdroj). Pro češtinu je tento kód cs, pro slovenštinu sk, pro angličtinu en, pro němčinu de atd. Tento kód je často shodný s kódem země, ale jak dokládá čeština, není to pravidlem.
type – tento atribut specifikuje, pokud je uveden, content-type cílového dokumentu podle MIMETYPES

Poslední doporučení se týká atributů accesskey a tabindex, které se vedle odkazů používají také u formulářů. Proto je probereme dále v článku.

Formuláře

Webové formuláře jsou jedny z prvků stránky, které mohou handicapovaným uživatelům značně zpříjemnit život, protože jejich vyplňování není narozdíl od běžných „papírových“ formulářů tolik obtížné. Nyní se podívejme na možnosti jejich zpřístupnění.

Základním problémem přístupnosti formulářů je asociace popisků s formulářovými poli. Ta vzniká při vizuálním výstupu u uživatele automaticky tím, že popisek u pole vidí. Problém nastává u uživatele, který používá prohlížeč s nevizuálním výstupem, hlavně pokud popisek následuje až za samotným políčkem nebo je k designu formuláře použita nevhodně řešená tabulka.

Tento problém řeší element label, do kterého jednoduše uzavřete popis políčka a pak ho s políčkem asociujete. Můžete to provést pomocí atributu for, jehož obsahem je název políčka specifikovaný pomocí atributu id nebo tím, že políčko do elementu label přímo vnoříte. Vše ilustruje příklad:

<label for=“jmeno“>Zde vyplňte Vaše jméno:</label>
<input id=“jmeno“ size=“10″> <!– Samozřejmě můžete použít tag label i s ostatními tagy pro definici formulářových polí. –>
Stejný účinek bude mít i tento zápis:
<label>Zde vyplňte Vaše jméno:
<input size=“10″>
</label>

Pro lepší přístupnost byste také měli seskupovat příbuzné formulářové položky do skupin pomocí elementu fieldset. Ten by měl obsahovat element legend, do kterého se vkládá název příslušné části formuláře. Tyto dva elementy dodají vašemu formuláři logickou strukturu, která pomůže v orientaci každému uživateli. Ve vizuálním prohlížeči se část ohraničená elementem fieldset orámuje a vlevo nahoře se zobrazí nadpis definovaný pomocí elementu legend. Zobrazení lze ale změnit pomocí CSS. Příklad:

<form action=“…“>
  <fieldset>
  <legend>Osobní údaje</legend>
    <label>Jméno: <input size=“10″></label>
    <label>Příjmení: <input size=“10″></label>
  </fieldset>
  <fieldset>
  <legend>Záliby</legend>
    <label>Jaké sporty rád provozujete: <input size=“10″></label>
    <label>A na jaké úrovni: <textarea rows=“20″ cols=“18″></textarea></label>
  </fieldset>
</form>

Další část formulářů, které byste měli trochu logičtěji strukturovat, jsou rolovací nabídky, tvořené elementem select. Samotnou nabídku tvoří sada elementů option, kde každý z nich reprezentuje jednu možnost ve výběru. Tyto elementy můžete sdružovat do skupin pomocí elementu optgroup především tehdy, skládá-li se položka z takových možností výběru, které nestojí na stejné logické úrovni. Příklad:

<form action=“…“><p>
<label>Jaký operační systém používáte?
  <select>
    <optgroup label=“Windows“>
      <option label=“95″>Windows 95</option>
      <option label=“98″>Windows 98</option>
      <option label=“NT“>Windows NT</option>
      <option label=“2000″>Windows 2000</option>
      <option label=“XP“>Windows XP</option>
    </optgroup>
    <optgroup label=“Linux“>
      <option label=“SuSE“>SuSE Linux</option>
      <option label=“Red Hat“>Red Hat Linux</option>
    </optgroup>
    <optgroup label=“Jiný“>
      <option>Mac OS</option>
      <option>OS 2</option>
      <option>UNIX</option>
    </optgroup>
  </select>
</label>
</p></form>

Ve vizuálních prohlížečích se tento kód může zobrazit jako běžná nabídka, pouze se zvýrazněnými názvy skupin, nebo jako klasické stromové menu. V takovém případě bývají pro názvy kategorií použity hodnoty atributů label elementů optgroup a pro hodnoty uvnitř jednotlivých kategorií jsou potom použity pouze zkratkové názvy obsažené v atributech label elementů option.

Alternativní text byste měli poskytovat také ke grafickým tlačítkům, používaným ve formulářích (input type="submit" a button). Pro tento text platí stejné zásady jako pro alternativní text obrázků (který jsme probírali ve druhém díle našeho seriálu).

Přístup k formulářům z klávesnice byste také měli usnadňovat pomocí atributů accesskey a tabindex.

Atributy `accesskey` a `tabindex`

Tyto atributy značně ulehčují práci se stránkou uživatelům, kteří s ní nepracují pomocí ukazovacího vstupního zařízení (pointing input device), například myši.

Začneme atributem accesskey. Lze ho použít u elementů a, area, button, input, label, legend a textarea. Jeho obsahem je jeden znak ze znakové sady dokumentu, ze kterého vytvoří prohlížeč klávesovou zkratku příslušného elementu. Výsledná podoba této zkratky závisí na platformě uživatele, u Windows to bývá klávesa Alt a příslušný znak, u platforem Apple potom klávesa Cmd ve spojení s příslušným znakem.

Tento atribut je vhodné používat především u důležitých odkazů a formulářů. Klávesovou zkratku je vhodnější asociovat s elementem label příslušného formulářového elementu, protože uživatel se díky tomu přemístí přesně k elementu a může se rozhodnout, zda jej aktivuje. Naproti tomu použití klávesové zkratky přímo s elementem formuláře by vyvolalo například zaškrtnutí výběrového políčka, což je nežádoucí.

Nikde není definováno, zda mají prohlížeče dát uživateli nějakým způsobem vědět o tom, že k příslušnému elementu lze přistupovat pomocí klávesové zkratky. Proto byste o tom měli uživatele nějakým způsobem informovat. Možností je mnoho, například zahrnout jejich popis do návodu k použití webu, dát jejich popis do atributu title elementu a nebo atributu alt elementu img (v případě, že je odkaz reprezentován obrázkem) nebo pomocí strukturálních elementů zdůraznit příslušná písmena v textu odkazu či popisu formulářového pole:

<p id=“navigace“>
<a href=“odkazy.html“ accesskey=“O“ title=“Odkazy [klávesová zkratka O]“>Odkazy</a> |
<a href=“kdo_jsme.html“ accesskey=“K“><img src=“kdo_jsme.gif“ width=“40″ height=“15″ alt=“Kdo jsme [klávesová zkratka K]“></a>
</p>

Nebo:

Na závěr několik poznámek k atributu tabindex. Ten se dá používat u elementů a, area, button, input, object, select a textarea. Jeho funkce je trochu jiná než u atributu accesskey. Pokud se uživatel pohybuje po stránce pomocí klávesnice (typicky pomocí klávesy TAB), postupuje po jednotlivých elementech tak, jak následují ve zdrojovém kódu dokumentu. Toto pořadí můžete u zmiňovaných elementů změnit, a to právě pomocí atributu tabindex. Jeho obsahem může být číslo v rozsahu od 0 do 32767.

Pohyb pomocí klávesnice potom probíhá tak, že se kurzor nejprve přesune na ty elementy, které mají přidělen atribut tabindex a jeho hodnota je jiná než 0 (atribut s nulovou hodnotou je ignorován), a to v pořadí od nejnižšího do nejvyššího čísla. Poté se kurzor zaměřuje na elementy, které nemají přidělen atribut tabindex nebo je u nich jeho hodnota nulová, a to podle pořadí ve zdrojovém kódu dokumentu. Proto je vhodné přiřadit tento atribut důležitým elementům stránky, aby byly rychle přístupné uživateli, který nepoužívá ukazovací vstupní zařízení.

To je k atributům accesskey a tabindex všechno. Jejich přítomnost může zpříjemnit pobyt na stránce mnoha uživatelům, proto byste je měli alespoň v minimální míře používat.