Kniha: Inclusive Design Patterns

Prosinec 27, 2016
Martin Pešout

Pokud se zabýváte novinkami kolem vývoje frontendu, nemohlo vám uniknout, že Smashing Magazine vydává každým rokem několik svých publikací. Letos v září byla výdána nová kniha s názvem Inclusive Design Patterns. Knihu jsem si objednal a musím říct, že se četla doslova sama. Rozhodl jsem se proto sepsat hlavní postřehy pro ty z vás, kteří možná ještě přemýšlí nad koupí nebo hledají možnost pro nové sebevzdělávání.

Autorem knihy je Heydon Pickering, známý jako UI designer, řečník a odborník na přístupnost na webu. Na Smashing Magazine je autorem několika zajímavých článků. Dále provozuje svůj blog HeydonWorks.

inclusive-design-patterns-22-preview-opt

Zaměření knihy

Hlavním tématem knihy je tvorba snadno přístupných webů a webových rozhraní. Autor říká, že si možná ani tento problém neuvědomujeme, ale jako vývojáři vytváříme špatně přístupné webové stránky odjakživa. Problémem není nedostatek talentu nebo vědomostí. Problémem je způsob, jakým řešíme konkrétní úkoly.

Heydon si dal za cíl čtenářům ukázat, jak lze vytvořit přístupná rozhraní bez velkého úsilí. Chce všem sdělit, že je nutné nad návrhem komponent přemýšlet jiným způsobem. Je třeba navrhovat web inkluzivně.

Inkluzivní design – co to spojení znamená?

Inkluzivní návrh webu hovoří o tom, že je třeba při vývoji frontendu nahlížet na problém z různých perspektiv. Váš web si budou pravděpodobně prohlížet velice různí uživatelé. Musíme brát v potaz už jen to, že někteří z nich budou web prohlížet na svém notebooku a jiní na mobilu. Někteří můžou mít velice špatné internetové připojení. Jiní zas trpí zrakovou vadou a jsou odkázaní na své čtečky obrazovky s hlasovým výstupem. A to je jen drobný výčet možných situací. Inkluzivní návrh je takový návrh, který počítá s možnými problémy.

Vypůjčil jsem si jednoduchou ukázku z knihy.

HTML:

<div class="button"></div>

CSS:

.button {
  width: 200px;
  height: 70px;
  background: url('../images/button.png');
}

JavaScript:

button.addEventListener('click', function() {
  // the event fired on click
});

Takto navržené tlačítko nepočítá s rozdílným chováním uživatelů. Možných problémů je hned několik. Například:

  • Tlačítko obsahuje PNG obrázek. Uživatel, který bude zoomovat na svém mobilu nebo uživatel s Retina obrazovkou, bude tlačítko vidět rozmazané.
  • Pokud zakážeme načítání obrázků úplně, stane se takto navržené tlačítko neviditelné.
  • Protože je použitý <div> element namísto <button>, nebude možné udělat na tlačítko focus pomocí TAB klávesy.
  • Protože textový popisek tlačítka je umístěný přímo v obrázku, zrakově postižení lidé nemají možnost jak zjistit, který popisek tlačítko obsahuje. Jejich čtečky danou informaci v HTML kódu nenajdou. Navíc takové tlačítko nelze přeložit do jiných jazyků. Tudíž ani uživatelé ze zahraničí, kteří neznají náš jazyk, nebudou schopni daný web používat.

Na tvorbu tlačítka a možné problémy je třeba nahlížet z různých perspektiv. V knize je potřeba podobného uvažování neustále opakována. Vždy je vše vysvětleno na konkrétních praktických ukázkách.

Ať jsi začátečník nebo pokročilý kodér, určitě se dozvíš něco nového

Když jsem zvažoval, zda tuto knihu vůbec objednat, tak jsem prvně trochu váhal. Říkal jsem si: „Tvorbou webů se zabývám již deset let a za tu dobu člověk posbírá veliké množství zkušeností. Přinese mně tato kniha něco nového?“ Navíc se snažím pečlivěji vybírat, do čeho investuji svůj volný čas. Co jsem rozhodně něchtěl, je dokola pročítat základní teorii. To považuji za problém i u spousty článků nebo přednášek, na které na internetu narážím – málo konkrétních ukázek, spousta teorie a konceptů. Naopak zbožňuji a vyhledávám připadové studie – jdou přímo k věci a na konkrétních ukázkách se toho nejvíce naučím.

Potěšilo mě, když jsem zjistil, že kniha je doslova napěchována praktickými ukázkami. Obsahuje spoustu komponent a připravených ukázek kódu, které můžete rovnou použít v konkrétních situacích.

Nemusíte mít obavu, že se budete učit vytvářet pouze základní věci, jako tlačítka nebo odkazy. Na své si přijde jak začátečník, tak i pokročilý kodér. Kniha z kraje zmiňuje, jak zapisovat správně např. HTML dokument nebo titulek stránky. Důraz se klade opět na přístupnost. Pokročilý čtenář může tento text jen prolétnout a zpytovat své svědomí, zda skutečně daná doporučení dodržuje.

Po několika základních kapitolách přicházejí na řadu pokročilejší techniky. Dozvíte se tak například:

  • jak správně vytvářet přístupné navigace
  • jak vytvářet SVG ikonky, které nesou sémantickou informaci
  • jak vytvářet správně formuláře
  • jak vytvářet jejich validační hlášky způsobem, abychom správně informovali i uživatele se zrakovým postižením použivající čtečku

Podobných oblastí, kterým se kniha věnuje, je monohem více.

Oblasti, kterým se kniha věnuje

Obsah knihy lze rozdělit do následujících kapitol:

  1. Dokument
  2. Odstavec
  3. Jak tvořit blogové články?
  4. Navigace
  5. Menu tlačítko
  6. Inkluzivní prototypování
  7. Jak tvořit seznamy produktů?
  8. Jak vytvářet přístupné filtry?
  9. Registrační formuláře
  10. Test-Driven-Development při tvorbě frontendu

inclusive-design-patterns-21-opt

Co bylo pro mě největším přínosem?

Nejvíce mě překvapilo, jak jsou jednotlivé příklady v knize dávány do spojitosti s použitelností pro zrakově postižené uživatele. Až díky jejich čtečkám obrazovky si dokážeme uvědomit, zda poskytujeme správné sémantické informace. Základní principy jsem znal. Nikdy mně ale nenapadlo, že je třeba použít speciálního přístupu např. při zobrazení validačních hlášek nebo v případě, že používáme „preloadery“. V této oblasti jsem získal řadu cenných informací.

V čase, kdy píšu tento článek, patří Inclusive Design Patterns mezi nejzajímavější knihy z oblasti frontendu, které jsou na trhu. K dispozici je na webu Smashing Magazine, kde je možné pořídit tištěnou nebo jen elektronickou verzi.

Novinky ze světa front-endu

Pokud vás zajímají další novinky ze světa front-endu, můžete sledovat můj profil na Twitteru

Žádné komentáře

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>