Optimalizace webu pro nevidomé a jejich odečítače obrazovek

Dodržování základních pravidel tvorby stránek s ohledem na zrakově postižené není vůbec časově náročné a rozhodně to neznamená dělat nějakou jejich speciální verzi.
Nevidomému uživateli lze orientaci na www stránce usnadnit použitím skrytých odkazů. Je to hlavně odkaz na hlavní obsah stránky uvedený hned na jejím začátku, který přeskočí menu (či další odkazy, co se opakují na každé stránce webu). Tento odkaz je uživateli přečten jako první a on může rovnou zamířit na hlavní obsah stránky. Vhodné je přidat tento odkaz i na konec stránky.
Tyto skryté odkazy se nezobrazí v prohlížeči, ale přečte je jen odečítač obrazovky - tzv. screenreader. Proto se označuje v odkazu třídou nazvanou class="sr-only" (screenreader only).

Jak tedy jednoduše na to?

1. Na začátek stránky, za tagem <body>, umístíme odkaz
<a href="#obsah" class="sr-only" title="Přeskoč na obsah">Přeskoč na obsah</a>

2. Odkaz skryjeme pomocí CSS (třída class="sr-only") přidáním do CSS souboru:

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

3. Tento odkaz bude odkazovat na místo stránky, kde začíná obsah stránky - po odkazech v menu, aby je čtečka nečetla opakovaně - tedy tam, kam přidáme takzvanou kotvu: <a name="obsah"></a>.


4. Na konec stránky, před tagem </body>, přidáme také odkaz na začátek obsahu stránky:
<a href="#obsah" title="Přeskoč na začátek" class="sr-only">Přeskoč na začátek</a>