Prístupná štruktúra dokumentu a webu – tabuľky, grafy a diagramy

Tabuľky, grafy a diagramy nájdeme často či už na webe, ale aj v dokumentoch. Reprezentujú istým spôsobom štruktúrované informácie, ktoré sú v prípade diagramov a grafov čisto v grafickej podobe. Tak ako obrázky, odkazy, zoznamy a iné prvky, mali by aj tieto byť prístupné (pozor, nie dostupné) pre používateľov čítačov obrazovky a takisto pre slabozrakých používateľov.

 

Tabuľky

 

Tabuľky zobrazujú informácie usporiadané v mriežke so vzťahom buď k prvej bunke stĺpca, alebo riadka, prípadne obidvom.

Práve kvôli tomuto logickému vzťahu nie je z hľadiska prístupnosti prípustné vytvárať tabuľky len vizuálne naznačené. Využijeme preto funkcie na tvorbu tabuľky, alebo tabuľku definujeme pomocou tagov v HTML kóde.

 

Príklady nevhodnej tabuľky

 

Vizuálne naznačená tabuľka:

 

Rozvrh hodín

 

            1          2          3          4          5

PO       M         SJ        AJ        TV       GE

UT       BI        HI        ON       M         SJ

ST        M         TV       SJ        AJ        Ge

 

Z tejto tabuľky používateľ screenreadera nič nemá, pretože nevie, čo sa vzťahuje ku ktorému dňu a aký predmet ku ktorej hodine.

 

Tabuľka so zlúčenými bunkami:

 

PO UT ST

1 M BI M

2 SJ HI TV

3 AJ ON SJ

4 TV M AJ

5 GE SJ GE

 

Ďalšou podstatnou vecou je vyhýbať sa zlúčeným bunkám v riadku. Aby tabuľka bola naozaj prístupná, je potrebné, aby bola pravidelná.

Hlavičky stĺpcov a riadkov sú dôležité kvôli tomu, aby používateľ čítača obrazovky nestratil kontext. Ak využívame farebné zvýraznenie informácií, je nevyhnutné nájsť aj iný spôsob ich odlíšenia. A to nielen kvôli nevidiacim používateľom, ale aj kvôli ľuďom trpiacim farbosleposťou. Môžu to byť rôzne symboly, ktorých význam vysvetlíme v legende.

 

Príklad správne vytvorenej tabuľky

 

rozvrh hodín

	1	2	3	4	5
PO	M	SJ	AJ	TV	GE
UT	BI	HI	ON	M	SJ
ST	M	TV	SJ	AJ	GE

 

Ak neuvádzame tabuľky nadpisom, môžeme pre lepšiu orientáciu definovať aj alternatívny text, ktorý používateľovi napovie, čoho sa daná tabuľka týka.

Z vizuálneho hľadiska dbáme na to, aby písmo v tabuľke nebolo príliš malé, ale zasa ani príliš veľké. To tabuľku môže príliš rozhádzať a slabozraký používateľ by sa v nej mohol stratiť. Vo všeobecnosti platí, že používame štandardne veľkosť písma 12 tak ako aj v ostatnom texte. Vyhýbame sa podčiarknutému, prečiarknutému či kurzívovému písmu. Vhodnejšie je bezpätkové písmo (Arial, Calibri a pod.). V prípade farebného odlišovania údajov dbáme na dostatočný kontrast medzi písmom a pozadím. Vyhýbame sa kombináciám ako červená a čierna, žltá a oranžová a iným farbám, ktoré môžu splývať.

 

Ako na to?

 

V balíku MS Office záleží na tom, či vytvárame tabuľky vo Worde alebo v Exceli. Obidvoje sa dajú úplne sprístupniť, no postup je odlišný.

 

MS Word

 

1. Na karte Vložiť vyberieme Vložiť tabuľku. V dialógu definujeme počet stĺpcov a riadkov a vložíme ju do textu.
2. Vyznačíme prvý riadok Tabuľky.
3. Na tabuľke vyvoláme kontextovú ponuku (pravé tlačidlo myši, tlačidlo kontextovej ponuky na klávesnici, prípadne skratka SHIFT+F10).
4. V dialógu vyberieme záložku riadok a tu začiarkneme Opakovať ako riadok hlavičky v hornej časti každej strany a tiež Povoliť pokračovanie riadka na ďalšej strane.
5. Potvrdíme tlačidlo OK pre uplatnenie zmien.
   

 

Odteraz bude používateľovi čítač obrazovky oznamovať, ku ktorému stĺpcu a riadku sa hodnota, na ktorej sa nachádza, vzťahuje.

 

MS Excel

 
V Exceli vytvárame často oveľa dlhšie a zložitejšie tabuľky ako vo Worde. Preto je pre ich pochopenie prístupnosť pre používateľov čítačov obrazovky prakticky nevyhnutná.

Prvým predpokladom na čítanie hlavičiek stĺpcov a riadkov je ich vytvorenie. Môžu nastať 3 varianty, od ktorých sa odvíja ďalší postup:

 

1. Tabuľka obsahuje len hlavičky stĺpcov. V takom prípade sa kurzorom postavíme na hlavičku prvého stĺpca.
2. Tabuľka obsahuje len hlavičky riadkov. Vtedy umiestnime kurzor na hlavičku prvého riadka.
3. V tabuľke potrebujeme definovať hlavičky aj pre stĺpce, aj pre riadky. V tomto prípade nájdeme bunku, ktorá leží v priesečníku riadku a stĺpca s hlavičkou, teda ľavý horný roh tabuľky.
   

 

 

Definovanie hlavičiek

 

1. Na páse kariet prejdeme na kartu Vzorce.
2. Na karte Vzorce v skupine Definované názvy aktivujeme položku Správca názvov.
3. Aktivujeme tlačidlo Nové.
4. Otvorí sa dialóg, kde do editačného poľa pre názov zadáme príslušný text podľa toho, aký variant tabuľky chceme použiť, následne aktivujeme tlačidlo OK:
   

 

• Tabuľka len s hlavičkami stĺpcov: ColumnTitle
• Tabuľka len s hlavičkami riadkov: RowTitle
• Tabuľka s hlavičkami riadkov aj stĺpcov: Title
  

 

 

Teraz bude čítač čítať hlavičky stĺpcov, riadkov alebo obidvoch v prípade riadkov nadol od názvu prvého riadku, v prípade stĺpcov vpravo od definovaného názvu prvého stĺpca. Ak potrebujeme, aby čítač čítal názvy riadkov a stĺpcov v presne danej tabuľke, za text ColumnTitle, RowTitle alebo Title napíšeme dve bodky a za ne bunku, ktorá leží v priesečníku posledného riadka a stĺpca, čiže bunku v pravom dolnom rohu tabuľky.

 

Príklad:

ColumnTitle..E57

RowTitle..E57

Title..E57

 

Tabuľky a HTML

 

V HTML môžeme takisto vytvoriť prístupné tabuľky. Treba však dodržať niekoľko zásad:

 

1. Ak chceme priradiť tabuľke alternatívny popis, definujeme ho pomocou tagu <caption> a umiestnime ho ihneď pod / za tag <table>. Je to užitočné najmä pri pohybe medzi tabuľkami.
2. Veľmi dôležitým bodom, ako sme už niekoľkokrát zdôraznili, je definovanie hlavičiek stĺpcov a riadkov.

   • Pre hlavičky použijeme tag <th>
   • Pre dátové bunky <td>
   • Pre tabuľku, ktorá obsahuje hlavičky riadkov aj stĺpcov, použijeme tag <scope>
     
3. Namiesto absolútnej veľkosti použijeme proporcionálne nastavenie veľkosti. To je obzvlášť dôležité pre slabozrakých používateľov. Bunky sa tak budú môcť zväčšovať a zmenšovať podľa potreby čitateľa.
   

 

Príklad tabuľky s hlavičkami stĺpcov

 

<table>

  <tr>

    <th>Date</th>

    <th>Event</th>

    <th>Venue</th>

  </tr>

  <tr>

    <td>12 February</td>

    <td>Waltz with Strauss</td>

    <td>Main Hall</td>

  </tr>

  […]

</table>

 

Zdroj: https://www.w3.org/WAI/tutorials/tables/one-header/

 

Príklad tabuľky s hlavičkami stĺpcov aj riadkov

 

<table>

  <caption>Delivery slots:</caption>

  <tr>

    <td></td>

    <th scope=“col“>Monday</th>

    <th scope=“col“>Tuesday</th>

    <th scope=“col“>Wednesday</th>

    <th scope=“col“>Thursday</th>

    <th scope=“col“>Friday</th>

  </tr>

  <tr>

    <th scope=“row“>09:00 – 11:00</th>

    <td>Closed</td>

    <td>Open</td>

    <td>Open</td>

    <td>Closed</td>

    <td>Closed</td>

  </tr>

  <tr>

    <th scope=“row“>11:00 – 13:00</th>

    <td>Open</td>

    <td>Open</td>

    <td>Closed</td>

    <td>Closed</td>

    <td>Closed</td>

  </tr>

  […]

</table>

 

Zdroj: https://www.w3.org/WAI/tutorials/tables/two-headers/

 

Grafy a diagramy

 

Sú grafickým znázornením vzťahov medzi dátami. Používatelia čítačov obrazovky bez sprístupnenia teda nemajú možnosť vyčítať z nich informácie. To isté sa týka aj ťažko slabozrakých používateľov, kde je potrebné dbať na správnu grafickú úpravu.

 

Ako môžeme sprístupniť grafy a diagramy?

 

1. Využívame alternatívny text. Rovnako ako k obrázkom, je možné ku grafu alebo diagramu priradiť alternatívny text. V ňom sa pokúsime zhrnúť, čo sa v grafe nachádza a aké sú závery.
2. Ak je graf či diagram príliš zložitý, je vhodnejšie sprístupniť ho pomocou tabuľky údajov.
3. Je tiež možné závery zhrnúť v sprievodnom texte. Vtedy postačuje pridať ku grafu či diagramu len výstižný alternatívny text.
4. Pozor na farebné odlišovanie údajov. Ako sme písali už pri tabuľkách, je potrebné nájsť taký spôsob, ktorý bude brať ohľad jednak na nevidiacich, ale aj na ťažko slabozrakých alebo farboslepých ľudí.
5. Dbajme na správny kontrast. Aj dobre vidiaci ľudia potrebujú hlavne na webe správny kontrast medzi údajmi v grafe a jeho pozadím. Oveľa dôležitejšie je to pre slabozrakých či farboslepých ľudí.
   

 

 

Zdroje

 

• W3C: Tables Tutorial
• WebAIM: Creating Accessible Tables
• How can I make my tables and charts accessible? 
• Charts & Accesibility
• Adam Samec: Přístupnost tabulek v Excelu – názvy sloupců a řádků