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.
Víte, že nevíte, že já vím, že nevíte? (WebTop100 2014)Michal Špaček
Víte, že nevíte, že já vím, že nevíte?
Po přednášce už budete vědět. Ukážu vám pár chyb, které možná již znáte, jen netušíte, že kvůli nim zrovna váš web opouští data vaše nebo vašich uživatelů. A že budete bezpečnost webu řešit až se něco stane a že se ještě nic nestalo? Jasně, tak hlavně přijďte :-)
Přístupnost se stále více začíná dostávat do popředí zájmu i provozovatelů a tvůrců velkých webů. Co je k tomu vede? Potřeby a zpětná vazba uživatelů? Altruismus? Připravovaná evropská legislativa? Nebo všechno dohromady? Na konkrétních příkladech (irozhlas.cz, volby.cz a některých dalších) si ukážeme, jak při zpřístupnění velkých webů postupovat, na co si dát pozor a na co naopak nezapomenout.
Prezentace zazněla na konferenci WebExpo 2017, která se konala 22. a 23. září 2017 v pražské Lucerně.
Hobby Developer 3.0: Tipy a triky pro webTomáš Muchka
Develop functional useful webpages, not monsters with the size of classic games. This presentation will guide you through all stages of modern web page development with tons of examples from his a real hobby project: http://lan.strazov.cz
Prezentace Inkscape a jeho použití v mojí praxi Petr Šimčík
Prezentace Inkscape a jeho použití v mojí praxi, prezentace vznikla k workshopu na LinuxDays 2014. Dají se na ní najít základní pokyny na rozřezání grafiky pro web a přípravy pro tisk v Open Source prostředí. Inkscape a Scribus
Víte, že nevíte, že já vím, že nevíte? (WebTop100 2014)Michal Špaček
Víte, že nevíte, že já vím, že nevíte?
Po přednášce už budete vědět. Ukážu vám pár chyb, které možná již znáte, jen netušíte, že kvůli nim zrovna váš web opouští data vaše nebo vašich uživatelů. A že budete bezpečnost webu řešit až se něco stane a že se ještě nic nestalo? Jasně, tak hlavně přijďte :-)
Přístupnost se stále více začíná dostávat do popředí zájmu i provozovatelů a tvůrců velkých webů. Co je k tomu vede? Potřeby a zpětná vazba uživatelů? Altruismus? Připravovaná evropská legislativa? Nebo všechno dohromady? Na konkrétních příkladech (irozhlas.cz, volby.cz a některých dalších) si ukážeme, jak při zpřístupnění velkých webů postupovat, na co si dát pozor a na co naopak nezapomenout.
Prezentace zazněla na konferenci WebExpo 2017, která se konala 22. a 23. září 2017 v pražské Lucerně.
Hobby Developer 3.0: Tipy a triky pro webTomáš Muchka
Develop functional useful webpages, not monsters with the size of classic games. This presentation will guide you through all stages of modern web page development with tons of examples from his a real hobby project: http://lan.strazov.cz
Prezentace Inkscape a jeho použití v mojí praxi Petr Šimčík
Prezentace Inkscape a jeho použití v mojí praxi, prezentace vznikla k workshopu na LinuxDays 2014. Dají se na ní najít základní pokyny na rozřezání grafiky pro web a přípravy pro tisk v Open Source prostředí. Inkscape a Scribus
V rámci předmětu Seminář webdesignu na FI MUNI jsem přednášel pro nadšence webdesignu. Nemůžu jinak než se o přednášku s vámi podělit a všem studentům FI doporučit tento předmět.
Martin Zeman - Moje první aplikace v Symfony 3 (4. sraz přátel Symfony v Praze)Péhápkaři
90 % webových aplikací funguje stylem "získám uživatelská data, uložím si je do nějakého storage a pak si je prohlédnu na bezpečné stránce". Se Symfony 3 je tohle otázka pár minut.
Moje první aplikace v Symfony 3 + překvapení (4. sraz přátel Symfony v Praze)Martin Zeman
90% webových aplikací funguje stylem "získám uživatelská data, uložím si je do nějakého storage a pak si je prohlédnu na bezpečné stránce".
Se Symfony 3 je tohle otázka pár minut.
https://github.com/Zemistr/symfony-3-first-app
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
Jak navrhnout úspěšný web krok za krokem | VŠB - APPLE JUICE MEETING | 27.3.2014Jan Kvasnička
Jedná se o postup jak navrhnout úspěšný střední a menší web tak, aby byl co nejúčinnější. Více informací najdete v článku: http://blog.kvasnickajan.cz/jak-navrhnout-uspesny-web-krok-za-krokem-aneb-jak-hodne-se-muzetemate-zapojit/
I knihovnám může přístupnost přinést celou řadu výhod - snížit provozní náklady, zvýšit počet návštěvníků či pozitivní nahlížení veřejnosti na knihovnu jako takovou. Pojďme si ukázat, jak i malou změnou na webové stránce můžeme výrazně zlepšit její přístupnost a získat tak výhody, které přístupnost přináší.
Krátce se také podíváme na to, jak testujeme přístupnost v soutěži Biblioweb, na jaké problémy na webech knihoven nejčastěji narážíme, a jak je možné tyto bariéry odstranit.
Accessibility can bring a lot of benefits also for libraries – reduction of operation costs, raising of amount of visitors or improvement of library´s PR. Let´s show how even a small change on a web page could dramatically increase its accessibility and help to gain benefits, that accessibility brings.
Let me also briefly introduce you our way of accessibility evaluation in Biblioweb contest, show you the problems, which we often meet and ways, how it´s possible to remove these barriers.
Vývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek
V přednášce se podíváme na zajímavé novinky, které vám usnadní dělat rychlejší weby. Je zde spousta nových technologií, které můžeme v prohlížečích používat už nyní, ale mezi vývojáři nemají takovou popularitu. A to nemluvíme o nových nástrojích pro ladění rychlosti, které jsou po ruce a šetří nám čas.
CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
My slides from WebExpo 2022 keynote for Frontendisti.cz stage.
The world is changing, the frontend is changing, and we have to change with it. What makes 2022 special? Take a look at it through the eyes of a representative of the Frontendisti.cz community.
https://www.webexpo.net/prague2022/talk/frontend-keynote
„To my ne, to oni!“ – komponenty třetích stran a rychlost webuMartin Michálek
Third-parties nám zpomalují weby. To víme. Ale skutečně jsme jako vývojáři proti nim tak bezbranní, jak si občas myslíme? V přednášce si ukážeme jak identifikovat problematické komponenty třetích stran a jak minimalizovat jejich dopady na rychlost webu.
V posledním roce jsem spolupracoval na optimalizaci zhruba dvacítky webů, většinou e-shopů. Před přednáškou jsem se zamyslel, které technické úpravy obvykle pomohou rychlost nějak popostrčit k lepšímu. Vznikl tak seznam o 17 bodech. V Ostravě si je všechny jeden po druhém projdeme.
More Related Content
Similar to WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
V rámci předmětu Seminář webdesignu na FI MUNI jsem přednášel pro nadšence webdesignu. Nemůžu jinak než se o přednášku s vámi podělit a všem studentům FI doporučit tento předmět.
Martin Zeman - Moje první aplikace v Symfony 3 (4. sraz přátel Symfony v Praze)Péhápkaři
90 % webových aplikací funguje stylem "získám uživatelská data, uložím si je do nějakého storage a pak si je prohlédnu na bezpečné stránce". Se Symfony 3 je tohle otázka pár minut.
Moje první aplikace v Symfony 3 + překvapení (4. sraz přátel Symfony v Praze)Martin Zeman
90% webových aplikací funguje stylem "získám uživatelská data, uložím si je do nějakého storage a pak si je prohlédnu na bezpečné stránce".
Se Symfony 3 je tohle otázka pár minut.
https://github.com/Zemistr/symfony-3-first-app
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
Jak navrhnout úspěšný web krok za krokem | VŠB - APPLE JUICE MEETING | 27.3.2014Jan Kvasnička
Jedná se o postup jak navrhnout úspěšný střední a menší web tak, aby byl co nejúčinnější. Více informací najdete v článku: http://blog.kvasnickajan.cz/jak-navrhnout-uspesny-web-krok-za-krokem-aneb-jak-hodne-se-muzetemate-zapojit/
I knihovnám může přístupnost přinést celou řadu výhod - snížit provozní náklady, zvýšit počet návštěvníků či pozitivní nahlížení veřejnosti na knihovnu jako takovou. Pojďme si ukázat, jak i malou změnou na webové stránce můžeme výrazně zlepšit její přístupnost a získat tak výhody, které přístupnost přináší.
Krátce se také podíváme na to, jak testujeme přístupnost v soutěži Biblioweb, na jaké problémy na webech knihoven nejčastěji narážíme, a jak je možné tyto bariéry odstranit.
Accessibility can bring a lot of benefits also for libraries – reduction of operation costs, raising of amount of visitors or improvement of library´s PR. Let´s show how even a small change on a web page could dramatically increase its accessibility and help to gain benefits, that accessibility brings.
Let me also briefly introduce you our way of accessibility evaluation in Biblioweb contest, show you the problems, which we often meet and ways, how it´s possible to remove these barriers.
Vývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
Similar to WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory (17)
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek
V přednášce se podíváme na zajímavé novinky, které vám usnadní dělat rychlejší weby. Je zde spousta nových technologií, které můžeme v prohlížečích používat už nyní, ale mezi vývojáři nemají takovou popularitu. A to nemluvíme o nových nástrojích pro ladění rychlosti, které jsou po ruce a šetří nám čas.
CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
My slides from WebExpo 2022 keynote for Frontendisti.cz stage.
The world is changing, the frontend is changing, and we have to change with it. What makes 2022 special? Take a look at it through the eyes of a representative of the Frontendisti.cz community.
https://www.webexpo.net/prague2022/talk/frontend-keynote
„To my ne, to oni!“ – komponenty třetích stran a rychlost webuMartin Michálek
Third-parties nám zpomalují weby. To víme. Ale skutečně jsme jako vývojáři proti nim tak bezbranní, jak si občas myslíme? V přednášce si ukážeme jak identifikovat problematické komponenty třetích stran a jak minimalizovat jejich dopady na rychlost webu.
V posledním roce jsem spolupracoval na optimalizaci zhruba dvacítky webů, většinou e-shopů. Před přednáškou jsem se zamyslel, které technické úpravy obvykle pomohou rychlost nějak popostrčit k lepšímu. Vznikl tak seznam o 17 bodech. V Ostravě si je všechny jeden po druhém projdeme.
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Martin Michálek
Přednáška z Czech Online Summit 2019. Praktická rychlost webu pro eshopaře, marketéry a UXáky. Jak ji měřit a jak raději ne. Co můžete vylepšit sami a jak? Jak zaúkolovat vývojáře a ohlídat alespoň základní věci bez znalostí technických detailů?
Lidé se často zaměřují na chybné ukazatele. Na co se dívat a na co naopak ne? Co o reálné rychlosti načítání říkají Google Analytics, co datová velikost stránky a co nástroj Lighthouse?
Přednáška a workshop pro "SEO jako Brno".
jaký je význam rychlosti webu
na které metriky se dívat a jak je chápat
jaké nástroje pro posuzování rychlosti webů používat
jaké jsou základní technické (obsahové) prostředky ke zvýšení rychlosti webů
jaké jsou pokročilejší možnosti pro zrychlení
Projdeme si agrumenty, proč je důležité lpět na rychlosti načítání webu. Ukážeme si několik častých chyb a jak je možné webařské týmy kontrolovat. No a samozřejmě – jakou roli v tom celém hraje nová technologie AMP od Google. Máte ji nasadit?
Přednáška pro SEOloger naživo.
Google svou technologii AMP letos přímo amplifikuje, silně ji tlačí do světa. AMP Stories se jako konkurence Instagram Stories možná daly očekávat. Posilování pozice AMPu v e-commerce taky. Málokdo ale čekal, že tahle technologie poslouží jako podklad pro revoluci v tvorbě e-mailů. Jaké novinky Google v oblasti AMP tlačí a jak budou užitečné pro různé typy vašich klientů?
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Procházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
Přednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu.
✎ http://www.vzhurudolu.cz/prirucka/mobile-first
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
Proč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
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. Vezměme tři typy uživatelů: běžní (jen po ránu nevyspalí), krátkozrací a nevidomí.
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.
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
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. @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. 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
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?
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.
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.
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. 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. 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. <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. <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="".
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. • 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?
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í.
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. 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. • tabulátor - posun po aktivních elementech
• mezerník - aktivace elementu
• enter - odeslání, přechod jinam
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č