Font Awesome 4.6.0 - Accessibility

pytanie zadane 11 kwietnia 2016 w Nasze poradniki przez niezalogowany
edycja 12 kwietnia 2016

Dnia dzisiejszego, 11 kwietnia 2016, Dave Grandy, wraz z zespołem Font Awesome, wypuszczają FA 4.6.0. Ktoś zapyta, a co mnie obchodzą jakieś nowe ikonki? Otóż - aktualizacja dotyczy... dostępności! (wreszcie)

Zalecenia FA w skrócie:

Wszystkie ikonki powinny posiadać atrybut aria-hidden o wartości true.
```

```
Ikonki, które nie są elementami dekoracyjnymi, to znaczy - mają wartość semantyczną (np. ikonka roweru na stronie X oznacza czas podróży rowerem) muszą posiadać tekst alternatywny
```

Time to destination by bike:
```
Klasa .sr-only (screen reader only) jest dostępna w Bootstrapie (.sr-only - Bootstrap), jeśli nie korzystasz z tego frameworku, trzeba się zaopatrzyć w taką klasę samemu. Na przykład .visuallyHidden (trochę więcej w temacie: a11y - How-to: Hide Content).

Ikonki, które dodatkowo są interaktywne - to znaczy, użytkownik może na nie kliknąć, wywołując jakąś akcję, powinny mieć atrybut title z opisem tej akcji.

<a href="#navigation-main">
  <i class="fa fa-bars" title="Skip to main navigation" aria-hidden="true"></i>
  <span class="sr-only">Skip to main navigation</span>
</a>

Po więcej informacji i przykładów zapraszam do nowej sekcji dokumentacji - Font Awesome - Accessibility.

Powyższe praktyki powinny być stosowane 'od zawsze', niezależnie od jakichś aktualizacji czy zestawu ikonek, jednak przy takiej okazji warto zwrócić na to uwagę.

Aaa.. no i są nowe ikonki ; )

1 odpowiedź

odpowiedź 12 kwietnia 2016 przez Comandeer Guru (604,780 p.)

Szkoda, że dopiero teraz się obudzili. Co zostało zepsute już się nie odpsuje…

Inna rzecz, że teraz Font Awesome nie jest już hot i trendy ;) Material Icons z ligaturami lub w SVG – FTW!

komentarz 12 kwietnia 2016 przez niezalogowany

Ano jest już trochę passe, aczkolwiek lokalnie to i tak nie ma większego znaczenia. Dzięki pewnemu znanemu i lubianemu kanałowi na youtubie, będziemy mieli wysyp tych ikonek przez następne kilka lat.

Idę w ciemno, że przy kolejnej ocenie kodu, jeśli na stronie wystąpi jakaś 'semantyczna ikona', nie będzie miała ona opisu...