Není odkaz jako odkaz

Dnešní článek bude věnovám odkazům - jak psát, aby byly dobře vidět a přitom nevadily uživateli ve čtení. Pryč jsou totiž doby, kdy odkaz byl v podobě klikněte zde. Takovýto odkaz je nejen proti použitelnosti, ale také proti přístupnosti.

I. Podtrhávejte všechny odkazy a nepodtrhávejte nic, co není odkazem. Už to, že tag {a} má od přírody nastavené nějaké podtržení znamená, že to asi nějaký smysl bude mít. Uživatel je zvyklý, že odkaz je podtrhnutý, pokud vidí podtrhnutý text, řekne si, aha tohle bude odkaz. Pokud vidí pouze nějak barevně odlišený text, řekne si, hmm, tohle je nějaký výrazný text, možná to je taky odkaz, zkusím to.

Sami vidíte ten rozdíl. Podtrhnutý a barevně odlišený text je uživateli vnímán bez pochybností jako odkaz. Naproti tomu, když vidí nějaký text, který je odlišen jinak než podtrhnutím (pouze barevně, tučné písmo, kurzíva apod.), budou chvíli váhat, jestli to je odkaz nebo není. Většinou to zjistí tak, že nad text najedou kurzorem myši a když se objeví ona pacička, zajásají. Opravdu nepodtrhávejte nic než odkaz, ani pokud by se jednalo o nadpis či něco opravdu významného. Důležitost nadpisu bývá dána v jeho velikosti a odsazením od textu a pro vyznačení důležitého textu zase slouží tagy jako {strong} nebo {em}.

Častým argumentem proti podtrženým odkazům bývá, že to není estetické. Osobně se přiznám, že jsem neviděl žádný web, na kterém by se mi podtržený odkaz hnusil. Ale budiž. Pokud tedy skutečně nechcete podtržené odkazy, vyberte si jiný způsob, jak je výrazně odlišit od okolního textu. Nejlépe pak ještě přidat nějaký symbol za odkaz, jako má třeba Pixy.

Navíc odkaz, který je odlišen pouze barevně má dvě zásadní negativa - designer může zvolit malou barevnou odlišnost od okolního textu (špatný kontrast) a odkaz se tak stane neviditelný a neviditelný odkaz = žádný odkaz. No a za druhé - uživatel si může myslet, že to je pouze zvýrazněný (nebo též důležitý) text, ne odkaz.

Samozřejmě toto pravidlo neplatí tam, kde je zcela evidentní, že se jedná o odkaz. Typický příklad je menu. Tam odkaz pochopitelně podtržený být nemusí, zde by to už opravdu vypadalo neesteticky. Běžnému uživateli je jasné, že v menu najde odkazy.

II. Z textu odkazu má být jasné, kam odkaz směřuje, takže odkazy typu klikněte zde jsou opravdu nepřijatelné a to hned z několika důvodů. Protože slovo zde je poněkud malé, dost špatně se na něj kliká. Z tohoto pohledu jsou mnohem lepší větší (delší) odkazy.

Dále pokud se podíváte na text odkazu - zde - poznáte, kam odkaz vede? Vede na stránku kontakty nebo na freepornxxx? To nezjistíte. Pokud by byl text takovýto - pokud máte nějaké dotazy, kontaktuje nás, je zcela jasné, kam odkaz vede, i pokud by text - kontaktuje nás - stál sám o sobě. Samozřejmě můžete namítnout, že i takovýto odkaz může vést na freepornxxx, ale to už je pak otázka důvěryhodnosti serveru, ne použitelnosti:-)

Poslední důvod je relativně jednoduchý a prostý - představte si, že si stránku vytisknete a všude tam bude text klikněte zde. Přinejmenším to bude vypadat dost blbě. Takže s tím souvisí další pravidlo -

III. Text odkazu má být součástí okolního textu, tudíž kdybyste z toho odkazu udělali normální text, nemělo by být poznat, že se dříve jednalo o odkaz. Odkaz by prostě neměl nijak razit z kontextu, měl by zapadnout mezi okolní text jako poslední díl skládanky. Příklad:

_…pokud jste postupovali správně, váš pracně vytvořený objekt se bude pohybovat za kurzorem. Výsledek si můžete prohlédnout. To ale není všechno, můžeme ještě…

_Zde odkaz není součástí textu, kdyby ten odkaz nebyl funkční, nedával by text smysl. Kde si mám ten výsledek prohlédnout? Nebylo by jednodušší dát odkaz takto?

_…pokud jste postupovali správně, váš pracně vytvořený objekt se bude pohybovat za kurzorem. To ale není všechno, můžeme ještě…

_Odkaz je nyní logičtěji vložený, zapadá do okolního textu a navíc je zřetelnější už jen ze samotného textu, kam daný odkaz vede. Samozřejmě ne vždy to jde zapsat odkaz tak, aby zcela zapadl do okolního textu a ještě bylo na sto procent jasné, kam vede. I z textu - pohybovat za kurzorem - není úplně jasné, kam odkaz povede, ale je to pořád jasnější, než z textu - můžete prohlédnout.

IV. U obrázkových odkazů by mělo být jasné, že se na ně dá kliknout. Nemyslím zrovna různé obrázkové tlačítka nebo (nedejbože) obrázková menu, ale různé “polodekorační” obrázky - třeba krásná rozevřená kniha, která je ve skutečnosti odkazem na knižní novinky.

Zviditelnit textové odkazy je jednoduché, stačí podtrhnout a změnit barvu písma a hned je to všem jasné, ale u obrázků je to horší. Pokud slouží obrázek jako odkaz, automaticky bývá ohraničen fialovým okrajem, který ale záhy autor nechá přes css zmizet, protože to vypadá děsně - bohužel to je ale pravda. Takže to chce jiný způsob.

Ideální je, pokud obrázek nemizí různě do ztracena, není po okrajích poloprůhledný apod. Vyjímku tvoří například logo, u kterého je naopak zvykem, že je klikací vždy. Také je velmi důležité, aby byl obrázek věcný, uživatel by si ho neměl splést s dekoračním obrázkem. Třeba na kniha.cz musí být všem návštěvníkům jasné, že obrázky knih zároveň slouží jako odkaz.

V. Používejte hover u odkazů, vypadá to lépe. Nemám pro to žádné logické vysvětlení, ale prostě uživatelé jsou zvyklý na to, že když přejedou kurzorem přes odkaz, něco to udělá. Většinou text změní barvu nebo se změní pozadí. Nepoužíval bych změnu z normálního písma na tučné, protože, obzvláště v normálním delším textu, se písmo zvětší a musí se přeskupit celý odstavec a vypadá to pak blbě.

VI. Stejné odkazy na stránce odlište různým titlem. Občas se stane, že použijete na stránce více stejných odkazů. Například odkaz - objednat - pokud je tento odkaz v rámci nějakého uceleného bloku, kde se popisuje jeden druh výrobku, většina uživatelů pochopí, který výrobek ten a ten odkaz objednává.

Jenže takovýto zápis odkazu není příliš přístupný pro různě hendikepované lidi, takže správně by měl odkaz obsahovat atribut title, který objasní znění odkazu. Takže by to vypadalo asi takto: {a href=”vyrobek_xyz.php” title=”objednat výrobek xyz”}objednat{/a}.

Atribut title můžete pochopitelně použít kdykoliv, když není zcela jasné, kam odkaz vede, nejenom když je na stránce vícero stejných odkazů.