Využití rolí v html 5 - img srcset a img sizes, aria*

Příklady využití rolí a atributu srcset v HTML5:

1. Využití rolí: Role v HTML5 pomáhají prohlížečům a asistivním technologiím lépe porozumět struktuře a významu jednotlivých částí stránky. Zde je příklad:

<header role="banner">
    <h1>Moje webová stránka</h1>
</header>

<nav role="navigation">
    <ul>
        <li><a href="#">Domů</a></li>
        <li><a href="#">O nás</a></li>
        <li><a href="#">Služby</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>

<main role="main">
    <article role="article">
        <h2>Novinky</h2>
        <p>Zde jsou nejnovější zprávy ze světa.</p>
    </article>
</main>

<aside role="complementary">
    <h3>Doporučené články</h3>
    <ul>
        <li><a href="#">10 tipů pro úspěšný web</a></li>
        <li><a href="#">Jak správně psát blogy</a></li>
    </ul>
</aside>

<footer role="contentinfo">
    <p>&copy; 2023 Moje stránka. Všechna práva vyhrazena.</p>
</footer>

2. Atribut srcset pro obrázky: Atribut srcset umožňuje specifikovat různé zdroje obrázků pro různá zařízení a rozlišení obrazovky. To pomáhá zobrazit optimální verzi obrázku na základě zařízení, na kterém je stránka zobrazena. Zde je příklad:

<img src="obrazek.jpg" alt="Popis obrázku" srcset="obrazek-480w.jpg 480w,
                                                     obrazek-800w.jpg 800w,
                                                     obrazek-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 800px) 80vw,
            1200px">

V tomto příkladu se obrázek obrazek.jpg zobrazí jako výchozí zdroj. Atribut srcset obsahuje různé verze obrázku pro různá rozlišení (480w, 800w, 1200w). Atribut sizes určuje, jak by se obrázek měl zobrazit na různých velikostech obrazovky.

Co znamená vw?

Jednotka vw v CSS znamená "viewport width" (šířka zobrazení). Tato jednotka měří část procenta šířky celého zobrazení (viewportu) daného zařízení. Velikost viewportu odpovídá šířce okna prohlížeče, a to bez ohledu na aktuální rozměry obrazovky.

Například:

• 1vw = 1 % z celkové šířky viewportu
• 50vw = polovina šířky viewportu
• 100vw = 100 % šířky viewportu (což je plná šířka okna prohlížeče)

Takže, když ve vlastnosti sizes elementu obrázku použijete jednotku vw, stanovujete, jak velký by měl být obrázek vzhledem k šířce viewportu na různých velikostech obrazovky.

sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px"

Tento kód určuje různé velikosti obrázku na základě šířky viewportu. Zde je jeho význam:

• Pokud je šířka viewportu menší nebo rovna 480px, obrázek bude mít šířku 100vw, což znamená, že bude mít plnou šířku viewportu na malých zařízeních.

• Pokud je šířka viewportu menší nebo rovna 800px (a zároveň větší než 480px), obrázek bude mít šířku 80vw. To znamená, že na středních zařízeních bude mít obrázek 80 % šířky viewportu.

• Pokud šířka viewportu je větší než 800px, obrázek bude mít pevnou šířku 1200px.

Tato nastavení sizes umožňují definovat různé velikosti obrázku na různých zařízeních a velikostech obrazovek, což pomáhá optimalizovat zobrazení obrázků pro různé kontexty.

Provky aria-* pro přístupnost v html 5

Určení, že webové stránky jsou přístupné pro všechny uživatele, včetně těch se znevýhodněním, je důležitým cílem ve vývoji webu. K tomuto účelu byla do HTML5 zavedena řada prvků a atributů, které umožňují tvůrcům webů lépe popsat obsah a jeho význam, což usnadňuje nástrojům a technologiím pro přístupnost interpretovat a prezentovat obsah uživatelům s různými potřebami.

Atributy s názvem aria-* (Accessible Rich Internet Applications) jsou klíčovým prvkem, který byl přidán k HTML5. Tyto atributy umožňují vývojářům explicitně popsat různé části webového rozhraní, tak aby byly srozumitelné pro asistivní technologie, jako jsou čtečky obrazovky. Zde jsou některé z těchto atributů a jejich využití na příkladech:

1. aria-label: Tento atribut umožňuje přidat textovou popisku k prvcům, které nemají dostatečně sémantický textový obsah. Například tlačítko, které má ikonu, může být označeno pomocí aria-label pro jeho popis.

<button aria-label="Otevřít menu">
  <svg ...>...</svg>
</button>

aria-labelledby: Tento atribut umožňuje odkazovat na existující elementy na stránce, jejichž obsah je vhodným popiskem pro cílový prvek.

<h2 id="section-title">Důležitá informace</h2>
<div aria-labelledby="section-title">
  ...
</div>

aria-describedby: Tento atribut umožňuje odkazovat na existující elementy na stránce, které poskytují rozšířený popis pro cílový prvek.

<p id="help-text">Tento prvek je povinný</p>
<input aria-describedby="help-text" ...>

aria-hidden: Tento atribut umožňuje skrýt prvky z asistivních technologií, které zpravidla předčítají obsah stránky.

<span aria-hidden="true">✓</span> Dokončeno

aria-role: Tento atribut definuje roli prvku v rámci stránky a pomáhá lépe popsat jeho funkci.

<nav aria-role="navigation">...</nav>

aria-live: Tento atribut definuje oblast, ve které se bude dynamicky aktualizovatý obsah hlasitě předčítat asistivními technologiemi.

6. <div aria-live="polite" id="status">Aktualizace se provedla úspěšně.</div>
   

Tyto atributy a mnoho dalších umožňuje vývojářům poskytnout bohatší informace o obsahu, což v konečném důsledku vede k lepší přístupnosti pro uživatele se znevýhodněním, jako jsou zrakové nebo sluchové postižení.

 

Lazy Loading (Lenivé načítání)

 

Lazy Loading (Lenivé načítání): Realizace lenivého načítání obrázků zahrnuje změny ve způsobu, jakým jsou obrázky na stránce načítány. Klasicky se obrázky načítají okamžitě, jakmile je načtena stránka. S lenivým načítáním se toto chování mění:

• Attribut loading="lazy": Pro každý <img> tag můžete přidat atribut loading="lazy". Tímto způsobem prohlížeč ví, že by měl obrázek načítat pouze tehdy, když se nachází ve viditelné oblasti (viewportu). Například:

• <img src="obrazek.jpg" alt="Obrázek" loading="lazy">
  

Přednačítání (Preloading): Přednačítání se většinou provádí pomocí HTML a CSS. Zde je návod, jak to lze realizovat:

• HTML Tag <link>: Ve hlavičce HTML dokumentu můžete přidat <link> tag s atributem rel="preload" pro každý obrázek, který chcete přednačítat. Tímto způsobem říkáte prohlížeči, že by měl tento zdroj předem stáhnout. Například:

  html

<link rel="preload" href="obrazek.jpg" as="image">

CSS Background Image: Pokud obrázky nejsou přidány přímo do HTML pomocí <img> tagu, ale jsou použity jako pozadí pomocí CSS, můžete také v CSS specifikovat přednačítání. Například:

.obrazek {
  background-image: url('obrazek.jpg');
}

JavaScript Preloading: Pokud chcete dynamicky načítat obrázky pomocí JavaScriptu, můžete použít metodu new Image() a nastavit src atribut na URL obrázku. To může být užitečné, pokud načítáte obrázky na základě nějaké události.

2. • var obrazek = new Image();
     obrazek.src = 'obrazek.jpg';
     

Tímto způsobem můžete implementovat obě techniky na své webové stránky a zlepšit tak rychlost načítání obsahu pro uživatele.

 

Lazy Caching

"Lenivé ukládání" do mezipaměti: Lazy caching se týká ukládání do mezipaměti (caching) dat a zdrojů až v okamžiku, kdy jsou skutečně potřeba. Namísto okamžitého ukládání všech dat do mezipaměti se část dat ukládá až ve chvíli, kdy jsou vyžádána poprvé. To může snížit inicializační čas a zvýšit efektivitu využití mezipaměti.