Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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í
1. Struktura stránky
2. Tlačítka
3. Schovávání obsahu
4. Klávesnice
5. Našeptávač
6. Testování
1. Struktura stránky
<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ů...
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...
role="main"
role="banner"
role="navigation" role="search"
role="complementary"
role="contentinfo"
Co jsou orientační body?...
<div role="main">
<main>
×
Používat role atributy nebo HTML5 strukturální elementy?Já dřív HTML5 elementy nedoporučoval, p...
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">
<na...
@media print {
body > *:not(main) {
display: none;
}
}
Dá se s tím navíc kreativně pracovat v kodérské praxi. Tady třeba p...
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
<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 ja...
<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. ...
<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í akt...
<span> ✔
<a> ✔ ✔ ✔
<button> ✔ ✔ ✔ ✔ ✔
Vypadá Kliká Zaměření Význam Mezerník
Není to vidět, ale nativní <button> nebo <inpu...
<a href="#" class="btn"
role="button"
onkeypress="if(event.keyCode==32){…}">
Tlačítko
</a>
Samozřejmě, může se stát, že tl...
Umíte HTML?
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 r...
alert
alertdialog
button
checkbox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progress...
alert
alertdialog
button
checkbox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progress...
alert
alertdialog
button
checkbox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progress...
1. Struktura stránky
2. Tlačítka
3. Schovávání obsahu
4. Klávesnice
5. Našeptávač
6. Testování
3. Schovávání obsahu
display: none;
visibility: hidden;
<div hidden>…</div>
⨯ ⨯⨯
Když chcete prvek schovat, použijete asi display: none. Jenže ...
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.
...
<a href="#main" class="skip-link">
Přejít na obsah
</a>
.skip-link {
position: absolute;
top: 0;
right: 100%;
}
.skip-link...
<span class="icon" aria-hidden="true">
</span>
⨯ ⨯
Některé prvky bývají v kódu jen pro servisní účely. Jako tady span pro ...
<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ě...
1. Struktura stránky
2. Tlačítka
3. Schovávání obsahu
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 „fo...
<button disabled>
Tlačítko
</button>
Zase příklad s tlačítkem: zakázaný <button> focus automaticky
prohlížeč vyloučí ze „z...
<a href="#"
class="btn btn--disabled"
tabindex="-1">
Tlačítko
</a>
U tlačítka to musíme dodělat ručně pomocí tabindexu. Mr...
Přidání focusu a možnosti tabnutí:
<ul tabindex="0">
…
</ul>
tabindex="0" umožní zaměřit jinak klávesnicí nezaměřitelný el...
* {
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...
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ží...
• tabulátor - posun po aktivních elementech
• mezerník - aktivace elementu
• enter - odeslání, přechod jinam
1. Struktura stránky
2. Tlačítka
3. Schovávání obsahu
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">
...
<label for="search">
Hledám:
<input type="text" value="Hrušky" id="search" autocomplete="off"
role="combobox">
</label>
<u...
<label for="search">
Hledám:
<input type="text" value="Hrušky" id="search" autocomplete="off"
role="combobox"
aria-describ...
<label for="search">
Hledám:
<input type="text" value="Hrušky" id="search" autocomplete="off"
role="combobox"
aria-describ...
<label for="search">
Hledám:
<input type="text" value="Hrušky" id="search" autocomplete="off"
role="combobox"
aria-describ...
1. Struktura stránky
2. Tlačítka
3. Schovávání obsahu
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 t...
JAWS
Explorer
VoiceOver
Safari
TalkBack
Chrome
Windows
NVDA
Firefox
Apple Android
Úplně nejlepší je testovat to v reálných...
1. <main role="main">
2. Aktivní prvek? <button>!
3. role="" pro UI komponenty
4. display: none NE, aria-hidden ANO
5. Oše...
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 v...
Upcoming SlideShare
Loading in …5
×

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

1,976 views

Published on

Přístupnost nemusí bolet. Podíváme se na časté chyby, které kodéři a designéři sekají jako slepý Baťa cvičky. Pak si ukážeme pár jednoduchých tipů, jak bez velké námahy pomoci nevidomým uživatelům vašich webů. A hlavně se podíváme na několik správně nakódovaných návrhových vzorů. Víte jak navrhout například přístupný našeptávač?

Martin Michálek je frontend designér na volné noze s takřka dvacetiletou praxí. Píše blog Vzhůru dolů, spoluzaložil a vede spolek Frontendisti.cz. Hlavně ale pomáhá s návrhem a implementací webových uživatelských rozhraní. V poslední době pracuje pro klienty jako jsou VašeČočky.cz, Svobodná Evropa nebo Česká televize.

Published in: Technology
  • Be the first to comment

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

  1. 1. Ukázky a návrhové vzory Přístupnost v kódu: Martin Michálek WebExpo 2017
  2. 2. 1. Struktura stránky 2. Tlačítka 3. Schovávání obsahu 4. Klávesnice 5. Našeptávač 6. Testování
  3. 3. 1. Struktura stránky 2. Tlačítka 3. Schovávání obsahu 4. Klávesnice 5. Našeptávač 6. Testování 1. Struktura stránky
  4. 4. <h1> <h2> <h3> <h4> <h5> <h6> Tohle pro vás asi nebude nic nového, že?
  5. 5. 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.
  6. 6. Vezměme tři typy uživatelů: běžní (jen po ránu nevyspalí), krátkozrací a nevidomí.
  7. 7. pomalejší 5× Nevidomí uživatelé čteček mohou být až pětkrát pomalejší než vy.
  8. 8. 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.
  9. 9. 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.
  10. 10. <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
  11. 11. Mezitím se ale situace s IE vyřešila.
  12. 12. <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?
  13. 13. @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.
  14. 14. 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
  15. 15. <button> Tlačítko </button> Tohle je tlačítko. To víte.
  16. 16. <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.
  17. 17. <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?
  18. 18. <span class="btn"> Tlačítko </span> Chybí stylování - přidáme třídu.
  19. 19. <span class="btn" role="button"> Tlačítko </span> Chybí význam pro čtečky - přidáme role.
  20. 20. <span class="btn" role="button" tabindex="0"> Tlačítko </span> Chybí možnost zaměření a tabnutí - přidáme tabindex.
  21. 21. <span class="btn" tabindex="0" role="button" onclick="…"> Tlačítko </span> Chybí možnost přechodu jinam - přidáme onclick.
  22. 22. <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!
  23. 23. <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.
  24. 24. <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.
  25. 25. Umíte HTML?
  26. 26. 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í specifikace HTML5 a velmi doporučuji se všechny naučit.
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 1. Struktura stránky 2. Tlačítka 3. Schovávání obsahu 4. Klávesnice 5. Našeptávač 6. Testování 3. Schovávání obsahu
  31. 31. 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?
  32. 32. 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.
  33. 33. <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é.
  34. 34. <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="".
  35. 35. <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í.
  36. 36. 1. Struktura stránky 2. Tlačítka 3. Schovávání obsahu 4. Klávesnice 5. Našeptávač 6. Testování 4. Klávesnice
  37. 37. • 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?
  38. 38. <button disabled> Tlačítko </button> Zase příklad s tlačítkem: zakázaný <button> focus automaticky prohlížeč vyloučí ze „zaměřitelných“.
  39. 39. <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.
  40. 40. 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í.
  41. 41. * { outline: none; } Prosím, nerušte outline.
  42. 42. * { 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ě.
  43. 43. 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.
  44. 44. • tabulátor - posun po aktivních elementech • mezerník - aktivace elementu • enter - odeslání, přechod jinam
  45. 45. 1. Struktura stránky 2. Tlačítka 3. Schovávání obsahu 4. Klávesnice 5. Našeptávač 6. Testování 5. Našeptávač
  46. 46. Krok 1: Máme „normální“ našeptávač.
  47. 47. <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.
  48. 48. <label for="search"> 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.
  49. 49. <label for="search"> Hledám: <input type="text" value="Hrušky" id="search" autocomplete="off" 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 id="results" role="listbox" tabindex="0"> <li role="option">Jablka</li> <li role="option" id="active">Hrušky</li> </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.
  50. 50. <label for="search"> Hledám: <input type="text" value="Hrušky" id="search" autocomplete="off" role="combobox" aria-describedby="description" aria-owns="results"> </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 id="results" role="listbox" tabindex="0"> <li role="option">Jablka</li> <li role="option" id="active">Hrušky</li> </ul> Krok 4: Pomocí aria-owns="" vyrobím propojení mezi inputem a našeptávanými hodnotami.
  51. 51. <label for="search"> Hledám: <input type="text" value="Hrušky" id="search" autocomplete="off" role="combobox" aria-describedby="description" aria-owns="results" aria-activedescendant="active"> </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 id="results" role="listbox" tabindex="0"> <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.
  52. 52. 1. Struktura stránky 2. Tlačítka 3. Schovávání obsahu 4. Klávesnice 5. Našeptávač 6. Testování6. Testování
  53. 53. Nadpisy Pro jednorázové otestování se hodí tenon.io.
  54. 54. V DevTools teď máte Lighthouse, sadu testů, která umí projít i přístupnost.
  55. 55. <div class="button" role="button"> Tlačítko </div> Ale pozor, automaty jsou jen automaty. Jako správný vyhodnotí i třeba takový patvar.
  56. 56. 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í.
  57. 57. 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
  58. 58. 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í.

×