Přístupnost výpisu článků, novinek a akcí

V tomto článku se zaměříme na další velmi častou záležitost nacházející se na webových stránkách, bude řeč o výpisech článků, novinek, akcí a obecně o jiných podobných výpisech příspěvků, konkrétně o tom, jak tyto výpisy správně implementovat, abychom co možná nejvíce usnadnili jejich čtení těžce zrakově postiženým uživatelům. Doporučení zde uvedená se nicméně netýkají pouze hromadných výpisů, ale rovněž například i stránek s detailem článku, novinky nebo akce.

Jednotlivosti výpisů

Výpisy článků, novinek, akcí a podobně můžou obsahovat následující náležitosti. Dále budeme pro zjednodušení používat termín „příspěvek“.

• Titulek: Měl by být značen pomocí patřičného sémantického HTML elementu pro nadpis čili <h2> až <h6>. Konkrétní úroveň nadpisu by měla být zvolena tak, aby správně zapadala do hierarchie ostatních nadpisů na stránce. Důležité je, aby celý výpis příspěvků byl také uvozen vhodným nadpisem. Pokud je výpis příspěvků hlavním tématem stránky, tak by tento uvozující nadpis měl být značen jako <h1> a titulky ve výpisu příspěvků pak pomocí <h2>. Pokud výpis příspěvků hlavním tématem stránky není a výpis příspěvků nespadá pod ještě jinou sekci, tak by tento výpis měl být uvozen nadpisem <h2> a titulky ve výpisu příspěvků pak značeny pomocí <h3>
• Datum, popřípadě i čas publikace.
• Autor: Typicky realizován jako odkaz na profil autora.
• Ilustrační obrázek: Může být realizován jako odkaz na detail příspěvku.
• Štítky: realizované jako odkazy na související témata.
• Úryvek těla celého příspěvku nebo krátký text vystihující tento příspěvek.
• Odkaz mířící na detail celého příspěvku.

Pořadí jednotlivostí výpisů

Odečítače obrazovky těžce zrakově postiženým uživatelům obecně čtou obsah webové stránky v pořadí, v jakém se obsah vyskytuje ve zdrojovém kódu. Když si uživatel odečítače prochází výpisy příspěvků, tak většinou nejprve skáče po nadpisech, aby našel titulek příspěvku, který ho zajímá, a až poté přejde k sekvenčnímu procházení obsahu řádek po řádku, popřípadě položku po položce. Proto je důležité zajistit následující:

• Datum publikace a autor příspěvku by se měl nacházet bezprostředně za titulkem příspěvku, aby je uživatel neminul.
• Ilustrační obrázek se může nacházet jak za, tak před titulkem článku. Jestliže obrázek není skryt před odečítačem nastavením atributu alt="", viz níže, tak je o něco vhodnější umístit jej před titulek, aby uživateli odečítače při procházení obsahu směrem dolů od titulku nepřekážel.
• Štítky by se měly nacházet buď před titulkem příspěvku, aby je uživatel odečítače nemusel všechny směrem od titulku dolů pracně procházet, anebo až na konci příspěvku či za úryvkem jeho těla.

Odkazy na detail příspěvku

Doporučujeme, aby odkazem na detail příspěvku byl minimálně jeho titulek. Co se týče odkazů s textem „Číst více“, „Celý článek“ nebo podobných nacházejících se za úryvkem těla příspěvku, tak ideální je tyto odkazy vůbec nepoužívat – stačí, že na detail příspěvku už odkazuje titulek a není tedy potřeba přidávat další duplicitní odkaz, který uživatelé pohybující se na stránce pomocí klávesnice musejí při hledání požadovaného příspěvku procházet .

Pokud jde o ilustrační obrázek, tak se obecně doporučuje tento obrázek před odečítačem skrýt nastavením atributu alt na prázdnou hodnotu, tedy alt="". Jestliže však takto pro odečítače skrytý samotný obrázek obalíte do odkazu, tak se dopustíte prohřešku proti přístupnosti, neboť odkaz s obrázkem bude zaměřitelný tabulátorem, ale po jeho zaměření odečítač uživateli neoznámí jméno ani typ zaměřeného prvku, což může být matoucí. Chcete-li ilustrační obrázek realizovat odkazem, tak do stejného odkazu zahrňte (čili elementem <a>obalte) kromě obrázku i titulek příspěvku, a poté už obrázku můžete nastavit atribut alt="", takže po zaměření takového odkazu odečítač přečte jen titulek příspěvku. V krajním případě, nemůžete-li do odkazu zahrnout vedle obrázku i titulek, ale chcete-li obrázek stejně realizovat jako odkaz, tak obrázek neskrývejte a nastavte mu atribut alt="Číst více", pokud tedy míří na detail příspěvku.

Přijatelným, avšak ne až tolik doporučeným řešením také může být obalit do stejného odkazu vše, tedy kromě titulku, obrázku, také i datum autora a úryvek těla příspěvku.

Výstižnost odkazu „Číst více“

Jak jsme již vysvětlili, tak nadbytečný odkaz „Číst více“ nebo podobný doporučujeme spíše nepoužívat, avšak pokud na něm z nějakého důvodu trváte, tak je dobré vědět, jak jej správně realizovat. V pravidlech přístupnosti webového obsahu (Web Content Accessibility Guidelines – WCAG), konkrétně v kritériu 2.4.9 – Link Purpose (Link Only), se můžeme dočíst, že význam odkazu by obecně měl být zřejmý už ze samotného textu odkazu bez jeho kontextu. Aplikováním tohoto pravidla můžeme usoudit, že nestačí jako text odkazu uvést jen např. „Číst více“, ale že by odkaz měl uvádět i název odkazovaného příspěvku, aby jej bylo možné při procházení jen odkazů uživatelem odlišit od ostatních odkazů. Toto kritérium však spadá až do úrovně AAA, kterou většina legislativy pro splnění podmínek přístupnosti nevyžaduje. Vyžadována je jen úroveň AA, do které spadá jiné relevantní kritérium 2.4.4 – Link Purpose (In Context), jež praví, že stačí, aby byl odkaz srozumitelný v rámci kontextu, přičemž jako kontext se zde rozumí stejná věta nebo odstavec, kde se odkaz nachází. Když pak jako odkaz realizujeme rovněž i titulek příspěvku, tak při procházení jen odkazů, například tabulátorem, vždy narazíme nejprve na odkaz s titulkem, a poté na odkaz „Číst více“, takže bude zřejmé, ke kterému příspěvku tento sám o sobě nejednoznačný odkaz náleží.

Uvedeným tvrzením, že není nutné zaručit výstižnost odkazu typu „Číst více“, rozhodně nechceme zpochybnit obecně platné doporučení používat výstižné texty odkazů. Je to pouze výjimka. V  případě odkazů jiného typu by toto obecné doporučení výstižnosti odkazů být následováno bezpochyby mělo.

Element <article>

Na webu se můžeme setkat s používáním HTML elementu <article>, popřípadě odpovídajícího ARIA atributu role="article" se stejným významem. Naše zjištění a doporučení ohledně tohoto elementu a atributu jsou následující:

• Pouze některé odečítače ve výchozím nastavení čtou uživatelům při pohybu na stránce vstup nebo výstup do oblastí stránky vyznačené tímto elementem nebo atributem. V době publikace tohoto článku jej čte odečítač JAWS a VoiceOver v macOS, nečte jej odečítač NVDA ani VoiceOver v iOS.
• Ve výpisech příspěvků doporučujeme tento element či atribut spíše nepoužívat, protože to zvyšuje výřečnost odečítače – čtení vstupu a výstupu do každého příspěvku odečítačem může být pro uživatele otravné a zdlouhavé.
• V detailu příspěvku, pokud se pokrytí segmentu kódu tímto elementem nebo atributem nekryje s hlavní oblastí / landmarkem) stránky, tento element či atribut klidně používat můžete. Může to uživatelům odečítačů pomoci rozlišit kde příspěvek končí a oddělit jej tak například od reklam, komentářů nebo jiného doprovodného obsahu.

Ukázka správné implementace

Jako vzorový příklad správné implementace jak výpisů, tak detailu článků můžeme uvést webové stránky Portálu Pélion zabývající se asistivními technologiemi pro zrakově postižené.

Závěr

Dodržením několika jednoduchých výše uvedených doporučení můžeme dosáhnout zlepšeného komfortu pro těžce zrakově postižené uživatele při čtení výpisů různého druhu příspěvků. Některá tato doporučení, například správné značení nadpisů a odkazů, však mívají vedlejší pozitivní dopad i pro všechny ostatní uživatele a také pro optimalizaci obsahu pro vyhledávače (SEO). Je tedy rozhodně dobré na tyto zásady pamatovat.

Související kritéria úspěšnosti standardu WCAG

Výše zmíněná doporučení vycházejí jednak z dobré praxe, jednak z následujících takzvaných kritérií úspěšnosti webového standardu WCAG 2.2:

• 1.1.1 – Non-text Content.
• 1.3.1 – Info and Relationships.
• 2.4.6 – Headings and Labels.
• 2.4.10 – Section Headings.
• 2.4.4 – Link Purpose (In Context).
• 2.4.9 – Link Purpose (Link Only).

Autor: Adam Samec