PODNIESIENIE DOSTĘPNOŚCI STRONY INTERNETOWEJ

Wynik audytu accessability z wynikiem 100 w otoczeniu różnej wielkości czerwonych serduszek.

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:
    Wiele napisów w poziomie i pionie związanych z dostępnością np. accessibility, content, understand, users, disabilities, hearing, developers, design, standards.

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ć!

Fragment strony ze słabym kontrastem. Fragment strony z poprawionym kontrastem.

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!

Kilka słów więcej o aria-label od WCAG znajdziesz tutaj.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *