Srovnání tří tarifů vypadá na monitoru přehledně. Na telefonu však poslední sloupec zmizí a čtenář nepozná, ke které nabídce patří cena. Dobrá tabulka zachová vztah mezi údajem, hlavičkou a podmínkou i při menší šířce. Nestačí ji zmenšit, dokud se vejde na obrazovku.
Následující postup pomůže redaktorovi připravit srozumitelná data a správci převzít skutečně použitelný výstup. Příklady jsou vlastní modely. Nejde o měření konkrétního pluginu ani úplné posouzení přístupnosti všech tabulek na webu.
Nejdřív rozhodněte, zda tabulku potřebujete
Tabulka je vhodná, když se mají porovnávat odpovídající vlastnosti několika položek. Pro tři navazující kroky bude lepší číslovaný seznam; pro jeden závěr často stačí odstavec. Pokud každý řádek vyžaduje dlouhé samostatné vysvětlení, rozdělte téma do menších přehledů a návazných oddílů.
Nesázejte do tabulky celou stránku jen kvůli vzhledu. Obsah pak může být obtížně čitelný v jiném způsobu prezentace. Před formátováním si napište větu „Čtenář zde porovná…“. Pokud ji nedokážete dokončit konkrétně, možná zatím chybí jasný účel přehledu.
Sjednoťte význam hodnot
Sloupec „Cena“ nestačí, pokud první řádek uvádí měsíční částku a druhý roční platbu. Stejně matoucí je smíchat cenu bez daně, s daní a časově omezenou akci. Před vložením srovnání sjednoťte jednotky, období a předpoklady, případně rozdíly výslovně označte.
- Do hlavičky napište jednotku a období, pokud platí pro celý sloupec.
- Rozlišujte nulu, chybějící údaj a službu, která v nabídce není.
- Důležitou podmínku neponechávejte jen ve vzdálené poznámce.
- Používejte stejnou přesnost a způsob zápisu srovnatelných hodnot.
- Modelové hodnoty jasně odlište od skutečného aktuálního ceníku.
Srozumitelnost dat předchází technickému značení. Správně vytvořená hlavička nezachrání sloupec s neporovnatelnými čísly. Autor odpovídá za význam, editor za konzistenci a technický správce za to, aby se vztahy zachovaly ve výstupu.
Hlavička musí být hlavičkou i v HTML
Tučný první řádek nemusí poskytovat potřebnou informaci asistivní technologii. Datové buňky se zapisují jako td, hlavičkové jako th. U běžného srovnání pomáhá jasné určení, že hlavička patří sloupci, případně řádku. U složitějších tabulek mohou být potřeba další explicitní vztahy.
Redaktor nemusí ručně psát celý kód. Musí však vědět, zda editor nebo plugin nabízí skutečné hlavičky a co vytvoří veřejně. Krátký název tabulky může vysvětlit její účel. U více úrovní a slučovaných buněk zvažte, zda stejné informace nelze rozdělit do jednodušších přehledů.
| Prvek přehledu | Redakční úkol | Technická kontrola |
|---|---|---|
| Název tabulky | Vysvětlit, co se porovnává | Dostupné pojmenování přehledu |
| Hlavička | Uvést význam a jednotky | Skutečné hlavičkové buňky |
| Datová buňka | Zachovat srovnatelné hodnoty | Správný vztah k hlavičce |
| Poznámka | Doložit důležitou podmínku | Čitelné umístění u tabulky |
Přehled nadpisů a kontextu celého článku řeší redakční návod k přístupné struktuře. Tabulka by neměla být jediným místem, kde se čtenář dozví hlavní závěr srovnání.
Na telefonu potřebujete konkrétní způsob čtení
Jednoduché dva sloupce mohou zůstat čitelné bez zvláštní úpravy. Širší srovnání může potřebovat vlastní vodorovně posuvnou oblast nebo pečlivě navržené karty. Obě cesty mají podmínky. U posunu musí být přístupný i pravý okraj, u karet se nesmí ztratit názvy parametrů a vztahy.
Nedávejte pevnou šířku celé stránce, aby tabulka vypadala stejně jako na monitoru. Vlastní posun přehledu nemá nutit člověka posouvat současně celé odstavce. Zkontrolujte i to, zda je pokračování tabulky rozpoznatelné; uživatel nemusí tušit, že mimo výřez zbývá důležitý sloupec.
Při technickém návrhu se dohodněte také na ovládání klávesnicí. Člověk bez dotyku nebo myši musí mít použitelnou cestu ke skrytým údajům. Konkrétní implementaci posuzujte podle skutečného prohlížeče a asistivní technologie. Samotný přidaný atribut ještě neprokazuje funkční posun.
Model: tři nabídky a dvě cenová období
Představte si vlastní model služby s cenou prvního období a následné obnovy. Místo dvou hodnot v jedné buňce je oddělíte do jasně pojmenovaných sloupců. Poznámka u tabulky vysvětlí, že jde o model pro stejnou délku období a stejný daňový režim. Čtenář pak nemusí odhadovat, proč jedna hodnota vypadá levnější.
Pokud je tabulka příliš široká, můžete oddělit náklady a technické parametry do dvou přehledů se stejným pojmenováním nabídek. Neskrývejte ale dražší obnovu jen proto, aby se cenové srovnání vešlo. Zmenšení rozsahu zobrazení nesmí změnit význam výsledku. Hlavní závěr napište krátce také do odstavce.
| Varianta výstupu | Co musí zůstat zachované | Na co se při převzetí zaměřit |
|---|---|---|
| Vodorovný posun | Celé sloupce a hlavičky | Dosažení pravého okraje |
| Karty položek | Název každého parametru | Srovnatelnost a pořadí |
| Dvě menší tabulky | Identita položek a podmínky | Návaznost obou přehledů |
| Kratší přehled | Podstatné rozhodovací údaje | Nezamlčené výjimky |
Odkazy nesmí ztratit význam ani kontrast
Pokud název nabídky vede na podrobný profil, má být odkaz rozpoznatelný v běžném i aktivním stavu. Samotná jemná změna barvy může být obtížně postřehnutelná. Zkontrolujte také, zda lze odkaz pohodlně aktivovat na mobilu a zda nepřekrývá jinou akci.
Cíle otevřete a ověřte, že odpovídají popisku. Srovnávací tabulka nemá slibovat přímou objednávku, pokud vede na redakční vysvětlení. Běžné interní odkazy můžete ponechat v obsahu, externí podklady soustřeďte do závěrečných zdrojů podle formátu magazínu.
Přejímací kontrola potřebuje celý obsah
- Otevřete veřejný článek bez přihlášení a spočítejte očekávané tabulky.
- Přečtěte hlavičky, první i poslední řádek a důležité poznámky.
- Na malé šířce ověřte pravý okraj a skutečné ovládání posunu.
- Zkuste zvětšení textu a odkaz uvnitř tabulky.
- Porovnejte veřejné hodnoty s podkladem a uložte výsledek.
Screenshot levé části nepotvrzuje dostupnost posledního sloupce. Stejně tak přítomnost celého HTML v odpovědi serveru neprokazuje čitelnost vykreslené tabulky. Výsledek popisujte podle skutečné zkoušky. Širší rámec nabízí vstupní kontrola přístupnosti magazínu.
Před společnou změnou zkontrolujte staré formáty
Archiv může obsahovat běžné HTML, bloky editoru a tabulky staršího pluginu. Oprava nového formátu se nemusí projevit ve všech. Vyberte reprezentativní vzorek a změnu nejprve ověřte na testovací kopii webu. Zachovejte data, odkazy a podmínky srovnání.
Do redakčního zadání napište očekávaný výstup, nikoli jen „udělat mobilní tabulky“. Uveďte nejširší příklad, způsob ovládání, důležité sloupce a ověření asistivní technologií, pokud je součástí objednávky. Převzetí pak může být věcné a opakovatelné.
Časté otázky
Je vodorovný posun vždy špatně?
Ne automaticky. U datových přehledů může být použitelným řešením. Musí však umožnit skutečně dosáhnout na celý obsah a zachovat čitelnost okolní stránky.
Stačí udělat první řádek tučně?
Nestačí pro významové označení hlaviček. Ověřte skutečnou strukturu tabulky a vztah hlaviček k datům.
Mají se na mobilu skrýt méně důležité sloupce?
Jen pokud tím nezmizí potřebné informace nebo mají dostupnou náhradu. Podmínka rozhodující o ceně nemá zmizet kvůli úspoře místa.
Je obrázek tabulky dobrá náhrada?
Obvykle zhorší práci s textem a daty. Důležité hodnoty zajistěte dostupnou textovou strukturou, ne jen rastrovým snímkem.
Ověří screenshot přístupnost tabulky?
Ověří jen část vizuálního výsledku. Ovládání, významové vztahy a chování asistivní technologie potřebují další odpovídající zkoušku.
