Archiv rubriky: Přístupnost webu

Vyhlášení výsledků soutěže o e-book Vzhůru do respozivního webdesignu

Včera jsem při příležitosti Světového dne přístupnosti vyhlásil soutěž o e-book Vzhůru do respozivního webdesignu.

Cílem soutěže bylo správně zodpovědět tři otázky, které se týkaly přístupnosti webu. Ač jsem se zpočátku obával, zda jsem soutěž neudělal moc lehkou, její průběh ukázal, že tomu tak nebylo. Správně na všechny tři otázky odpověděly 2/3 soutěžících.

Jaké byly správné odpovědi?

Nejlepší způsob, jak vytvořit strukturu webové stránky, je

  • vyznačit všechny texty, které mají být nadpisy, pomocí hvězdiček.
  • použít odpovídající HTML elementy a role pro definování oblastí stránky.
  • vyznačit ty texty, které jsou nadpisy, pouze vizuálně.
  • definovat si vlastní CSS třídy pro vyznačení nadpisů.

Zdůvodnění viz Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod či Přístupnost HTML5: strukturování obsahu.

Doporučená kombinace screen readeru a webového prohlížeče pro testování přístupnosti webu NENÍ

  • VoiceOver + Safari.
  • WindowEyes + Opera.
  • JAWS + Internet Explorer.
  • NVDA + Mozilla Firefox.

Zdůvodnění viz Testování přístupnosti webu: doporučené kombinace screen readeru a prohlížeče.

Minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů dle WCAG 2.0 je

  • 50:1.
  • 2:1.
  • 4,5:1.
  • 18 :1.

Zdůvodnění viz Jak vybrat barvy pro grafický návrh s ohledem na přístupnost.

Vítězem soutěže se stává…

Ze správných odpovědí jsem nechal generátor náhodných čísel vylosovat vítěze, kterým se stal soutěžící s e-mailovou adresou lubomir.m…a@gmail.com. Srdečně gratuluji.

Všem soutěžícím děkuji za účasti i za zájem o tématiku přístupnosti, Martinu Michálkovi pak za poskytnutí licence e-booku Vzhůru do responzivního designu.

Ověřte si své znalosti o přístupnosti a vyhrajte e-book Vzhůru do responsivního designu

Dnes probíhá už 6. Světový den propagace přístupnosti. Jeho smyslem je šířit osvětu v této oblasti mezi širokou veřejností a motivovat ji k diskusím, přemýšlení a chuti dozvědět se o tématice přístupnosti webu, dokumentů, software, mobilních aplikací, asistivních technologiích či potřebách lidí s nejrůznějším postižením něco nového.

Jednou z více než 40 akcí jsme k němu přispěli o uplynulém víkendu i my ve Středisku Teiresiás, uspořádáním 5. běhu Agory – workshopů o ICT pro uživatele s těžkým postižením zraku, na kterém se se opět sešlo několik desítek zájemců o tuto tématiku.

Ale protože osvěty není nikdy dost, mám dnes pro čtenáře POSLEPU ještě bonus v podobě soutěže.

O co soutěžíme?

Ze správných odpovědí na níže položené otázky vylosujeme jednoho výherce, který získá e-book Vzhůru do responsivního designu od Martina Michálka, kterému tímto děkuji za poskytnutí licence e-booku do soutěže.

Soutěžní otázky

Soutěž běží do pátku 19. května 2017 do 12.00, vítěze vylosujeme a vyhlásíme v pátek 19. května odpoledne.

Tak co, jdete do toho? 🙂

Proč je nejen pro nevidomé uživatele dobré mít výstižné texty odkazů

Jedno ze základních pravidel přístupnosti říká, že z textu (označení) každého odkazu by měl uživatel poznat, kam odkaz vede a co může uživatel na cílové stránce očekávat. Proč je toto pravidlo nejen z hlediska přístupnosti důležité a z jakých potřeb toto pravidlo vychází?

Odpověď je celkem nasnadě: protože uživatel snadno pozná, kam jej odkaz zavede. A to je věc, kterou hádám ocení každý návštěvník webové stránky. Nevýstižné texty odkazů dokáží frustrovat uživatele stejně jako chodba plná dveří, na kterých jsou sice cedulky, ale jejich obsah nám nic neříká o tom, co nebo kdo se za dveřmi nachází.

Jednou ze skupin uživatelů, pro kterou jsou smysluplné a výstižné texty odkazů naprosto zásadní a mohou jim významně usnadnit práci s webem, jsou uživatelé screen readerů (odečítačů obrazovky) – tedy uživatelé nevidomí či prakticky nevidomí.

Screen reader (odečítač obrazovky) je speciální program, který umí získat z webové stránky textové informace a prostřednictvím hlasového nebo hmatového výstupu je předat uživateli. Zprostředkovat tímto způsobem je možné nejen vlastní obsah, ale i sémantické informace (samozřejmě za předpokladu, že jsou na webové stránce k dispozici). Ty mohou uživateli pomoci zorientovat se, jakou má daný element stránky roli (zda se jedná o nadpis, položku seznamu, tlačítko, odkaz, atp.).

Proč jsou odkazy s nevýstižným označením komplikací pro nevidomé uživatele

Primární příčina, proč jsou odkazy „více“, „zde“ či „tady“ problematické, není v rovině technické (tedy ne že by odečítače obrazovky neuměly přečíst kontext odkazu), ale v tom, že jejich použití brzdí uživatele při práci a pro splnění cíle, kvůli kterému na stránku přišel, tak musí vynaložit zvýšené úsilí. Práce se stránkou prostřednictvím hlasového výstupu je pomalejší už sama o sobě, a není ji proto třeba uživateli ještě komplikovat nevhodným označením odkazů.

To, jak rychle a efektivně bude moci uživatel odečítače obrazovky s webovou stránkou pracovat a udělat na ní to, co potřebuje, je tedy pro něj poměrně zásadní.

Ukažme si to na příkladu. Představte si, že máte před sebou webovou stránku, na níž chcete najít odkaz na pozvánku na akci, jíž se chcete zúčastnit. Má to ale jeden háček – na stránku se nesmíte podívat, informace z ní si pouze můžete nechat přečíst screen readerem.

Jaké možnosti se nabízí?

Funkce Najít

První metoda, poměrně hojně používaná kvůli své jednoduchosti, ale ne vždy vedoucí ke kýženému cíli, je metoda „náhodných výbuchů“, spočívající ve vyhledávání konkrétní informace pomocí funkce Najít (Ctrl+F). Uživatel zkouší hledat slova (či části slov), pomocí nichž by mohl požadovaný odkaz dohledat – což se někdy zadaří, někdy ne. Obecně platí, že při použití této metody hodně záleží jak na dovednosti konkrétního uživatele zformulovat dotaz pro hledání, tak na tom, zda se daný řetězec na stránce vyskytuje.

Pokud bych chtěl odkaz na pozvánku tímto způsobem najít, ale text odkazu na pozvánku bude v podobě Klikněte zde pro vice informací a ani okolní text nebude tuto informaci obsahovat, nejspíš nebudu úspěšný.

Pohyb po odkazech

Další možností je projít si cíleně jen ty prvky stránky, které mohou získat focus (mezi ně patří i odkazy). Lze k tomu použít buď tabulátor, nebo využít funkci screen readeru a nechat si zobrazit seznam formulářových prvků či odkazů. Tím si mohu okruh prohledávaných informací významně snížit, ale opět platí to, že pokud texty odkazů nejsou dostatečně výstižné, nemusí být snadné zjistit, kam který odkaz vede. Technicky je samozřejmě možné si u každého odkazu přečíst jeho kontext, ale zde je opět riziko, že okolní text relevantní informaci nebude obsahovat.

JAWS – dialogové okno Vybrat odkaz

Přečtení celé stránky od začátku do konce

Třetí – nejpracnější a časově nejnáročnější – metoda spočívá v pročtení celé stránky od začátku až do konce. Tento způsob práce se stránkou zaručí, že žádnou (přístupně prezentovanou) informaci na stránce neminu, ale v praxi takto kvůli enormní časové náročnosti s webem nikdo nepracuje.

Co z toho plyne?

Z výše uvedených příkladů je zřejmé, že výstižné označování odkazů může uživatelům práci se stránkou významně zjednodušit. Nejen těm nevidomým, ale prakticky všem, kdo nechtějí metodou pokus-omyl zkoušet, který že odkaz je ten pravý. Jako třeba v případě, ilustrovaném screenshotem níže, na kterém je pod sebou sedm identických odkazů Tisková zpráva.

Screenshot – sedm identických odkazů Tisková zpráva

Je také velmi důležité, aby nosičem informace byl text odkazu, ne třeba obsah atributu title. Použití atributu title je z hlediska přístupnosti také problematické a lze jej doporučit jen ve výjimečných případech.

Jak na to?

Řešení je poměrně snadné – volit texty odkazů tak, aby i samy o sobě dávaly smysl a popisovaly cíl, na který odkaz vede.

Nevhodné řešení

Více informací najdete zde.

Vhodné řešení

Více informací najdete v pozvánce na Dětský den.

Aktualizace 14. dubna 2017

Tématu se věnuje i Dan Dočekal v článku TIP#371: Proč neodkazovat slovem „zde“? a naprosto jednoznačně podporuje používání výstižných textů odkazů.