dwa różne zastosowania <span>: które jest najlepszym rozwiązaniem dla dostępności?

Question

Chcę zastąpić fragment tekstu obrazem (na przykład słowo "zadzwoń" z ikoną telefonu) wzdłuż jakiegoś innego tekstu na stronie internetowej. Chcę, żeby to działało dla zwykłego użytkownika, bez karania ludzi, którzy wyłączają css (lub nie mają aktywnych css) i niewidomych, którzy nie widzą obrazów [addendum]. Jakie jest lepsze rozwiązanie między tymi dwoma?

1.  <span title="call" class="s1"><span> 


2.  <span class="s1 s2">call<span> 

z:

.s1 { 
    display:inline-block; 
    background: url("call.png") no-repeat scroll 0 0 transparent; 
    width:24px; 
} 
.s2 { 
    overflow:hidden; 
    text-indent: 30px; 
} 

P.S .: nie <img> alternatywa, proszę.

Answer 1

SPAN to bardzo ogólny element i powinien być stosowany, gdy nie ma lepszego elementu znacznika dostosowanego do tego celu. W twoim przypadku A (kotwica) jest właśnie tym, czego potrzebujesz, zakładając, że twój element "call" jest czymś, co agent użytkownika powinien odróżnić od czystego tekstu. Nawet jeśli nie używasz href, to nadal jest to zakotwiczenie - wystarczy powiązać je ze zdarzeniem myszy za pomocą JavaScript.

Również za pomocą obrazów tła tutaj jest niewłaściwie. Obrazy tła są przeznaczone dla środowisk. W rzeczywistości, agenci użytkownika nie powinni nawet kliknąć tych elementów jako części aktywnego interfejsu użytkownika (tylko jako bardzo drugorzędna interakcja). Jeśli jest to przycisk "Zadzwoń", którego szukasz, użyj zamiast tego właściwości CSS content. Masz jednak rację co do img - dotyczy to zdjęć, które zawierają treść strony, a nie nawigację. To znaczy. przyciski, kotwice i tym podobne nie powinny używać znacznika img. Możesz także użyć input lub button, w zależności od kontekstu (nie można powiedzieć z Twojego pytania).

Jeśli naprawdę chcesz, aby Twoje strony dostępne, jesteś na dobrej drodze, ale naprawdę myślę, że po to lepsza alternatywa:

<a class="s1" title="Call the following number">Call</a> 

.s1 
{ 
    content: url(call.png); 
} 

można regulować rozmiaru kotwicy oznaczony z klasą s1 przy użyciu CSS width i height. Zamiast tego użyłbym jednak SVG. Jeśli twoja grafika jest wektorem, jest zdecydowanie lepszym pomysłem. Piksele są na zdjęciach i pixel-art :-)

Jeśli chcesz dodać jakiś tekst po elemencie, można użyć CSS :after:

.s1:after 
{ 
    content: "Call"; 
} 

Answer 2

Pomiędzy dwoma podanymi alternatywami, 2 jest ewidentnie właściwą odpowiedzią, tj. Jest wyraźnie mniej szkodliwe dla dostępności. Gdy CSS jest wyłączony, element redukuje się do słowa "call", podczas gdy wariant 1 redukuje do pustego łańcucha. Nie ma gwarancji, że niektóre oprogramowanie może ogłosić wartość atrybutu title. Rozważmy na przykład użycie normalnej przeglądarki graficznej w trybie czysto wizualnym, bez czytnika ekranu (np. Z ustawieniami, które zastępują stronę CSS i wymuszają wystarczająco dużą czcionkę odpowiednią dla użytkownika).

Nawet alternatywa 2 jest zła pod względem dostępności. Gdy CSS jest włączone, słowo "połączenie" zostaje zastąpione przez ikonę. Ale nie ma żadnej gwarancji, że użytkownik może w ogóle to zobaczyć. I nie ma sposobu, aby określić tekst tła dla obrazu tła, tak jak można zrobić dla obrazów treści. Ponadto, co byś użył jako ikony telefonu? Większość takich ikon jest w starym stylu, takich jak ☎ lub ✆, i jest coraz więcej osób, które nigdy nie używały takiego urządzenia.