element span - dostepnosc - noah busher - ach te internety

CASE STUDY: Dostępny element span

Dzisiaj chciałabym z Tobą porozmawiać o dostępności elementu <span>. Jak można go popsuć, zapytasz, przecież to tylko span… Otóż weźmy na warsztat bardzo specyficzny przypadek, kiedy otaczamy tagiem <span> jedynie część słowa. Pamiętaj, diabeł tkwi w szczegółach.

Spójrzmy na przykład:

<p>ana<span>kon</span>da</p>

Czemu ten kod nie jest dostępny? Daj sobie chwilę na refleksję, co tu może pójść nie tak

Zanim wyjaśnię sedno problemu, zastanówmy się, w jakich przypadkach korzystamy z możliwości fragmentarycznego zastosowania tagu <span>?

Inicjal - przyklad
Źródło: http://www.magazinedesigning.com/drop-caps-and-initial-letters/

Najbardziej praktycznym przykładem są inicjały (lub też drop caps). Czasami efekt inicjału można uzyskać za pomocą CCSów oraz pseudoelementu ::first-letter, jednak to rozwiązanie nie jest spójnie obsługiwane na wszystkich cywilizowanych przeglądarkach. Sposób ze spanem jest bezpieczniejszy.

Innych stylistycznych przykładów podawać nie będę, ogranicza je jedynie wyobraźnia grafika. I to, jak bardzo masz z nim na pieńku

Wróćmy do pytania: czemu to specyficzne zastosowanie tagu <span> nie można nazwać dostępnym?

Otóż czytnik ekranu przeczyta powyższy tekst “ana kon da”, traktując sylabę “kon” jako osobne słowo. Niektóre czytniki poradzą sobie z takim tekstem lepiej, niektóre gorzej. W jednym przypadku użytkownik nie zauważy problemu, w innym – uszy mu zwiędną.

I jak żyć w tym brutalnym świecie A11Y? Na spokojnie!

<p>
  <span aria-hidden="true">
    ana<span>kon</span>da
  </span>
  <span class="sr-only">anakonda</span>
</p>

Nasze nieszczęsne wyrażenie ana<span>kon</span>da wrzucamy do kolejnego tagu <span>, koniecznie z atrybutem aria-hidden="true"! Dzięki temu czytniki będą je ignorowały.

Tuż poniżej wstawiamy magiczny (kolejny…) <span>, powiedzmy z klasą sr-only. Chcemy, aby ten element był odczytywany przez czytniki, jednak nie pojawiał się wizualnie na stronie. Możemy to zrobić np. za pomocą kodu CSS:

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Źródło oraz wyjaśnienie powyższego kawałka kodu znajdziecie w obszernym artykule na temat ukrywania treści na stronie z perspektywy dostępności.


Koniec na dziś. Tylko pamiętaj – od teraz, skoro już znasz problemy z dostępnością elementu <span>, masz cywilny obowiązek dbać o jego poprawną implementację!

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę