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>?
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ę!
