Graf

Proč je to přístupné

Graf je obrázek, a obrázek potřebuje textovou alternativu. Tento má tři úrovně: název (z popisku tabulky), jednovětové shrnutí toho, co z grafu vyplývá, a úplnou datovou tabulku se záhlavím řádků i sloupců, která je zdrojem grafu a zůstává ve stránce. Odečítač obrazovky tedy uslyší podstatu na jeden dech a k číslům se dostane jako k tabulce.

Každý sloupec má kromě barvy i jiný šrafovací vzor a vedle sebe přímo vypsanou hodnotu. V režimu vysokého kontrastu systému Windows se barvy vypnou a sloupce zůstanou rozlišitelné. Graf je vektorový, takže se při zvětšení zvětšuje beze ztráty ostrosti a při šířce 320 px se vejde bez vodorovného rolování.

Vyzkoušejte si sami

Klávesnice

• Graf nemá co ovládat; klávesnice ho prochází jako obrázek a tabulku.

Odečítač obrazovky

• Uslyšíte „obrázek, Podíl zjištění podle principu WCAG“ a shrnutí. Tabulku pod grafem můžete číst po buňkách.

Zvětšení a přizpůsobení obsahu

• Zmenšete okno na šířku telefonu: graf se zmenší, písmo v něm zůstává čitelné a stránka se vodorovně neroluje.
• V nastavení systému zapněte režim vysokého kontrastu: sloupce zůstanou rozlišitelné vzorem.

Bez JavaScriptu

Zobrazí se jen tabulka, která je referenčním zobrazením údajů, ne náhradou.

Kód

<ad-chart data-unit=" %" data-summary="Téměř polovina zjištění se týká vnímatelnosti.">
  <table>
    <caption>Podíl zjištění podle principu WCAG (ilustrativní údaje)</caption>
    <thead><tr><th scope="col">Princip</th><th scope="col">Podíl v %</th></tr></thead>
    <tbody>
      <tr><th scope="row">Vnímatelnost</th><td>42</td></tr>
      <tr><th scope="row">Ovladatelnost</th><td>31</td></tr>
    </tbody>
  </table>
</ad-chart>
<link rel="stylesheet" href="/assets/js/components/ad-chart/ad-chart.css">
<script type="module" src="/assets/js/components/ad-chart/ad-chart.js"></script>