M

MLOG

Čeština

Naučte se, jak zpřístupnit své webové stránky všem pomocí implementace pokynů WCAG ve vašem CSS. Tvořte inkluzivní design pro globální publikum.

Přístupnost v CSS: Praktický průvodce pro soulad s WCAG

V dnešním stále více digitálním světě není zajištění přístupnosti webu jen osvědčeným postupem, ale etickým imperativem. Přístupné webové stránky poskytují rovný přístup a příležitosti všem uživatelům bez ohledu na jejich schopnosti. Tento průvodce se zaměřuje na to, jak využít CSS k vytváření přístupných a inkluzivních webových zážitků v souladu s Pokyny pro přístupnost obsahu webu (WCAG).

Co je WCAG a proč je to důležité?

Pokyny pro přístupnost obsahu webu (WCAG) jsou souborem mezinárodně uznávaných doporučení pro zpřístupnění webového obsahu lidem se zdravotním postižením. WCAG, vyvinuté konsorciem World Wide Web Consortium (W3C), poskytuje sdílený standard pro přístupnost webu, který splňuje potřeby jednotlivců, organizací a vlád na mezinárodní úrovni. WCAG je důležité, protože:

Principy WCAG: POUR

WCAG je založeno na čtyřech základních principech, které se často pamatují pomocí zkratky POUR:

Techniky CSS pro přístupnost

CSS hraje klíčovou roli v dosažení souladu s WCAG. Zde jsou některé klíčové techniky CSS, které je třeba zvážit:

1. Sémantické HTML a CSS

Správné používání sémantických HTML prvků poskytuje význam a strukturu vašemu obsahu, což ho činí přístupnějším pro čtečky obrazovky a další asistenční technologie. CSS pak vylepšuje prezentaci těchto sémantických prvků.

Příklad:

Místo používání obecných prvků <div> pro všechno používejte sémantické prvky jako <article>, <nav>, <aside>, <header>, <footer>, <main>, <section> a tagy nadpisů (<h1> až <h6>).

HTML:

<article> <h2>Název článku</h2> <p>Obsah článku patří sem.</p> </article>

CSS:

article { margin-bottom: 20px; } h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }

Použitím <article> a <h2> poskytujete obsahu sémantický význam, což pomáhá asistenčním technologiím porozumět struktuře a kontextu.

2. Barva a kontrast

Zajistěte dostatečný barevný kontrast mezi textem a barvami pozadí, aby byl obsah čitelný pro uživatele se slabým zrakem nebo barvoslepostí. WCAG 2.1 úroveň AA vyžaduje kontrastní poměr alespoň 4.5:1 pro normální text a 3:1 pro velký text (18pt nebo 14pt tučně).

Nástroje pro kontrolu barevného kontrastu:

Příklad:

/* Dobrý kontrast */ body { background-color: #000000; /* Černá */ color: #FFFFFF; /* Bílá */ } /* Špatný kontrast */ body { background-color: #FFFFFF; /* Bílá */ color: #F0F0F0; /* Světle šedá */ }

První příklad poskytuje dobrý kontrast, zatímco druhý příklad má špatný kontrast a pro mnoho uživatelů by byl obtížně čitelný.

Nejen barva: Nespoléhejte se pouze na barvu pro sdělení informací. Používejte textové popisky, ikony nebo jiné vizuální prvky navíc k barvě, abyste zajistili, že informace jsou přístupné všem. Například místo zvýraznění povinných polí formuláře červeně použijte kombinaci červeného okraje a textového popisku jako "(povinné)".

3. Indikátory fokusu

Když uživatelé navigují na vašem webu pomocí klávesnice (např. pomocí klávesy Tab), je klíčové poskytnout jasné vizuální indikátory fokusu, aby věděli, který prvek má aktuálně fokus. Výchozí indikátor fokusu prohlížeče může být v některých případech nedostatečný nebo dokonce neviditelný. Použijte CSS k přizpůsobení indikátoru fokusu, aby byl výraznější.

Příklad:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* Modrý obrys */ outline-offset: 2px; /* Vytvoří mezeru mezi prvkem a obrysem */ }

Tento CSS kód přidává modrý obrys prvkům, když získají fokus. Vlastnost outline-offset přidává malou mezeru mezi prvkem a obrysem, což zlepšuje viditelnost. Vyhněte se úplnému odstranění indikátoru fokusu bez poskytnutí vhodné náhrady, protože to může váš web učinit nepoužitelným pro uživatele klávesnice.

4. Navigace klávesnicí

Zajistěte, aby všechny interaktivní prvky (odkazy, tlačítka, pole formuláře atd.) byly navigovatelné pomocí klávesnice. To je nezbytné pro uživatele, kteří nemohou používat myš. Pořadí prvků ve zdrojovém kódu HTML by mělo odpovídat vizuálnímu pořadí na stránce, aby se zajistil logický tok navigace. Použijte CSS k vizuálnímu přeuspořádání prvků při zachování logického pořadí navigace klávesnicí.

Příklad:

Představte si scénář, kdy chcete pomocí CSS zobrazit navigační menu na pravé straně obrazovky. Pro účely přístupnosti však chcete, aby se navigační menu objevilo ve zdrojovém kódu HTML jako první, aby na něj uživatelé čteček obrazovky narazili před hlavním obsahem.

HTML:

<nav> <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> <h1>Hlavní obsah</h1> <p>Toto je hlavní obsah stránky.</p> </main>

CSS:

body { display: flex; } nav { order: 1; /* Přesune navigaci doprava */ width: 200px; padding: 20px; } main { order: 0; /* Ponechá hlavní obsah vlevo */ flex: 1; padding: 20px; }

Použitím vlastnosti order v CSS můžete vizuálně přeuspořádat navigační menu na pravou stranu obrazovky při zachování jeho původní pozice ve zdrojovém kódu HTML. Tím je zajištěno, že uživatelé klávesnice narazí na navigační menu jako první, což zlepšuje přístupnost.

5. Zodpovědné skrývání obsahu

Někdy potřebujete skrýt obsah z vizuálního zobrazení, ale ponechat ho přístupný pro čtečky obrazovky. Například můžete chtít poskytnout další kontext pro odkaz nebo tlačítko, které je vizuálně reprezentováno pouze ikonou. Vyhněte se použití display: none nebo visibility: hidden, protože tyto vlastnosti skryjí obsah jak vizuálním uživatelům, tak čtečkám obrazovky. Místo toho použijte techniku, která vizuálně skryje obsah, ale ponechá jej přístupný pro asistenční technologie.

Příklad:

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

Tato CSS třída vizuálně skryje prvek, ale ponechá jej přístupný pro čtečky obrazovky. Aplikujte tuto třídu na text, který chcete, aby byl čten čtečkami obrazovky, ale nebyl zobrazen vizuálně.

Příklad v HTML:

<a href="#">Upravit <span class="sr-only">položku</span></a>

V tomto příkladu je text "položku" vizuálně skryt, ale bude přečten čtečkami obrazovky, čímž poskytne kontext pro odkaz "Upravit".

Atributy ARIA (Accessible Rich Internet Applications): Používejte atributy ARIA uvážlivě k vylepšení přístupnosti dynamického obsahu a složitých komponent uživatelského rozhraní. Atributy ARIA poskytují asistenčním technologiím další sémantické informace. Vyhněte se však používání atributů ARIA k opravě problémů s přístupností, které lze vyřešit sémantickým HTML. Například použijte role a atributy ARIA k definování vlastních widgetů a poskytování aktualizací stavu čtečkám obrazovky, když se obsah dynamicky mění.

6. Responzivní design a přístupnost

Zajistěte, aby byl váš web responzivní a přizpůsoboval se různým velikostem obrazovek a zařízením. To je klíčové pro uživatele se zdravotním postižením, kteří mohou používat asistenční technologie na mobilních zařízeních nebo tabletech. Použijte CSS media queries k úpravě rozvržení a prezentace vašeho obsahu na základě velikosti a orientace obrazovky.

Příklad:

@media (max-width: 768px) { nav ul { flex-direction: column; /* Seskupí položky navigace vertikálně na menších obrazovkách */ } }

Tento CSS kód používá media query ke změně směru položek navigace na vertikální na menších obrazovkách, což usnadňuje navigaci na mobilních zařízeních.

7. Animace a pohyb

Nadměrné nebo špatně implementované animace mohou u některých uživatelů způsobit záchvaty nebo kinetózu. Použijte CSS k omezení nebo zakázání animací pro uživatele, kteří preferují omezený pohyb. Media query prefers-reduced-motion vám umožňuje zjistit, zda uživatel požádal, aby systém minimalizoval množství animací nebo pohybu, které používá.

Příklad:

@media (prefers-reduced-motion: reduce) { .animated-element { animation: none !important; transition: none !important; } }

Tento CSS kód zakazuje animace a přechody pro uživatele, kteří si ve svém operačním systému povolili nastavení "omezený pohyb". Zvažte poskytnutí ovládacího prvku, který uživatelům umožní ručně zakázat animace na vašem webu.

8. Testování s asistenčními technologiemi

Nejúčinnějším způsobem, jak zajistit přístupnost vašeho webu, je testovat jej s asistenčními technologiemi, jako jsou čtečky obrazovky, zvětšovače obrazovky a software pro rozpoznávání řeči. Použijte různé asistenční technologie, abyste získali komplexní přehled o přístupnosti vašeho webu.

Populární čtečky obrazovky:

Další tipy pro testování:

Pokročilé techniky CSS pro přístupnost

1. Vlastní vlastnosti (CSS proměnné) pro motivy

Použijte vlastní vlastnosti CSS (proměnné) k vytvoření přístupných motivů s možnostmi vysokého kontrastu. To umožňuje uživatelům přizpůsobit vzhled vašeho webu svým individuálním potřebám.

Příklad:

:root { --text-color: #333; --background-color: #fff; --link-color: #007bff; } body { color: var(--text-color); background-color: var(--background-color); } a { color: var(--link-color); } /* Vysoce kontrastní motiv */ .high-contrast { --text-color: #fff; --background-color: #000; --link-color: #ff0; }

Tento příklad definuje vlastní vlastnosti CSS pro barvu textu, barvu pozadí a barvu odkazu. Třída .high-contrast tyto proměnné přepisuje a vytváří tak vysoce kontrastní motiv. Poté můžete pomocí JavaScriptu přepínat třídu .high-contrast na prvku <body> a měnit tak motivy.

2. CSS Grid a Flexbox pro přístupná rozvržení

CSS Grid a Flexbox jsou výkonné nástroje pro rozvržení, které lze použít k vytvoření přístupných a responzivních rozvržení. Je však důležité je používat opatrně, aby se zajistilo, že vizuální pořadí prvků odpovídá pořadí v DOM.

Příklad:

Při použití Flexboxu nebo Gridu zajistěte, aby pořadí tabulátorů zůstalo logické. Vlastnost order může narušit pořadí tabulátorů, pokud není použita opatrně.

3. `clip-path` a přístupnost

Vlastnost `clip-path` lze použít k vytváření vizuálně zajímavých tvarů a efektů. Buďte však opatrní při jejím používání, protože může někdy zakrýt obsah nebo ztížit interakci s ním. Ujistěte se, že oříznutý obsah zůstává přístupný a že ořezávání nezasahuje do navigace klávesnicí nebo přístupu čtečky obrazovky.

4. Vlastnost `content` a přístupnost

Vlastnost `content` v CSS lze použít k vložení generovaného obsahu před nebo za prvek. Generovaný obsah však není vždy přístupný čtečkám obrazovky. Používejte vlastnost `content` uvážlivě a zvažte použití atributů ARIA k poskytnutí dalších sémantických informací asistenčním technologiím.

Příklady z praxe a případové studie

Podívejme se na několik příkladů z reálného světa, abychom si ukázali, jak se tyto principy uplatňují v různých regionech a kontextech.

Časté chyby v přístupnosti, kterým se vyhnout

Závěr: Přijetí přístupnosti pro lepší web

Přístupnost není jen technický požadavek; je to základní aspekt vytváření webu, který je inkluzivní a přístupný všem. Implementací těchto technik CSS a dodržováním pokynů WCAG můžete vytvářet webové stránky, které jsou nejen vizuálně přitažlivé, ale také použitelné a příjemné pro všechny uživatele bez ohledu na jejich schopnosti. Přijměte přístupnost jako nedílnou součást svého procesu vývoje webu a přispějete tak k inkluzivnějšímu a spravedlivějšímu digitálnímu světu.

Zdroje a další literatura