WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

Ukázky
a návrhové
vzory
Přístupnost
v kódu:
Martin Michálek
WebExpo 2017

1. Struktura stránky
2. Tlačítka
3. Schovávání obsahu
4. Klávesnice
5. Našeptávač
6. Testování

2. Tlačítka
4. Klávesnice
5. Našeptávač
6. Testování

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Tohle pro vás asi nebude nic nového, že?

Dobrá struktura nadpisů je jeden z důležitých výstupů práce frontendisty. Tady je vidět struktura jednoho
z článků na Vzhůru dolů. Hezky to zpracují vyhledávače nebo třeba odečítače obrazovky zrakově
postižených. Těm ale takovéhle zpracování stránky nějaký čas zabere.

Vezměme tři typy uživatelů: běžní (jen po ránu nevyspalí), krátkozrací a nevidomí.

pomalejší
5×
Nevidomí uživatelé čteček mohou být až pětkrát pomalejší než vy.

režimy
čtečky4Nadpisy
Šipky
Ctrl+F
Orientační body
Čtečky pro nevidomé mají 4 režimy: Procházají nadpisovou strukturu, používají šipky pro rychlé čtení nebo
tabulátor pro procházení aktivních častí. Stejně jako my pak používají CTRL+F, když něco nemohou najít.
A ten nejrychlejší režim - navigaci po orientačních bodech.

role="main"
role="banner"
role="navigation" role="search"
role="complementary"
role="contentinfo"
Co jsou orientační body? Když chce uživatel skočit přímo na navigaci, nemusí procházet nadpisovou
strukturu a všechno číst. Prostě půjde přímo na navigaci. Díky role="" atributům, které přidáte na důležitá
místa stránky.

<div role="main">
<main>
×
Používat role atributy nebo HTML5 strukturální elementy?Já dřív HTML5 elementy nedoporučoval, protože
čtečky podporovaly role atributy, ale moc ne HTML5 tagy. A kvůli starších Explorerů bylo nutné používat
zbytečné Javascripty. https://www.vzhurudolu.cz/prirucka/html5-struktura

Mezitím se ale situace s IE vyřešila.

<main role="main">
<header role="banner">
<div role="search">
<aside role="complementary">
<footer role="contentinfo">
<nav role="navigation">
Q
D
Používejte prostě obojí. Jsou tu ještě klávesové zkratky čteček pro přechod na konkrétní prkvy. Skok na
hlavní obsah nebo navigaci a jedno tlačítko? Bude tenhle uživatel pořád pětkrát pomalejší než vy?

@media print {
body > *:not(main) {
display: none;
}
}
Dá se s tím navíc kreativně pracovat v kodérské praxi. Tady třeba pro tisk schovávám  
všechno, co není hlavní obsah stránky.

2. Tlačítka
4. Klávesnice
5. Našeptávač
6. Testování
2. Tlačítka

<button>
Tlačítko
</button>
Tohle je tlačítko. To víte.

<a href="#" class="btn">
Tlačítko
</a>
Tohle znáte a vsadím se, že i někde používáte. Je ale dobrý nápad stylovat odkaz jako tlačítko? Za chvíli
uvidíte, že nemusí být.

<span>
Tlačítko
</span>
Vezměme to ale z jiné strany - představme si, že jsme prasátka a chceme udělat tlačítko ze spanu. Viděli
jste to někde? Ve vlastním kódu ale ne, že ne?

<span class="btn">
Tlačítko
</span>
Chybí stylování - přidáme třídu.

<span class="btn"
role="button">
Tlačítko
</span>
Chybí význam pro čtečky - přidáme role.

<span class="btn"
role="button"
tabindex="0">
Tlačítko
</span>
Chybí možnost zaměření a tabnutí - přidáme tabindex.

<span class="btn"
tabindex="0"
role="button"
onclick="…">
Tlačítko
</span>
Chybí možnost přechodu jinam - přidáme onclick.

<span class="btn"
tabindex="0"
role="button"
onclick="…"
onkeypress="if(event.keyCode==32){…}">
Tlačítko
</span>
Chybí aktivace z klávesnice na space - přidáme onkeypress.
Teprve teď jsme udělali plnohodnotné tlačítko.
I tak <span> pro tyhle účely opravdu nepoužívejte. Prosím!

<span> ✔
<a> ✔ ✔ ✔
<button> ✔ ✔ ✔ ✔ ✔
Vypadá Kliká Zaměření Význam Mezerník
Není to vidět, ale nativní <button> nebo <input type="submit> v sobě mají nečekanou škálu funkcí. U
<spanu> chybějí všechny, ale některé z nich nemá ani <a>: chybí role="button" a možnost aktivace
mezerníkem.

<a href="#" class="btn"
role="button"
onkeypress="if(event.keyCode==32){…}">
Tlačítko
</a>
Samozřejmě, může se stát, že tlačítko potřebujeme udělat z odkazu. Pak ale ošetřeme význam a přidejme
možnost aktivace mezerníkem.

Jak třeba ale v HTML zapíšete záložkovou navigaci nebo tooltip? Tak, aby čtečka pochopila význam?
Slouží k tomu WAI-ARIA role pro widgety. Další obsah pro atribut role="". Jsou součástí speciﬁkace HTML5
a velmi doporučuji se všechny naučit.

alert
alertdialog
button
checkbox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progressbar
radio
scrollbar
slider
spinbutton
status
tab
tabpanel
textbox
timer
tooltip
treeitem
→ vrdl.in/ariawidget

2. Tlačítka
4. Klávesnice
5. Našeptávač
6. Testování

display: none;
visibility: hidden;
<div hidden>…</div>
⨯ ⨯⨯
Když chcete prvek schovat, použijete asi display: none. Jenže opravdu to chcete? Prvek nebude vidět ve
čtečkách, ale i Google dá schovanému obsahu menší váhu.  
Takže pokud schovávat, nezkusit to dělat chytřeji?

max-height: 0;
overflow: hidden;
opacity: 0;
⨯ ⨯
Čtečky nijak neřeší ořezaný obsah, takže tohle všechno normálně přečtou.
Hlavně max-height: 0; je užitečný pro různé rozklikávání obsahu nebo navigací na mobilech.

<a href="#main" class="skip-link">
Přejít na obsah
</a>
.skip-link {
position: absolute;
top: 0;
right: 100%;
}
.skip-link:focus {
right: auto;
}
⨯
→ vrdl.cz
Další příklad je obsah jen pro čtečky. Odkazy pro přecházení na obsah se stále hodí. Ne všichni mají čtečky,
které umějí ARIA role. Progressive enahancement používáme i při kódování pro zrakově hendikepované.

<span class="icon" aria-hidden="true">
</span>
⨯ ⨯
Některé prvky bývají v kódu jen pro servisní účely. Jako tady span pro ikonku. Je lepší je před čtečkami
schovat, nejlépe pomocí atributu aria-hidden="".

<span class="icon" aria-label="Menu">
</span>
⨯
Ale ještě lepší je opět neschovávatt a dát ji popisek. aria-label="" je něco jako alt="" u obrázků,  
jen naprosto univerzální.

2. Tlačítka
4. Klávesnice
5. Našeptávač
6. Testování
4. Klávesnice

• Interaktivní: <a>, <input>, <video>…
• Nejsou „disabled“
• Nejsou „hidden“
TAB:focus &
Které prvky jsou samy od sebe „fokusovatelné“ (zaměřitelné)  
a je možné k nim přistoupit pomocí tabulátoru?

<button disabled>
Tlačítko
</button>
Zase příklad s tlačítkem: zakázaný <button> focus automaticky
prohlížeč vyloučí ze „zaměřitelných“.

<a href="#"
class="btn btn--disabled"
tabindex="-1">
Tlačítko
</a>
U tlačítka to musíme dodělat ručně pomocí tabindexu. Mrkněme teď na tehle parametr. Tabindex se
záporným číslem schová jinak zaměřitelný element.

Přidání focusu a možnosti tabnutí:
<ul tabindex="0">
…
</ul>
tabindex="0" umožní zaměřit jinak klávesnicí nezaměřitelný element.
Brzy si ukážeme jedno použití.

* {
outline: none;
}
Prosím, nerušte outline.

* {
outline: none;
}
❌
Zbavíte se sice (pro někoho) ošklivého okraje, ale znemožníte zaměřit element z klávesnice.
Kdyžtak to změňte, ale rozumně.

TAB TAB
Neotevírejte vrstvy na focus. Znamená to pak, že musím tabulátorem projít všechny otevírané vrstvy. Lepší
je použít k otevření vrstev nebo podnavigací mezerník.

• tabulátor - posun po aktivních elementech
• mezerník - aktivace elementu
• enter - odeslání, přechod jinam

2. Tlačítka
4. Klávesnice
5. Našeptávač
6. Testování
5. Našeptávač

Krok 1: Máme „normální“ našeptávač.

<label for="search">
Hledám:
<input type="text" value="Hrušky" id="search" autocomplete="off">
</label>
<ul id="results">
<li>Jablka</li>
<li id="active">Hrušky</li>
</ul>
Krok 1: Máme „normální“ našeptávač. Takto vypadá kód.

Hledám:
<input type="text" value="Hrušky" id="search" autocomplete="off"
role="combobox">
</label>
<ul id="results" role="listbox" tabindex="0">
<li role="option">Jablka</li>
<li role="option" id="active">Hrušky</li>
</ul>
Krok 2: Přidám role="" pro význam.

Hledám:
role="combobox"
aria-describedby="description">
</label>
<span id="description" class="sr-only">
Z dostupných hodnot vybírejte šipkami nahoru a dolů.
Pro výběr zmáčkněte klávesu Enter. Na dotykových zařízení
použijte gesto švihnutí nahoru a dolů.
</span>
</ul>
Krok 3: Do #description přidám nápovědu pro ovládání nevidomímy. Pomocí aria-describedby ji pak
napojím na input.

Hledám:
role="combobox"
aria-describedby="description"
aria-owns="results">
</label>
</span>
</ul>
Krok 4: Pomocí aria-owns="" vyrobím propojení mezi inputem a našeptávanými hodnotami.

Hledám:
role="combobox"
aria-describedby="description"
aria-owns="results"
aria-activedescendant="active">
</label>
</span>
<li role="option" aria-selected="false">Jablka</li>
<li role="option" aria-selected="true" id="active">Hrušky</li>
</ul>
→ vrdl.in/autoac
Krok 5: Zvýraznění aktivní položky pomocí aria-selected="" a aria-activedescendant="".
Celý nezjednodušený našeptávač je možné si zkusit na haltersweb.github.io/Accessibility.

2. Tlačítka
4. Klávesnice
5. Našeptávač
6. Testování6. Testování

Nadpisy
Pro jednorázové otestování se hodí tenon.io.

V DevTools teď máte Lighthouse, sadu testů, která umí projít i přístupnost.

<div class="button" role="button">
Tlačítko
</div>
Ale pozor, automaty jsou jen automaty.
Jako správný vyhodnotí i třeba takový patvar.

JAWS
Explorer
VoiceOver
Safari
TalkBack
Chrome
Windows
NVDA
Firefox
Apple Android
Úplně nejlepší je testovat to v reálných čtečkách. Na každé platformě nějaké máte.
Tady jsou doporučené kombinace od Radka Pavlíčka. Takže Vzhůru do testování.

1. <main role="main">
2. Aktivní prvek? <button>!
3. role="" pro UI komponenty
4. display: none NE, aria-hidden ANO
5. Ošetřím :focus a klávesnici
6. aria-label, aria-labelledby
7. Testuju
8. #VzpomenuSi

Díky!
vzhurudolu.cz
@machal
Za inspiraci k přednášce děkuji našemu Honzíkovi a za spolupráci Radkovi Pavlíčkovi.
Díky! A vzpomeňte si při kódování na ostatní.

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

Semelhante a WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory (17)

Mais de Martin Michálek

Mais de Martin Michálek (20)

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory