Graf

Prečo je to prístupné

Graf je obrázok, a obrázok potrebuje textovú alternatívu. Tento má tri úrovne: názov (z popisu tabuľky), jednovetové zhrnutie toho, čo z grafu vyplýva, a úplnú dátovú tabuľku so záhlavím riadkov aj stĺpcov, ktorá je zdrojom grafu a zostáva v stránke. Čítač obrazovky teda počuje podstatu na jeden dych a k číslam sa dostane ako k tabuľke.

Každý stĺpec má okrem farby aj iný šrafovací vzor a vedľa seba priamo vypísanú hodnotu. V režime vysokého kontrastu systému Windows sa farby vypnú a stĺpce ostanú rozlíšiteľné. Graf je vektorový, takže sa pri priblížení zväčšuje bez straty ostrosti a pri šírke 320 px sa zmestí bez vodorovného rolovania.

Vyskúšajte si sami

Klávesnica

• Graf nemá čo ovládať; klávesnica ho prechádza ako obrázok a tabuľku.

Čítač obrazovky

• Počujete „obrázok, Podiel zistení podľa princípu WCAG“ a zhrnutie. Tabuľku pod grafom môžete čítať po bunkách.

Priblíženie a reflow

• Zmenšite okno na šírku telefónu: graf sa zmenší, písmo v ňom zostáva čitateľné a stránka sa vodorovne neroluje.
• V nastaveniach systému zapnite režim vysokého kontrastu: stĺpce zostanú rozlíšiteľné vzorom.

Bez JavaScriptu

Zobrazí sa iba tabuľka, ktorá je referenčným zobrazením údajov, nie náhradou.

Kód

<ad-chart data-unit=" %" data-summary="Takmer polovica zistení sa týka vnímateľnosti.">
  <table>
    <caption>Podiel zistení podľa princípu WCAG (ilustračné údaje)</caption>
    <thead><tr><th scope="col">Princíp</th><th scope="col">Podiel v %</th></tr></thead>
    <tbody>
      <tr><th scope="row">Vnímateľnosť</th><td>42</td></tr>
      <tr><th scope="row">Ovládateľnosť</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>