Atrybut Alt lub title dla znacznika i

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?

Możesz użyć titleatrybutu na ielemencie, 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ą titlewartość 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 titleatrybutów, ale nie jestem pewien, co robią z elementami z pustą treścią.

Wraz z postępem WAI-ARIA , podczas korzystania z ikon czcionek, prawdopodobnie powinieneś użyć kombinacji poniższych, aby poprawić dostępność:

• Prezentacja roli w celu usunięcia niejawnej natywnej semantyki roli elementu. Jest to szczególnie ważne, jeśli (ab) używasz elementu z natywną semantyczną do dostarczania ikon, tak jak to ma miejsce w twoim przykładzie przy użyciu elementu i (który zgodnie ze specyfikacją "reprezentuje zakres tekstu w alternatywnym głosie czy nastrój [...] ” ).
• Aria-label , aby zapewnić, że wartość ciągu Etykiety elementu -lub- native HTML tytuł atrybutu, jeśli jesteś OK z przeglądarką wyświetlanie podpowiedzi po najechaniu.
• Aria ukryty atrybut aby ukryć treści generowanej z wykorzystaniem technologii wspomagających (jak używasz rodzinę czcionek ikona, jest generowany znak: przed z: after). Zgodnie ze specyfikacją:

Autorzy MOGĄ, zachowując ostrożność, używać ukrytej arii w celu ukrycia widocznie renderowanych treści przed technologiami wspomagającymi tylko wtedy, gdy czynność ukrycia tych treści ma na celu poprawę doświadczenia użytkowników technologii wspomagających poprzez usunięcie zbędnych lub obcych treści. Autorzy używający ukrytej arii w celu ukrycia widocznych treści przed czytnikami ekranu MUSZĄ zapewnić, że identyczne lub równoważne znaczenie i funkcjonalność jest widoczne dla technologii wspomagających.

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 spanelementu):

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576

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>

<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ą altatrybutów, a IMGelementy tak. Jeśli potrzebujesz ALTatrybutu, użyj obrazu.

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 .