Přístupný web jednoduše: praktický checklist pro developery

Minimální standard přístupnosti slouží jako oficiální podklad pro validaci návrhů designu, checklist při code review a základ pro testovací scénáře. Díky němu dokážeme vytvářet weby, které jsou přístupné a pohodlné pro všechny uživatele.

📚 Velmi dobře zpracované materiály o všech pravidlech specifikace WCAG najdete na webové stránce: WCAG in Plain English.​

1. Sémantické HTML a proč nepoužívat všude <div>

HTML obsahuje řadu tagů, které sémanticky popisují obsah na webu. Pokud jej používáme správně, např. pro navigaci použijeme <nav>, pro každý vstup vyplníme <label> nebo interaktivní prvky zapíšeme jako <button>, budou čtečky obrazovky lépe rozumět obsahu a struktuře webu.

Tip: Vygenerujte si sémantické HTML pomocí AI (doporučuji např. Gemini PRO)

„Vygeneruj mi z tohoto screenshotu přístupný HTML bez stylů“

Gemini vygenerovalo:

<section aria-labelledby="benu-nadpis">

    <div>
        <img src="cesta-k-vasemu-obrazku.png" alt="Aplikace Benu lekárny zobrazená na displeji mobilního telefonu.">
    </div>

    <div>
        <h2 id="benu-nadpis">
            Creating a state-of-the-art experience for Benu pharmacies
        </h2>

        <dl>
            <div>
                <dt>10K+</dt>
                <dd>Average daily users</dd>
            </div>
            <div>
                <dt>99.9%</dt>
                <dd>Cash free rate</dd>
            </div>
            <div>
                <dt>4.8*</dt>
                <dd>App rating on Google Play Store &amp; App Store</dd>
            </div>
        </dl>

        <a href="/case-study/benu-pharmacies" aria-label="Read more about the Benu pharmacies case study">
            Read more
        </a>
    </div>

</section>

Shrnutí prvků přístupnosti (WCAG) v kódu:

• Sémantická struktura: Použití značek <section>, <h2>, <dl> dává obsahu logickou strukturu.
• Textová alternativa: Atribut alt u značky <img> zajišťuje, že informace z obrázku jsou dostupné i pro nevidomé.
• Označení sekce: Použití aria-labelledby pomáhá uživatelům asistenčních technologií rychle se zorientovat v obsahu stránky.
• Jasné odkazy: aria-label u odkazu <a> poskytuje jednoznačný popis cíle odkazu, což je klíčové pro odkazy s obecným textem jako „Read more“.
• Sémantická presnost: Zatímco <ul> (neuspořádaný seznam) je dobrý, <dl> (seznam definic)  je ještě přesnější. Přímo komunikuje vztah mezi hodnotou metriky (<dt>) a jejím popisem (<dd>), což asistenční technologie dokážou interpretovat a lépe prezentovat uživateli.

ℹ️ Kromě toho sémantické HTML pomáhá vyhledávačům lépe porozumět obsahu stránky, což má výrazný vliv i na pozici ve vyhledávačích.

Proč je důležité používat správné HTML tagy, si můžeme ukázat na tlačítku:

▶️ CodeSandbox příklad ◀️

<!-- Špatný příklad ❌-->
<div className="button" onClick={handleClick}>
  Open something
</div>

<!-- Dobrý příklad ✅ (onClick může být použit pouze na focusable elementech) -->
<button className="button" onClick={handleClick}>
  Open something
</button>

Na první pohled tlačítko funguje. Když kliknu myší, vyvolá se funkce handleClick stejně jako pro div, tak i pro button. Pokud se však na webu pohybuji pomocí klávesnice (kombinace Tab a Enter), div se stává téměř nepoužitelným. Pro nativní tag  <button> prohlížeč automaticky doplnil potřebnou funkcionalitu, např. tabindex nebo focus stav.

📚 Velmi kvalitně zpracovaný materiál o všech HTML tágách je k dispozici na MDN Web Docs.

2. ARIA (pokud neexistuje alternativa HTML)

ARIA (Accessible Rich Internet Applications) je sada speciálních atributů, které můžete přidat do HTML kódu. Tyto atributy používají výhradně asistenční technologie a nijak neovlivňují vykreslený obsah na webu, ale pouze poskytují doplňující informace pro asistenční technologie.

⚠️ Používejte atributy ARIA s rozvahou a pouze jako poslední možnost, pokud neexistuje žádná alternativa v HTML! Pokud použijete atributy ARIA nesprávně, můžete tím přístupnost webu zhoršit ještě více, než kdybyste je nepoužili vůbec.

Tři hlavní typy atributů ARIA:

1. Role (Roles) – Definuje, co daný prvek je.

• Říká čtečce: „Toto není jen obyčejný<div>, toto je navigace nebo tlačítko.“
• Příklady: role="navigation", role="dialog", role="button", role="search".
  • HTML tagy, např. <nav> nebo <button>, utomaticky přidávají roli, a proto je třeba používat správné HTML tagy! Nejlepší ARIA je žádná ARIA.
  • Pokud použijete roli ARIA pro interaktivní prvek, např.role="tab", role="slider", ssamotná role nepřidá žádnou funkčnost. Pouze informuje čtečku obrazovky. Vaším úkolem zůstává doprogramovat ovládání klávesnicí (např. šipkami, Esc, Enter) pomocí JavaScriptu.

❌ Špatně: <div role="button" tabindex="0" onclick="maFunkce()">Uložit</div>
✅ Správne: <button onclick="maFunkce()">Uložit</button>

2. Vlastnosti (Properties) - Definuje vlastnosti a vztahy prvku.

• Popisují vlastnosti, které se obvykle nemění.
• Příklady: aria-labelledby="id-popisu" (říká, kde najít textový popis), aria-required="true" (označuje povinné políčko), aria-invalid="true" (označuje, že hodnota je nesprávná).

3. Stavy (States) - Definuje aktuální stav prvku.

• Popisují podmínky, které se mění na základě interakce uživatele (obvykle pomocí JavaScriptu).
• Příklady: aria-expanded="false" (označuje, že rozbaľovací prvek je zabalený), aria-hidden="true" (skryje prvek před čtečkou), aria-disabled="true" (označuje, že prvek je neaktivní).

📚 Více informací o správném používání ARIA najdete v dokumentaci MDN.

⚠️ Standardní HTML tagy obvykle nevyžadují implementaci atributů ARIA, ale vlastní řešení vyžadují zvýšenou pozornost. Obvykle pro nestandardní funkce, např. dialog, swiper, datepicker nebo další, používáme knihovny třetích stran. Ujistěte se, že tyto knihovny implementují správné atributy ARIA.

3. Důležité vlastnosti stránky

1. Vyplněný název stránky <title>

Každá HTML stránka musí mít v sekci <head> unikátní a popisný element <title>. Dobrý název je jedinečný, stručný a výstižný. Držte se následujících doporučení:

• Dejte stránku do kontextu: Vždy uveďte název konkrétní podstránky i název celého webu. Osvědčený formát je: Specifický název stránky | Název webu.
• Buďte konkrétni: Namísto "Služby" použijte "Grafický design | Kreativní Studio". Namísto "Profil" použijte "Profil Jana Nováka | Naše Firma".
• Nejdůležitější na začátek: Jelikož názvy bývají v záložkách a ve výsledcích vyhledávání zkráceny, nejdůležitější informace (název konkrétní stránky) umístěte na začátek.
• Stručnost: Ideální délka je přibližně 50-60 znaků, aby se název zobrazil celý ve výsledcích vyhledávání.

2. Vyplněný lang atribut v html tagu

• Aplikace musí mít programově určený hlavní jazyk obsahu (např. čeština, lang="cs"). To umožňuje asistenčním technologiím, jako jsou čtečky obrazovky, správně interpretovat a vyslovovat text.
• Když měníme jazyk stránky (např. přes dropdown v menu), tak je třeba dynamicky upravit i lang pomocí JavaScriptu

3. Část stránky v jiném jazyce

• Pokud se v textu nachází slovo, fráze nebo odstavec v jiném jazyce, než je hlavní jazyk stránky, tento úsek musí být také označen pomocí lang atributu.

<!DOCTYPE html>
<html lang="cs"> ✅ Vyplněný lang atribut v html tagu
<head>
    <meta charset="UTF-8">
    <title>Webdesign na míru | Název Firmy</title> ✅ Vyplněný title
    </head>
<body>
    <h1>Naše služby v oblasti webdesignu</h1>
    <p>Nabízíme moderní a přístupné webové stránky...</p>
    
    <blockquote lang="en"> ✅ Pokud je text v jiném jazyce než celá stránka
	    <p>The only way to do great work is to love what you do.</p>
	    <footer>- Steve Jobs</footer>
		</blockquote>
</body>
</html>

4. Navigace pomocí klávesnice a focus

Ne všichni používají myš k navigaci na webu. Někteří nemohou myš používat kvůli nemoci, zkušení uživatelé ovládají web pomocí klávesnice nebo na televizi ovládáme web pomocí dálkového ovladače... Tito uživatelé se spoléhají na to, že všechny interaktivní prvky na webu, např. tlačítka, odkazy nebo formuláře, mají svůj focus stav.

Asi by se vám nelíbilo, kdyby se na webu nezobrazoval kurzor. Často to však děláme pro uživatele, kteří se na webu orientují pomocí klávesnice.

body {
  cursor: none; /* tohle byste na webu určitě neudělali */
}

:focus {
  outline: none; /* takže, prosím, nedělejte ani toto */
}

:focus má však jednu vlastnost, která nutí vývojáře outline mazat. Při kliknutí myší, např. na tlačítko, se kolem něj zobrazuje rámeček, což nevypadá dobře. V moderních prohlížečích můžeme tento problém snadno vyřešit, pokud místo :focus použijeme :focus-visible. Tento selektor již podporují všechny moderní prohlížeče a díky němu se rámeček zobrazuje pouze při navigaci pomocí klávesnice (zaměřujeme se na tlačítko pomocí klávesy Tab).

Je třeba dbát na to, aby byl focus stav dostatečně vizuálně odlišen:

• Focus je alespoň 2px tlustý a musí mít kontrast 3:1 (úroveň AAA).

• Focus stav pro formulářová pole by měl změnit také tloušťku rámečku. Změna barvy by neměla být jediným způsobem, jak odlišit stav aktivního pole.

• Focus klávesnice není zcela překrytý jiným obsahem (úroveň AA). Focus není vůbec překrytý obsahem (úroveň AAA)

• Obvykle chceme vlastní styl pro focus stav, který lépe ladí s naším designem. V takovém případě můžeme přepsat výchozí styl prohlížeče:

// Príklad ako si vieme pridať vlastný štýl pre focus stav

button:focus-visible {
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

Tabindex

Interaktivní prvky, např. tlačítka, pole formulářů nebo odkazy, jsou tabulovatelné a není třeba nic dodatečně implementovat. Pokud toho chceme dosáhnout např. pro <div> můžeme mu přiřadit <div tabindex="0">. Tuto možnost můžeme využít např. v interaktivních grafech, které v HTML nemají reprezentativní tag. Pokud chceme dosáhnout opačného efektu, tedy vypnout interaktivitu (nemůžeme označit prvek pomocí klávesy Tab) použijeme tabindex="-1". Pro tabindex bychom neměli používat žádné jiné hodnoty, protože mění pořadí prvků, což obvykle nechceme.

DOM určuje pořadí

Pořadí tabulátoru se řídí pořadím prvků v HTML (DOM), nikoli vizuálním rozložením, které vytváříte pomocí CSS (např. flex-direction: column-reverse nebo order). Focus order při navigaci klávesnicí musí být logický a odpovídat vizuálnímu uspořádání stránky.

K tomuto tématu doporučuji přečíst článek Indicating focus to improve accessibility.

5. Odkazy na přeskočení

Cílem odkazů pro přeskočení je umožnit lidem přeskočit opakující se sekce nebo bloky obsahu na webových stránkách a usnadnit jim přístup k hlavnímu obsahu stránky. Nejčastějším příkladem je přeskočení hlavní navigace. Pro lidi, kteří používají navigaci pomocí klávesnice, je frustrující, když se na každé stránce musí proklikávat všemi odkazy.

Jak správně implementovat odkaz skip to content:

<!DOCTYPE html>
<html lang="cs">
<head>...</head>
<body>
    <a href="#main-content" class="skip-link">Přejít na hlavní obsah</a>

    <header>
        <nav>
            <a href="/">Domů</a>
            <a href="/o-nas">O nás</a>
            <a href="/kontakt">Kontakt</a>
        </nav>
    </header>

    <main id="main-content">
        <h1>Vítejte na naší stránce</h1>
        <p>Toto je hlavní obsah, ku kterému se uživatel dostane po kliknutí na odkaz.</p>
        <a href="/example">Další odkaz v obsahu</a>
    </main>
</body>
</html>

.skip-link {
    /* Vizuální skrytí odkazu mimo obrazovku */
    position: absolute;
    left: -999px;
    top: -999px;
    
    /* Stylujte podle designu stránky, např... */
    padding: 20px;
    backround-color: #FFF
    color: primary;
    font-size: 1.2em;
}

.skip-link:focus {
    /* Zviditelnění odkazu, když dostane fokus (např. klávesou Tab) */
    position: absolute; /* Nebo 'fixed', podle potřeby */
    top: 0px;
    left: 0px;
}

ℹ️ Inspirujte se například webem: smashingmagazine. Po načtení stránky stiskněte klávesu Tab. V levém horním rohu se zobrazí: Skip to main content.

⚠️ Nepoužívejte v Next.js <Link> komponent, ale použijte klasický natívny HTML <a> tag. Link nesprávně implementuje změnu focus stavu. Více informací v GitHub issue.

6. Prázdné odkazy a tlačítka

Každý interaktivní prvek na stránce, např. tlačítka nebo odkazy, musí mít srozumitelný název. Často se stává, že např. odkazy obsahují pouze ikonu, ale žádný text. Čtečka obrazovky tak nevidomým uživatelům nedokáže přečíst, o jaký odkaz se jedná.

Pomocí tagu <span>, který skryjeme CSS-kom, avšak pro čtečky obrazovky zůstane tento text stále viditelný, můžeme zobrazit popis pro tlačítka čistě se svg ikonami.

// CSS
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<!-- HTML -->
<a href="https://twitter.com">
  <svg aria-hidden="true" ...></svg>
  <span class="sr-only">Twitter</span>
</a>

Na svg element jsme použili atributy aria-hidden="true". Ikony na webu slouží primárně jako vizuální pomůcka, pro nevidomé však nemají žádný význam a zbytečně zahlcují důležitější obsah, např. text v tlačítku.

📚 Více informací o metodě skrytí vizuálního obsahu najdete na webu WebAIM.

Nevhodné popisy odkazů/tlačítek

• U tlačítka nebo odkazu je důležité popsat, co se stane po kliknutí. Častý příklad:

// Špatné příklady ❌
<button>Facebook</button>
<button>LinkedIn</button>

// Dobré příklady ✅
<button>Zdílet článek na Facebooku</button>
<button>Zdílet článek na LinkedIn</button>

• Dalším častým problémem jsou odkazy, které nemají žádnou informační hodnotu. Např. klikni sem, čítaj více atd. Čtečky obrazovky umí uživateli přečíst seznam všech odkazů na stránce, aby se mohl rychleji orientovat. Pokud mu však čtečka pětkrát za sebou přečte odkaz „čti více“, uživatel netuší, kam odkaz směřuje.

// Špatné příklady ❌
<a href="https://www.goodrequest.com/blog">Click here</a>
<a href="https://www.goodrequest.com/blog">Learn more</a>
<button>Edit</button>

Ideálním řešením je poskytnout smysluplný text pro tento odkaz/tlačítko. Pokud se tomu nemůžeme vyhnout, můžeme použít skrytý <span> element:

<a href="/blog">
	Show more
	<span class="sr-only">blog articles</span>
</a>

<a href="/blog/{article.url}">
	Read more
	<span class="sr-only">about {article.name}</span>
</a>

<!-- Často tlačítka v tabulkách -->
<button onClick={handleChangeAddress(user.id)}>
	Edit
	<span class="sr-only">address for user {user.name}</span>
</a>

Pokud potřebujete kompletně přepsat obsah tlačítka pro čtečku obrazovky, můžete použít atribut aria-label, ale dávejte pozor, aby se text v aria-label shodoval s viditelným textem.

✅ SPRÁVNE: 
<a href="url" aria-label="Read more about accessibility">Read more</a>
<button aria-label="Odeslat přihlášku">Odeslat</button>

❌ ŠPATNĚ (text se neshoduje): <button aria-label="Potvrdit formulář">Odeslat</button>

📚 Více o správném popisu odkazů naleznete ve WCAG specifikaci. 

7. Přístupnost formulářů

Ovládání pomocí klávesnice

Formuláře na webu by měly být, stejně jako jiné interaktivní prvky, přístupné pomocí klávesnice. Například mezi vstupy se můžeme pohybovat pomocí klávesy Tab, select by měl být možný pomocí šipek nahoru/dolů nebo checkbox označit mezerou.

Označení inputů

Každý input musí mít přiřazen viditelný <label> element. Můžeme použít dva zápisy pomocí for atributu v kombinaci s id nebo zabalením inputu do <label> elementu.

<label for="name">Name:</label>
<input id="name" type="text" autocomplete="name">

<!-- or -->

<label>Name: <input type="text" autocomplete="name"></label>

Seskupování

Checkboxy nebo radio inputy můžeme seskupit pomocí <fieldset> elementu a přiřadit jim popis pomocí <legend> elementu. Pouhé vizuální seskupení inputů však není dostačující pro osoby, které používají čtečku obrazovky.

<fieldset>
  <legend>Select your pizza toppings:</legend>
  <input id="ham" type="checkbox" name="toppings" value="ham">
  <label for="ham">Ham</label><br>
  <input id="mushrooms" type="checkbox" name="toppings" value="mushrooms">
  <label for="mushrooms">Mushrooms</label><br>
  <input id="olives" type="checkbox" name="toppings" value="olives">
  <label for="olives">Olives</label>
</fieldset>

Zpracování chyb a validace

• Pokud chceme označit input jako povinný, můžeme přidat atribut required nebo aria-required="true". Označit ho hvězdičkou nestačí, protože ne všechny čtečky obrazovky rozpoznají, že se jedná o povinný input.

<input id="name" type="text" required>

<!-- or -->

<input id="name" type="text" aria-required="true">

• Pro zrakově postižené nestačí vizuálně zvýraznit neplatný vstup, např. červenou barvou. K tomu slouží atribut aria-invalid="true", díky kterému čtečka obrazovky oznámí uživateli chybný stav.

<input id="name" type="text" aria-invalid="true">

• Propojte chybovou zprávu s polem pomocí aria-describedby. Hodnota aria-describedby je id elementu, který obsahuje chybovou zprávu. Čtečky obrazovky poté přečtou label pole, jeho typ, hodnotu a následně i chybovou zprávu.

<label for="emailUzivatele">E-mail:</label>
<input aria-describedby="emailChyba" aria-invalid="true" id="emailUzivatele" type="email" name="email">
<div id="emailChyba" class="error-message">
  Zadejte platnou e-mailovou adresu.
</div>

• Po odeslání formuláře s chybami přesuňte fokus na první chybné pole nebo na souhrn chyb. To pomáhá uživatelům klávesnice a čteček obrazovky rychle najít problémy.

📚 Podrobně zpracované informace o přístupnosti formulářů najdete na WebAIM.

8. Stavová hlášení a notifikace

Na webu některé akce nezpůsobují úplné znovunačtení stránky. Uživatel může:

• Přidat produkt do nákupního košíku.
• Vidět, jak se na stránce objeví výsledky vyhledávání.
• Odeslat formulář, který se uloží bez přesměrování.
• Narazit na chybu po provedení akce.

Vidící uživatel tyto změny vnímá vizuálně. Uživatel čtečky obrazovky se však nedozví, že se něco stalo.

Jak technicky implementovat hlášení pro screen reader?

1. varianta je nastavit atribut role:

<!-- automaticky přidává aria-live="polite" a aria-atomic="true" -->
<div role="status"> {{announcementString}} </div>

<!-- automaticky přidává aria-live="assertive" a aria-atomic="true" -->
<div role="alert"> {{announcementString}} </div>

Pro běžná (neurgentní) hlášení: role="status"

Čtečka zprávu přečte, když právě nesděluje jiný obsah (je iddle). Toto je volba pro 95% případů.

• „Položka byla přidána do vašeho košíku.“
• „Váš profil byl aktualizován.“
• „Zobrazuje se 25 výsledků vyhledávání pro ‚notebooky’.“
• „Zpráva byla úspěšně odeslána.“

Pro urgentní hlášení: role="alert"

Pro kritické chyby nebo časově omezená varování, kde je nutná okamžitá pozornost uživatele, je varování oznámeno ihned a nečeká, až bude čtečka obrazovky idle.

2. varianta je explicitně použít aria-live a aria-atomic (doporučená):

• aria-live:
  • "polite": Oznámí změnu když se nic jiného neděje.
  • "assertive": Okamžitě přeruší uživatele a oznámí změnu.
• aria-atomic:
  • "true": Přečte celý obsah elementu.
  • "false": Přečte pouze změněnou část.

<div aria-live="polite" a aria-atomic="true"></div> <!-- totéž jako role="status" -->
<div aria-live="assertive" a aria-atomic="true"></div> <!-- totéž jako role="alert" -->

Další příklady jak použít aria-live a aria-atomic:

<!-- aria-atomic="false", protože chceme oznamovat jen nové zprávy -->
<div id="chat-log" aria-live="polite" aria-atomic="false">
  <p>Jane Doe: Hi everyone!</p>
  <p>John Smith: Hello there!</p> 
</div>

<ul id="live-scores" aria-live="polite" aria-atomic="false">
  <li>Team A vs. Team B: 1-0</li>
  <li>Goal! Team A scores. The score is now 2-0.</li>
</ul>

<!-- aria-atomic="true",protože chceme oznamovat celý text a ne jen změny -->
<div id="search-summary" aria-live="polite" aria-atomic="true">
  Showing 15 of 240 products.
</div>

<div id="stepper-status" aria-live="polite" aria-atomic="true">
  Step 2 of 5: Shipping Details
</div>

<div id="toast-notification" aria-live="polite" aria-atomic="true">
  File saved successfully.
</div>


<!-- aria-live="assertive", protože chceme oznámit kritickou chybu -->
<div aria-live="assertive" aria-atomic="true">
  An unknown error occurred while saving your changes. Try again.
</div>

<div aria-live="assertive" aria-atomic="true">
  Connection to server lost. Your changes may not be saved.
</div>

Příklad jak udělat přístupný search:

function AccessibleSearch() {
  const [searchStatusMessage, setSearchStatusMessage] = useState('');

  const handleSearch = (searchTerm: string) => {
    // Search logic here
    setSearchStatusMessage(`${resultsCount} results found for ${searchTerm}`)
  };

  return (
    <>
      {/* 1. Use a form with role="search" for a landmark */}
      <form role="search" onSubmit={handleSearch}>
        {/* 2. Connect the label to the input */}
        <label htmlFor="search-input">Search our site</label>
        <input
          type="search"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>

      {/* 3. ARIA live region to announce status updates */}
      <ScreenReaderOnlySC role="status">{searchStatusMessage}</ScreenReaderOnlySC>
    </>
  );
}

ℹ️ Mantine notifikace implementují ARIA Live Regions a korektně oznamují čtečkám obrazovky obsah notifikace.

9. Jasné chybové hlášení

Chyby musí být jasně označeny a popsány uživateli. Pokud uživatel udělá chybu při vyplňování webového formuláře, všechny chyby, které udělal, musí být jasně identifikovatelné. Chybová zpráva by měla přesně uvádět, co se pokazilo a jak to opravit.

Několik příkladů užitečných chybových hlášení:

• Pokud musí vstup odpovídat sadě povolených hodnot, mělo by chybové hlášení obsahovat povolené možnosti.
• Popište, jak by měly správné údaje a formátování vypadat.
• Zobrazte podobné správné hodnoty a vysvětlete, jak je zadat.

Jasná zpětná vazba po úspěšném odeslání

Poskytnutí jasné zpětné vazby po úspěšném odeslání formuláře dává uživatelům potvrzení, že nemusí procházet formulář nebo stránku a hledat chyby. Zobrazením jasné a konzistentní zpětné vazby mohou uživatelé rychle pochopit, že jejich akce byla dokončena.

10. Gesta

Každá akce, která vyžaduje složité gesto (potažení, přiblížení špetkou, tahání, třes, naklánění), musí být vykonatelná i jednoduchou akcí, například klepnutím na tlačítko nebo stisknutím klávesy. Žádná funkce se nesmí spoléhat pouze na pohybová gesta. Pohybové ovládání může být doplněk, ale nikdy ne jediný způsob, jak něco udělat.

Příklady:

• Carousel: Kromě potažení (swipe) přidejte i viditelné šipky Další a Zpět.
• Slider: Kromě tažení posuvníku přidejte také tlačítka pro postupné zvýšení/snížení hodnoty nebo ověřte, že funguje ovládání šipkami na klávesnici.
• Mapa: Kromě přiblížení špetkou (pinch-to-zoom) přidejte také tlačítka + a -.

• Kanban boards: V detailu karty můžeme změnit status např. pomocí dropdownu a změnit stav z "To Do" na "In Progress" nebo použitím knihovny, která implementuje drag&drop pomocí klávesnice.
• Gesta „potřesením vrátit zpět“: Použijte tlačítka nebo odkazy k dosažení stejné funkčnosti.

11. Další pravidla

• Focus trap: Nesmí nastat situace, kdy otevřete např. modální okno, cookie banner, video… pomocí klávesnice a nemůžete se vrátit zpět na stránku odkud jste přišli. Vždy musí být dostupný close button nebo funkční klávesa ESC na modálním okně. Nemůžeme spoléhat jen na kliknutí mimo modální okno.
• Klávesové zkratky tvořené jedním znakem (například stisk písmene "M" pro ztlumení zvuku): Web musí poskytnout mechanismus na vypnutí zkratky, její přemapování na kombinaci s modifikační klávesou (například Ctrl nebo Alt), nebo zajistit, že je aktivní pouze tehdy, když má fokus konkrétní prvek na stránce. Cílem je zabránit uživatelům v nechtěném spouštění asistenčních technologií, když se navigují na webu pomocí klávesnice.
• Důležité formuláře, jako například právní smlouva nebo předkládání finančních informací, nabízejí možnost zkontrolovat zadané informace před odesláním: Zobrazte stránku s přehledem, která shrne všechny údaje zadané uživatelem a nabídne možnost upravit údaje nebo vrátit se zpět k editování.
• Před odstraněním nebo úpravou důležitých údajů/souborů zobraz potvrzení: Ideální pokud má uživatel možnost obnovit soubor po smazání nebo má možnost vrátit akci zpět.