Używam font-awesome i wyświetlam ich czcionki w ten sposób:
<i class="icon-lock"></i>
Spowoduje to wyświetlenie ładnego małego symbolu kłódki. Aby użytkownik wiedział, co to dokładnie oznacza, próbowałem dodać atrybuty, takie jak tytuł i alt, ale bezskutecznie.
Czy istnieje atrybut, którego mogę użyć dla <i>
tagu, który wykonuje to samo zadanie co alt dla obrazów i tytułu dla linków?
html
tags
font-awesome
weltschmerz
źródło
źródło
.sr-only
osobnego<span>
.Odpowiedzi:
Możesz użyć
title
atrybutu nai
elemencie, tak jak w każdym elemencie, np<i class="icon-lock" title="This symbolizes your being locked inside"></i>
To, czy to pomaga, jest trudniejszą kwestią. Przeglądarki zwykle wyświetlają
title
wartość atrybutu jako „podpowiedź” po najechaniu kursorem myszy, ale dlaczego użytkownik miałby umieścić wskaźnik myszy na tej ikonie? Takie podpowiedzi są słabej użyteczności; tak zwane podpowiedzi CSS często działają lepiej.Czytniki ekranu mogą dawać użytkownikowi opcjonalny dostęp do
title
atrybutów, ale nie jestem pewien, co robią z elementami z pustą treścią.źródło
title
jest ogólnie czytany, nawet bez treści, o ile sam element jest wybieralny<i>
znaczniki zazwyczaj nie dają się wybierać, chyba że dodasz do nich tabIndex.title
atrybut zadziała, a może nie, kto wie? " został uznany za wystarczająco dobry, by głosować za nim przez 120 osób, ilustruje pobieżny wysiłek, jaki większość twórców stron internetowych (włączając mnie, przyznaję), przykłada do obsługi czytników ekranu. Jako zawód musimy dowiedzieć się, jak rozwiązać te problemy bardziej rygorystycznie.title
wizualnie ukrytego tekstu (np..sr-only
Klasa w Bootstrapie). Zobacz dobre przykłady tutaj: fontawesome.com/how-to-use/on-the-web/other-topics/…Wraz z postępem WAI-ARIA , podczas korzystania z ikon czcionek, prawdopodobnie powinieneś użyć kombinacji poniższych, aby poprawić dostępność:
Nie znam twojego dokładnego przypadku użycia, więc pozwolę sobie skorzystać z prostszego przypadku, podając numer telefonu. W preferowanej kolejności malejącej, że użyłby:
<span aria-label="Our phone number"> <span class="icon-phone" aria-hidden="true"></span> +33 7 1234576 </span> (or any variation implying: - an `i` element with a `role` presentation attribute instead of the inner `span` element - a `title` attribute instead of an `aria-label` attribute)
<span class="icon-phone" aria-label="Our phone number">+33 7 1234576</span> (or any variation using `title` instead of `aria-label`)
<i class="icon-phone" role="presentation" aria-label="Our phone number">+33 7 1234576</i> (or any variation using `title` instead of `aria-label`)
Należy pamiętać, że atrybuty aria-label i title powinny opisywać zawartość elementu. Nie następny element rodzeństwa. Więc mam ochoty następujące rozwiązanie jest nie zgodne z specyfikacją (nawet jeśli większość narzędzi ułatwień dostępu rzeczywiście mają takie samo zachowanie zaobserwowania jak numer telefonu były faktycznie wewnątrz
span
elementu):<span class="icon-phone" title="Our phone number"></span>+33 7 1234576
źródło
Zamiast tego powinieneś użyć
<span>
lub czegoś podobnego. Możesz użyćtitle=""
atrybutu, aby podać tekst po najechaniu myszą, jeśli tego właśnie szukasz. Jeśli chodzi o zapewnienie dostępu do czytników ekranu lub wartości SEO, możesz dodać następujący CSS:.icon-lock{ text-indent:-99999px; }
A następnie napisz swój znacznik w ten sposób:
<span class="icon-lock">What I want the screen reader to say</span>
źródło
<i>
nie został uznany za przestarzały w HTML 4.01.<u>
i tak<s>
było, zawsze myślę<b>
i też myślałem<i>
, zwłaszcza że oni mają<em>
i<strong>
, ale masz absolutną rację.<i>
tagi służą do oznaczania tekstu. Zmieniasz znaczenie semantyczne tego tagu na coś, co nie ma nic wspólnego z użyciem kursywy (a nawet ten tag to zły pomysł). Zamiast tego powinieneś używaćSPAN
.Elementy kursywa nie obsługują
alt
atrybutów, aIMG
elementy tak. Jeśli potrzebujeszALT
atrybutu, użyj obrazu.źródło
<i>
, więc prawdopodobnie powinieneś powiedzieć, co będzie nie tak, jeśli zrobisz to w ten sposób. Używanie czegoś (w tym przypadku<i>
) w sposób, który nie był pierwotnie zamierzony, wiąże się z ryzykiem, ale w tym przypadku ryzyko to zostało złagodzone przez fakt, że tysiące renomowanych witryn z setkami milionów użytkowników już używają font-awesome.Myślę, że rola czcionek, które zachowują się jak obrazy, powinna być zarezerwowana dla role = "img". Można tego następnie użyć z aria-label = "alt-text". Działa dzięki algorytmowi ARIA Accessible Name. Zobacz: Techniki Aria wykorzystujące rolę Img .
źródło