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í.