{%hackmd anYwyN--TziyASUWcqP-Gw %} # Tvořím web A–Z 2: lekce 11 <span>2. 6. 2021 | 18:00 - 20:00 | Praha</span> Lekce 11 - Optimalizace stránek - rychlost, přístupnost Jan Čuma --- # Přístupnost - obecný přehled - přibližně 2% populace mají určitý druh zrakového postižení (tj. jsou slepí nebo mají značné potíže se zrakem i s použitím brýlí) - přibližně 50% populace má nějaký druh klinicky významné refrakční chyby (poškození zraku, které lze korigovat brýlemi, pokud poškození není těžké) - asi 8% mužů a 0,5% žen má nějakou formu nedostatku barevného vidění - dobrá přístupnost je zásadní pro zajištění přístupu všech uživatelů k obsahu vašich stránek a aplikací - díky dobré přístupnosti zajistíte, že váš konečný produkt bude lepší a bude fungovat pro více lidí. --- # Focus - pomáha uživateli lépe se orientovat na stránce a ovládat ji pomocí klávesnice - pořadí elementů, na které lze uplatnit focus, je dáno strukturou DOMu, ale často je nevyhovující z důvodu CSS pozicování - pořadí můžeme měnit pomocí atributu <code>tabindex</code> --- # Tab index & tab order - <code>tabindex="-1"</code> - element není součastí "tab order" (pořadí fokusovatelných elemtů), ale může být dosažitelný pomocí JS metody <code>focus()</code> - <code>tabindex="0"</code> - element je součastí "tab order" a může být dosažitelný pomocí JS metody <code>focus()</code> - focus by měl být přídáván jen interaktivním elemntům (odkazy, formulářové prvky, tlačítka, apod.) - můžeme používat i kladná čísla pro určení pořadí, ale není to doporučený postup ```htmlembedded <div id="search" tabindex="0">Search</div> ``` - "skip-links" - vhodné pro např. přeskočení dlouhých navigací --- # Elementy mimo obrazovku - vyjížděcí menu, modály, dialogová okna, apod. mohou "krást" focus - <code>document.activeElement</code> nám může pomoci najít ztracený focus - pokud nechceme, aby elementy skryté mimo obrazovku "kradli" focus, můžeme použít CSS vlastnosti <code>display: none;</code> nebo <code>visibility: hidden;</code> --- # Sémantické HTML elementy - sémantické elementy jasně popisuje svůj význam jak prohlížeči, tak vývojáři - ne-sémantické elementy nám nic neříkají o svém obsahu - existuje zhruba stovka sémantických elementů - [seznam všech elementů](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) --- ### `<section>` - sekce je tematické seskupení obsahu, obvykle s nadpisem - sekce by měla být označena obvykle zahrnutím nadpisu - pokud element používáme pouze jako obalovač stylingu, volíme raději <code>div</code> ### `<article>` - element určující nezávislý samostatný obsah - měl by fungovat samostatně a být nezávislý na zbytku webu - vhodný pro příspěvek ve fóru, blogu, nebo jako novinový článek --- ### `<header>` - element představující úvodní obsah, obvykle skupinu úvodních nebo navigačních pomůcek - může obsahovat některé prvky záhlaví, ale také logo, vyhledávací formulář, jméno autora a další prvky - stránka může obsahovat více než jeden <code>header</code> ### `<footer>` - element definující zápatí pro dokument nebo sekci - typicky může obsahovat informace o autorství, autorských právech, kontaktní informace, mapu stránek, odkazy na související dokumenty, apod. --- ### `<main>` - prvek představující dominantní obsah dokumentu - skládá se z obsahu, který přímo souvisí nebo rozšiřuje ústřední téma dokumentu - obsah by měl být unikátní v rámci dokumentu ### `<nav>` - element, který definuje sadu navigačních odkazů - primárně určen pro hlavní odkazy --- ### `<aside>` - element reprezentující část dokumentu, jejíž obsah souvisí pouze nepřímo s hlavním obsahem dokumentu - typickým příkladem je postranní panel ### `<h1>-<h6>` - nadpisy mohou být vnořeny jako podsekce, aby odrážely organizaci obsahu stránky - většina čteček obrazovky může také generovat seřazený seznam všech nadpisů na stránce, což uživateli pomůže rychle určit hierarchii obsahu - ideálně použijte pouze jeden `<h1>` element na stránce, který stručně popisuje celkový účel obsahu - nepoužívejte elementy nadpisu ke změně velikosti textu --- ### `<address>` - element zahrnující například fyzickou adresu, URL, e-mailovou adresu, telefonní číslo, popisovač sociálních médií, zeměpisné souřadnice atd --- ### Dělení obsahu - všechny předchozí elementy jsou elementy, které se používají pro členění obsahu - umožňují uspořádat obsah dokumentu na logické části - pomocí těchto elementů můžete vytvořit "osnovu" stránky --- ### `<figure>` & `<figcaption>` - <code>figure</code> specifikuje samostatný obsah, jako jsou ilustrace, diagramy, fotografie, kódu, atd. - <code>figcaption</code> definuje titulek pro element <code>figure</code> - lze jej umístit jako první nebo jako poslední podřízený prvek `<figure>` ### `<time>` - tento element představuje určité časové období - může zahrnovat atribut `datetime`, který překládá data do strojově čitelného formátu --- # ARIA - Accessible Rich Internet Applications (ARIA) - jde sada atributů, které definují způsoby, jak zpřístupnit webový obsah a webové aplikace (zejména ty vyvinuté pomocí JavaScriptu) lidem se zdravotním postižením - vhodná v případech, kdy z nějakého důvodu nemůžeme použit nativní HTML elementy --- ### ARIA - `role` atribut - <code>role</code> atribut popisuje roli prvku v programech, které jej mohou využívat, jako jsou čtečky obrazovky nebo lupy - [Seznam rolí](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) ### ARIA - `aria-label` atribut - <code>label</code> umožňuje určit řetězec, který se má použít jako štítek (label) --- ### ARIA - `aria-labelledby` atribut - poskytuje rozšířené informace, které může uživatel potřebovat. ### ARIA - `aria-describedby` atribut - umožňuje poskytnout přístupný popis, např. nějaký další vysvětlující text --- # Kontrast - textové prvky na stránce by vždy měly mít dostatečné kontrastní poměry - minimální doporučený poměr je 4.5:1 - [kontrast](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast) # Lighthouse - auditní nástroj dostupný v Google Chrome vývojářských nástrojích - pomáhá odhalit chyby především v přístupnosti, ale i další nedostatky --- # CSS minifikace - online: https://cssminifier.com/ - pomocí rozšíření ve VS kódu: JS & CSS Minifier (Minify) --- # Konec <span>2. 6. 2021 | 18:00 - 20:00 | Praha</span> Lekce 11 - Optimalizace stránek - rychlost, přístupnost Jan Čuma