Atrybut Alt lub title dla znacznika i

83

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?

weltschmerz
źródło
1
Wiele witryn FontAwesome również korzysta z Bootstrap. Jeśli tak, użyj .sr-onlyosobnego <span>.
rybo111
Dobry przykład z wizualnie ukrytym tekstem wewnętrznym: fontawesome.com/how-to-use/on-the-web/other-topics/ ...
Hrvoje Golcic

Odpowiedzi:

154

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ą.

Jukka K. Korpela
źródło
1
titlejest ogólnie czytany, nawet bez treści, o ile sam element jest wybieralny
Mike
zwróć uwagę, że <i>znaczniki zazwyczaj nie dają się wybierać, chyba że dodasz do nich tabIndex.
dandavis
dodałem tytuł w mojej ikonie fa <i class = "fa fa-info-circle" aria-hidden = "true" title = "heeeeeelp"> </i>, ale nie działa
GomuGomuNoRocket
4
Powinno nas niepokoić, że zostało to zaakceptowane i bardzo pozytywne, skoro jest to po prostu szalona spekulacja ze strony Jukki. Nie mówię, że Jukka się mylił, pisząc to, albo że obecność tej odpowiedzi szkodzi, ale myślę, że odpowiedź, która sprowadza się do „Ech, może titleatrybut 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.
Mark Amery,
3
Niezbyt dobra praktyka z punktu widzenia dostępności . Nie wszystkie czytniki ekranu odczytują atrybut title, jeśli element hosta nie jest natywnie aktywny (np. Przycisk, kotwica). Zalecane jest dodanie oprócz titlewizualnie ukrytego tekstu (np. .sr-onlyKlasa w Bootstrapie). Zobacz dobre przykłady tutaj: fontawesome.com/how-to-use/on-the-web/other-topics/…
Hrvoje Golcic
13

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
Sylvain Leroux
źródło
7

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>
Chris Sobolewski
źródło
<i>nie został uznany za przestarzały w HTML 4.01.
Jim
2
Masz rację ... biorąc pod uwagę to <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ę.
Chris Sobolewski
3

<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.

Diodeus - James MacFarlane
źródło
Instrukcje font-awesome zalecają użycie <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.
cesoid,
2

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 .

NoseToThePage
źródło