Dostępność cyfrowa

Od zrozumiałości treści linków i przycisków, ale również od łatwego identyfikowania tych elementów na stronie internetowej, wiele zależy. Są to bowiem naturalne łączniki z innymi treściami, podstronami czy serwisami. Problemy ze zrozumiałością i postrzeganiem tych elementów są szczególnie dotkliwe dla osób z ograniczeniami wzroku.

Linki i przyciski pełnią różne funkcje na stronach internetowych — linki prowadzą do innych podstron lub dokumentów, a przyciski wywołują akcje na danej podstronie lub w formularzu. Dzięki temu użytkownicy łatwo rozumieją, co się wydarzy po użyciu danego elementu.

Gdy przycisk wyszukiwarki został stworzony jako link (za pomocą <a>) i nie można tego zmienić, sytuację poprawić mogą role ARIA. Dzięki <a role="button"> czytnik ekranu zgłosi taki link jako przycisk. Rozwiązanie takie stosuj jednak tylko w ostateczności i z ostrożnością. Jeśli niepoprawnie użyjesz ARIA, możesz zablokować możliwość odczytu elementu przez czytnik ekranu.

Linki, szczególnie śródtekstowe (czyli te w środku zdania), muszą łatwo wyróżniać się w tekście. Jest wiele sposobów, aby wyróżniać linki. Użytkownicy najlepiej rozumieją takie, którym nadasz inny kolor, niż ma tekst i jednocześnie je podkreślisz. Ten sposób gwarantuje, że również osoby słabowidzące i niepostrzegające kolorów, będą w stanie zidentyfikować link.

Linki na stronach internetowych możesz wyróżnić w tekście samym kolorem, ale wtedy kontrast koloru linku i koloru tekstu musi wynosić co najmniej 3:1. Jednocześnie kontrast linku i kontrast tekstu do tła muszą wynieść co najmniej 4,5:1.

Użytkownicy powinni łatwo identyfikować także przyciski. Ich wygląd powinien być spójny na całej stronie internetowej. Przycisk najczęściej składa się z kształtu oraz etykiety (tekstu lub ikony). Kontrast koloru przycisku do koloru tła, na którym go umieścisz, musi wynosić co najmniej 3:1, a kolor etykiety do kolory przycisku najczęściej 4,5:1. 

Omawiamy ten temat w artykule: Kontrast kolorów.

Osoby niewidome mogą nawigować czytnikiem ekranu po linkach. Czytnik przekazuje wtedy wyłącznie treść linku bez otaczającego go tekstu. Przy tym sposobie nawigacji użytkownik niewidomy będzie miał duży problem żeby zrozumieć dokąd prowadzą linki o niejednoznacznej treści (np. więcej, tutaj, pobierz).

Ogólne zasady redagowania zrozumiałej treści linków znajdziesz w artykule: Linki i przyciski.

W przypadku przycisków, głównym problemem, który ogranicza zrozumiałość, jest brak etykiety tekstowej przycisku lub tekstu alternatywnego grafiki, która pełni rolę przycisku. Czytniki ekranu, których używają osoby niewidome, mówią w takie sytuacji jedynie: Przycisk.

Popraw zrozumiałości linków dla użytkowników czytników ekranu

Rozwiązania, które znajdziesz niżej, nie wpływają na poprawę zrozumiałości linków dla osób widzących.

Zastąp treść linku aria-label

Dodaj do linku atrybut aria-label. Czytnik ekranu odczyta wartość tego atrybutu linku jako tekst linku. Wizualnie nic się nie zmieni.

<a href="https://gov.pl/przykladowylink" aria-label="Więcej o tworzeniu zrozumiałych linków ">Czytaj więcej</a>

Połącz opis z linkiem za pomocą aria-labelledby

To rozwiązanie wykorzystaj na przykład przy prezentowaniu listy aktualności. Atrybut aria-labelledby pozwoli użyć tytułu aktualności jako treści, która uzupełnia niejasny tekst linku: czytaj więcej.

<h2 id="article1_t">Tworzenie zrozumiałych linków</h2>
<p>Krótka zajawka o czym jest mowa w artykule...</p>
<p><a id="article1_l" aria-labelledby="article1_l article1_t">Czytaj więcej</a></p>

Ukryj za pomocą CSS treść, która uzupełnia niejasny tekst linku

Dzięki kaskadowym stylom CSS możesz ukryć wizualnie treść, którą odczytają czytniki ekranu. Jedną z najpopularniejszych technik do takiego zastosowania jest tak zwany: clip.

{clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;}