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.

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

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.

Outline je jednoduchý, ale mocný nástroj, který se využívá především pro lepší přístupnost elementů na webu. I přesto, že se snažím psát přístupné weby a webové aplikace, nevyhnu se občas situacím, kdy musím jeho nechtěné styly zrušit. V následujícím článku bych rád ukázal, jak se dá na nechtěný outline vyzrát.

Co představuje CSS outline?

Pěkná definice CSS vlastnostni outline je popsána na portálu CSS-Tricks. V kaskádových stylech používáme outline k vykreslení linky kolem vnějšího okraje elementu. Výsledek je hodně podobný použití klasického border kolem nějakého prvku. Je zde ale několik rozdílů:

1. Vždy vede kolem všech stran prvku. Nemůžeme tak definovat, že by měl outline vést pouze pod prvkem.
2. Není součástí box modelu, tudíž použití outline nemůže ovlivnit pozici samotného elementu nebo sousedních prvků. Co je to box model skvěle popisuje Martin Michálek na svém webu vzhurudolu.cz.

Mezi další věci, které stojí za zmínku, je např. nemožnost nadefinovat border-radius. Což je logické protože se nejedná o klasický border. Nemusí se také jednat vždy o klasický obdélníkový tvar. Pokud outline jde kolem prvku, který obsahuje různé velikosti fontů, můžeme dostat i nepravidelný rámeček. Ukázku nepravidelného outline je možné vidět na této ukázce. Stačí jen udělat :focus na daný odkaz.

Využití na webu

Díky tomu, že outline není součástí box modelu, neovlivní nám jeho používání už definované CSS styly. Pokud to srovnáme s klasickým rámečkem border, tak jeho použití nám může měnit výslednou šířku a výšku elementu. Pokud vezmeme čisté HTML bez jakýchkoliv CSS stylů, tak zde je vlastnost outline použita pro zlepšení přístupnosti na webu. Poskytuje vizuální zpětnou vazbu pro aktuálně vybraný prvek na stránce. Na následujícím obrázku je ukázka aktivního formulářového políčka:

Vybrat nějaký prvek na stránce lze velice snadno. Stačí použít pro pohyb klávesnici namísto myši. Klávesa TAB je ideálním příkladem. Nemusí se vždy jednat jen o klasickou klávesnici vašeho PC. Při prohlížení webu na moderních TV, budeme pravděpodobně používat místo klávesnice dálkový ovladač. Ve všech těchto situacích potřebujeme vědět, který prvek je vybraný pro případné další interakce (psaní, kliknutí, přehrání videa, …).

V CSS lze na podobné prvky cílit pomocí tzv. :focus selektoru. Tento selektor je dostupný na každém HTML elementu, který může přijímat vstupy z klávesnice nebo jakékoli další vstupy od uživatele. Jedná se tedy o všechny odkazy, tlačítka, formulářové položky apod. Pokud se nám klasická „outline záře“ nelíbí, můžeme ji následujícím zápisem zrušit:

:focus {
  outline: 0;
}

Pokud toto ale uděláme, je třeba mít na paměti, že namísto outline musíme použít například border rámeček nebo jiný způsob zvýraznění. Nikdy nerušte styly pro :focus úplně! Dobrou přístupnost vaši uživatelé ocení. Pro více informací doporučuji doporučení přímo od W3C.org.

Proč mnoho webdesignerů ruší outline?

Důvody bývají často jednoduché – ješitnost designera, časový pres nebo úplná neznalost přístupnosti na webu. Nehezká modrá záře, kterou vydává outline, často nezapadá do budoucí vize. Bývá proto „jednoduší“ outline odstranit úplně. Alternativní zvýraznění se poté už designer neřeší a dodaný design pak s něčím takovým nepočítá.

Nutno dodat, že odebraní outline nemuselo být vždy záměrem frontendisty. Dnes již zastaralý Reset CSS od Erica Meyerse rušil zvýraznění aktivních prvků úplně. V kódu byla sice poznámka /* remember to define focus styles! */, jenže ne každý si toho všiml. Novější řešení jako Normalize.css nebo Reboot tímto neduhem už netrpí.

Proč já ruším outline?

Napřipadám si jako ješitný designer, i znám základy dobré přístupnosti na webu. Poslední léta se soustředím převážně na vývoj webových aplikací a zde (možná ještě více než na webu) nastávají situace, kdy uživatel střídá myš i klávesnici. Ať chcete nebo ne, dříve nebo později se dostanete do situace, kdy potřebujete zrušit nechtěný outline, který občas někde vyskočí. Chtěl bych vám ukázat jednoduchý trik, jak lze zrušit outline pouze v některých případech a neohrozit přitom přistupnost samotného webu.

Rešení jsem našel v drobné JS knihovně What Input?, která sleduje všechny vstupy uživatele na webu. Na základě toho přidává k HTML tagu <head> další atributy a neustále mění jejich hodnoty, podle toho, co uživatel na webu momentálně dělá. Výsledek pak vypadá nějak takto:

<!doctype html>
<html class="whatinput-types-initial whatinput-types-mouse whatinput-types-keyboard" lang="en" data-whatinput="keyboard" data-whatintent="mouse">
<head>

Za zmínku stojí tyto přidané atributy:

• data-whatinput - hodnota tohoto atributu se mění v závislosti na přímých vstupech od uživatele. Může nabývat hodnot mouse, keyboard a touch.
• data-whatintent – hodnota tohoto se mění v závislosti na nepřímých vstupech od uživatele.

Když uživatel píše text do formulářového políčka, budou mít oba atributy hodnotu keyboard. Jakmile však pohneme myší bez kliknutí, změní se hodnota atributu data-whatintent na mouse. A to je celé. Na tyto atributy můžeme pak reagovat v CSS stylech.

/* výchozí :focus styl před tím než se načte knihovna WhatInput */
:focus {

}

/* výchozí styl po spuštění WhatInput, ale před jakoukoliv jinou interakcí */
[data-whatinput="initial"] :focus {
  outline: 2px dotted black;
}

/* focus pomocí myši */
[data-whatinput="mouse"] :focus {
  outline-color: red;
}

/* focus pomocí klávesnice */
[data-whatinput="keyboard"] :focus {
  outline-color: green;
}

/* focus pomocí dotykového zařízení */
[data-whatinput="touch"] :focus {
  outline-color: blue;
}

Pokud se knihovna WhatInput z nějakého důvodu nenačte, máme stále jistotu, že výchozí zvýraznění aktivních prvků je k dispozici.

Nejvíce mi většinou vadí nechtěný outline vznikající při použití myši. Při využití knihovny WhatInput, se ho zbavím velice snadno:

[data-whatintent="mouse"] .prvek:focus {
  outline: 0;
}

Nyní mám jistotu, že se mi nechtěný outline neobjeví při pohybu myši. Jakmile použiji k pohybu po webu například TAB klávesu, změní se hodnota atributu na data-whatintent="keyboard" a potřebný outline pro lepší přístupnost je zpět.

V SASS jsem si definici podobného stylu zjednodušil použitím mixinu:

@mixin disable-mouse-outline {
  [data-whatintent='mouse'] & {
    outline: 0;
  }
}

/* použití u konkrétních problematických prvků */
.prvek:focus {
  @include disable-mouse-outline;
}

Pár slov závěrem

Zvýraznění aktivních prvků je na webu velice důležité. Designer znalý dobré přístupnosti na webu by nikdy neměl dopustit, že nepoznáme aktivní element. Osobně si myslím, že není nutné všude používát defaultní outline. Například u formulářových políček dávám často přednost border rámečku. Dá to jen více práce nachystat potřebné styly. Naopak pro klasické odkazy považuji použití výchozího outline za ideální řešení.

Zamýšleli jste se někdy nad tím, jak veliké mají být dotykové prvky, které máte umístěny na webu? Totiž ne každý element, který vytvoříte, je snadno dostupný pro všechny uživatele. Kurzor myši je velice přesný a dokážete s ním zaměřit i poměrně malé oblasti. Situace se však změní, když použijete jiné zařízení a zkusíte web ovládat pomocí prstu na tabletu nebo na mobilním telefonu. Pojďme se společně podívat na doporučení, které nám dávají společnosti Google, Apple a Microsoft.

Proč ale dát na rady zrovna těchto společností? Google stojí za vznikem operačního systému Android, Apple je tvůrcem iOS a Microsoft má svůj Windows (Phone). Jeden z těchto tří operačních systémů tvoří základ dnešních chytrých telefonů. Aby byla zajištěna dobrá použitelnost webů i na mobilních zařízeních, vydávají tyto společnosti doporučení, jak by měla vypadat ideální velikost dotykových oblastí.

Dotykové oblasti podle Google

Specifikace Google doporučuje volit rozměry jednotlivých dotykových oblastí alespoň 48 × 48 dp pro zachování ideální použitelnosti na dotykových zařízeních. Zároveň by měl být dodržen rozestup mezi více dotykovými prvky nejméně 8 dp. Rozměr 48 dp lze přirovnat fyzickému rozměru 9 mm v závisloti na typu displeje.

Jednotka dp je zkratkou pro Density-independent pixel – tzv. pixel nezávislý na hustotě displeje. Setkáme se s ní na zařízeních s operačním systémem Android a využijí ji především vývojáři Android aplikaci. Používá se pro jednotné zobrazení elementů na obrázovkách s rozdílnou hustotou. Pokud však jako frontendista píšete čistě jen CSS, nemusíte si s dp vůbec lámat hlavu. Rovnout můžete místo jednotky dp uváděd px.

Na následujícím obrázku můžete vidět postupně avatar, ikonku a tlačítko. Dotykové oblasti jsou ve všech případech vysoké 48 dp. I v situaci, kdy je tlačítko nadesignované na výšku pouhých 36 dp, měla by být velikost dotykové oblasti podle doporučení Google vysoká alespoň těch zmíněných 48 dp.

Dotykové oblasti podle Apple

Apple doporučuje volit minimální rozměr dotykových oblástí o velikostech 44 × 44 bodů. Původně byl tento údaj uváděn v pixelech. Rozměr 44 × 44 pixelů je navržen tak, aby odpovídal ideální velikosti dotykové oblasti na starších iPhone s displejem 3.5“ o rozlišení 320 × 480 px (164ppi). Jakmile však přišel Retina displej, který má dvojnásobnou hustotu (326ppi), upravil Apple zároveň své specifikace a uvádí všude body namísto pixelů. I zde však platí pravidlo, že pokud kódujete pouze CSS styly, můžete všude automaticky uvádět pixely.

Dotykové oblasti podle Microsoftu

Specifikace Microsoftu doporučuje volit minimální rozměr dotykových oblastí o velikostech 9 mm nebo větší. To odpovídá rozměru 48 x 48 pixelů (na displeji s hustotou pixelů 133ppi). Vyloženě pak upozorňuje, ať se vyvarujete používání oblastí menších než 7 mm. Pokud máte více dotykových prvků vedle sebe, měl by být dodržen rozestup alespoň 2 mm.

Má cenu řešit až takové detaily?

Velikost dotykových oblastí se v dnešní době opravdu nevyplácí podceňovat. Malá tlačítka nejvíce překvapí uživatele přistupujícího z mobilního zařízení. Není nic otravnějšího než zkoušet třikrát kliknout na položku v menu a až na třetí pokus se dostat na požadovanou stránku. Jiný problém může nastat v případě, kdy se budete snažit vměstnat více dotykových oblastí vedle sebe. Trefit se pak do správného místa, nemusí být zrovna snadné.

Závěrem bych možná jen zmínil, že když jsem velikosti dotykových oblastí testoval na svých zařízeních, začínal jsem mít znatelné problémy až u rozměrů pod 40 pixelů. Proto bych nedoporučoval volit rozměry menší. Větší oblasti rozhodně přispějí jen k lepší použitelnosti a to ocení především budoucí návštěvníci webu.

Zdroje

• Google Design – Metrics & keylines
• iOS Developer Library – Adaptivity and Layout
• Microsoft – Guidelines for targeting