Ostatnio napisałam kilka słów o dostępności stron internetowych i pokazałam jak dzięki magicznemu F12 zrobić sobie szybki audyt. Mój wynik okazał się dla mnie niewystarczający (86) i obiecałam, że napiszę, jak to poprawić. Oto co zrobiłam 🙂
- Linki na stronie muszą mieć unikalny opis. Jeśli tego nie zapewnimy, czytniki ekranów nie będą w stanie w odpowiedni sposób odczytać wstawionego linku. Jak to wygląda w praktyce?
Moja strona stoi na WordPressie i podczas pisania posta ma możliwość przełączenia się z pisania w trybie ‚Wizualny’ na pisanie w trybie ‚Tekstowy’. Okazuje się, że w trybie wizualnym wstawione przeze mnie medium (obrazek) w trybie ‚Wizualny’ wygląda tak:
Natomiast w trybie ‚Tekstowy’ tak:
<a href=”http://basiakoziol.pl/wp-content/uploads/2019/06/accessability.jpg”>
Do takiego linku dodajmy atrybut aria-label i nasz post zdecydowanie lepiej zostanie odczytany przez czytnik ekranu. Możemy dodać np.:
<a href=”http://basiakoziol.pl/wp-content/uploads/2019/06/accessability.jpg” aria-label=”To jest link kierujący do zdjęcia, które przedstawia wiele napisów w poziomie i pionie związanych z dostępnością np. accessibility, content, understand, users, disabilities, hearing, developers, design, standards”>.
Proste, prawda?
Ten mały zabieg podniósł mój wynik do 94!
- Niektóre elementy na mojej stronie miały nieodpowiedni współczynnik kontrastu. Czas w końcu to zmienić!
Po najechaniu na element ‚POPRZEDNIE’ okazało się, że miał ustawioną przezroczystość na 0,8. Co zmianie wartości na 1 napis stał się bardziej wyraźny, dzięki czemu audyt dostępności zakończył się sukcesem i osiągnęłam wymarzoną 100!