html prístupnosť: anchor tagy s pozadiacimi obrázkami na pseudo elementoch - html, image, background, accessibility

Moja spoločnosť skúma niektoré scenáre, ktoré používame bežne v našom dizajne, ktoré si uvedomujeme, že nemusia byť 100% kompatibilné s normami WCAG 2.0.

Jedným z takýchto scenárov je, že máme kotevné značky (napríklad odkazy sociálnych médií), ktoré nemajú žiadny obsah a obrázok na pozadí, ktoré sú deklarované na pseudo prvku.

Najlepšie alternatívy, ktoré som si vedomý, sú:

1. Použite a title atribút na odkaz

2. Pridajte text na odkaz zabalený v a span s triedou iba "čítacieho zariadenia", ako napríklad tento príklad eBay Mind vzory:

   .clipped {
   border: 0 !important;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px !important;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   white-space: nowrap !important;
   width: 1px !important;
   }
   

A aby sme boli jasní, je to príklad pseudotriedneho pozadia obrazu, ktorý používame

.pseudo::after {
content: "";
display: block;
width: 64px;
height: 64px;
background-image: url("images/pizza.png");
}

Akékoľvek nápady, ktoré z nich sú viac kompatibilné?

Možnosť 1: Názov, bez textu

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

Možnosť č. 2: textový odkaz na čítači obrazovky

<a href="http://pizza.com" class="pseudo pizza">
<span class="clipped">pizza text</span>
</a>

odpovede:

1 pre odpoveď č. 1

Krátka odpoveď: ak je to možné, uprednostňujte druhú.

Na title atribút je trochu zložitejšia, pretože nie všetky obrazovky čítať to v predvolenom nastavení.Takže ak chcete byť na bezpečnej strane a 100% sa vzťahuje na čítanie z obrazovky, použite text vo vnútri <a> Tagy a urobiť z neho screen reader iba, ak je to potrebné.

---

1 pre odpoveď č. 2

Tiež by hlasovať pre druhú možnosť, ale iná metóda je vlastne majú textový obsah na odkaz, ale pridať text-indent: -5000px; (alebo iného podobne vysokú zápornú hodnotu) na jeho CSS presun textu mimo obrazovku.

---

0 pre odpoveď č. 3

Keď to "s ťažko vybrať medzi najlepšie z dvoch svetov, nesnažte sa.

Najjednoduchšie riešenie:

<a href="http://pizza.com" class="pseudo pizza" title="pizza text" aria-label="pizza test">
<span class="clipped">pizza text</span>
</a>

Prečo? Pretože title Atribút bude prístupný pre používateľov, ktorí nie sú programami na čítanie, ako popis, a program na čítanie obrazovky môže použiť orezaný text, ak nie je nakonfigurovaný na jeho používanie.

Použitie aria-label je tiež veľmi dôležitá, pretože vizuálne využíva CSSskrývajúce sa prvky môžu mať za následok náhodné správanie v závislosti od použitej podpornej technológie. Napríklad niektoré podporné technológie sa môžu rozhodnúť pre odstránenie neviditeľného textu, zatiaľ čo iné si ich ponechajú.

Najlepšou voľbou pre podporu všetkých čítačiek obrazovky je použitie týchto troch možností: aria-label pre posledné čítačky obrazovky, orezaný text pre staré a title pre štandardných používateľov.

---