Základní příručka pro kodéra s ohledem na přístupnost.

1. PŘÍSTUPNOST
NENÍ VĚDA

2. PROČ?
HANDICAP != SLEPOTA

3. PO SCHODECH?
TO NEDÁM!

4. PŘÍSTUPNOST
NEDĚLÁME PRO SLEPCE

5. DOBROVOLNÍK!
KDO SE HLÁSÍ?

7. METODIKA WCAG
PRAVIDLA PRO TVORBU
BEZBARIÉROVÉHO WEBU

8. KONTROLNÍ
SEZNAM WCAG
http://blindfriendly.cz/wcag20checklist/

9. METODIKA
BLIND FRIENDLY
http://blindfriendly.cz/metodika

10. LEVEL 1

11. WAI ARIA
<div role="navigation">

13. HTML5 TAGY
<nav>

14. KOMBINACE
<nav role="navigation">

15. HENDIKEPOVANÍ vs. VALIDÁTOR
1:0

16. SÉMANTIKA
DOKUMENTU
h1, h2, p, ul, ol, strong...

17. STRUKTURA
DOKUMENTU
nav, section, aside...

18. OBRÁZKY, MEDIA
alt, title...

19. ZÁKLADNÍ
KONTRAST BAREV
NESPOLUPRACUJE DESIGNÉR
= MÁŠ TROCHU PROBLÉM

20. LEVEL 2

21. VYSOKÝ KONTRAST
NESPOLUPRACUJE DESIGNÉR
= MÁŠ VELKÝ PROBLÉM

22. SKRÝVÁNÍ OBSAHU
display: none
display: hidden

23. SPRÁVNĚ!
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

24. :HOVER, :FOCUS
MUSÍ BÝT ZŘETELNÝ

25. OUTLINE: NONE
...TOMU RUKA UPADNE!
www.outlinenone.com

26. OVLÁDÁNÍ
Z KLÁVESNICE

27. TOK DOKUMENTU
POŘADÍ KODÉR DOLADÍ

28. LEVEL 3

29. PŘESKAKOVACÍ
ODKAZY
POŘÁD DÁVAJÍ SMYSL

30. GRAFICKÉ ODRÁŽKY
list-style-type: none
<ul role="list">

31. SPOLUPRÁCE
S DESIGNÉREM
HNED NA ZAČÁTKU

32. AUDIT
PŘÍSTUPNOSTI
ZVLÁDNETE SAMI

33. GOOGLE LIGHTHOUSE

34. REÁLNÉ
TESTOVÁNÍ
ASISTIVNÍ SOFTWARE

35. UFF...

36. BACHA!
VÍCEÚROVŇOVÉ MENU
FORMULÁŘE
OBRÁZKY, MÉDIA
DESIGNOVÉ VÝSTŘELKY
FORMA VÍTĚZÍ NAD OBSAHEM
MODÁLNÍ OKNA
...NAPADNE VÁS NĚCO?

37. KOHO SLEDOVAT
Radek Pavlíček - @radlicek
Roman Kabelka - @cjneti
www.poslepu.cz
www.blindfriendly.cz
www.portalpelion.cz
www.zdrojak.cz (články od Radka Pavlíčka)
www.teiresias.muni.cz

38. ODKAZY
http://poslepu.cz/jak-na-jednoduchy-audit-pristupnos
ti-otestujte-si-bezbarierovost-sveho-webu/
https://www.zdrojak.cz/serialy/wcag-2-0/
https://www.w3.org/TR/WCAG21/
http://blindfriendly.cz/metodika
http://blindfriendly.cz/wcag20checklist
https://www.master.cz/audit-pristupnosti/
https://a11yproject.com/

39. https://giphy.com/gifs/x-men-1hcgZ4AW2GXza