Ułatwienia dostępu

Umożliwienie dostosowywania się stron do różnych rozmiarów ekranu to tylko jeden ze sposobów na zapewnienie dostępności witryny dla jak największej liczby osób. Weź pod uwagę te dodatkowe czynniki, o których warto pamiętać.

Ślepota barw

Różne osoby postrzegają kolory w inny sposób. Osoby z protanopią nie postrzegają czerwieni jako odrębnego koloru. W przypadku deuteranopii brakuje zielonego. W przypadku osób z tritanopią jest to kolor niebieski.

Niektóre narzędzia mogą dać Ci ogólne pojęcie o tym, jak Twoje schematy kolorów będą wyglądać dla osób z różnymi rodzajami widzenia barw.

Karta Ułatwienia dostępu w Firefoxie zawiera menu z etykietą Symuluj i listą opcji.

W Narzędziach deweloperskich w Chrome na karcie renderowania możesz emulować ślepotę barw.

Są to narzędzia specyficzne dla przeglądarki. Można też emulować różne rodzaje widzenia na poziomie systemu operacyjnego.

Na Macu otwórz:

1. Preferencje systemowe
2. Ułatwienia dostępu
3. Wyświetlacz
4. Filtry kolorów
5. Włączanie filtrów kolorów

Wybierz jedną z opcji.

Ogólnie rzecz biorąc, nie jest dobrym pomysłem poleganie wyłącznie na kolorze w rozróżnianiu różnych elementów. Możesz i powinieneś na przykład zmienić kolor linków, aby odróżniały się od otaczającego je tekstu. Warto jednak zastosować też inne wskaźniki stylu, np. podkreślenie lub pogrubienie linków.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Kontrast kolorów

Niektóre kombinacje kolorów mogą powodować problemy. Jeśli kontrast między kolorem pierwszego planu a kolorem tła jest niewystarczający, tekst staje się trudny do odczytania. Słaby kontrast kolorów to jeden z najczęstszych problemów z dostępnością w internecie, ale na szczęście można go wykryć na wczesnym etapie projektowania.

Oto kilka narzędzi, których możesz użyć do sprawdzenia współczynnika kontrastu tekstu i kolorów tła:

• VisBug to rozszerzenie przeglądarki dostępne we wszystkich popularnych przeglądarkach na komputery.
• Narzędzie Accessibility Inspector w Firefoxie może sprawdzać problemy z kontrastem wizualnym.
• Możesz też wykrywać i naprawiać tekst o niskim kontraście za pomocą Narzędzi deweloperskich w Chrome.
• W przeglądarce Microsoft Edge możesz sprawdzić kontrast koloru tekstu za pomocą selektora kolorów.

Zawsze warto deklarować color i background-color razem w arkuszu CSS. Nie zakładaj, że kolor tła będzie domyślnym kolorem przeglądarki. Użytkownicy mogą zmieniać kolory używane przez przeglądarkę.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Wysoki kontrast

Niektórzy użytkownicy ustawiają w swoich systemach operacyjnych tryb wysokiego kontrastu. Możesz to sprawdzić w swoim systemie operacyjnym.

Na Macu otwórz:

1. Preferencje systemowe
2. Ułatwienia dostępu
3. Wyświetlacz

Wybierz opcję zwiększenia kontrastu.

Istnieje funkcja multimediów, która wykrywa, czy ktoś włączył tryb wysokiego kontrastu. Zapytanie dotyczące funkcji multimedialnej prefers-contrast może zwracać 3 wartości: no-preference, less i more. Na podstawie tych informacji możesz dostosować paletę kolorów witryny.

Użytkownicy mogą też ustawić w systemie operacyjnym preferencję dotyczącą używania odwróconych kolorów.

Na Macu otwórz:

1. Preferencje systemowe
2. Ułatwienia dostępu
3. Wyświetlacz

Wybierz opcję odwrócenia kolorów.

Upewnij się, że Twoja witryna jest nadal czytelna dla osób korzystających z odwróconych kolorów. Uważaj na cienie pól – po odwróceniu kolorów mogą wymagać dostosowania.

Rozmiar czcionki

Kolor to nie jedyna rzecz, którą użytkownicy mogą dostosować w przeglądarce. Mogą też zmienić domyślny rozmiar czcionki. Wraz z pogarszaniem się wzroku mogą dostosowywać domyślny rozmiar czcionki w przeglądarkach lub systemach operacyjnych, zwiększając go z biegiem lat.

Możesz reagować na te ustawienia, używając względnych rozmiarów czcionki. Unikaj używania jednostek takich jak px. Zamiast tego używaj jednostek względnych, takich jak rem lub ch.

Spróbuj zmienić domyślny rozmiar tekstu w przeglądarce. Możesz to zrobić w ustawieniach przeglądarki. Możesz też powiększyć stronę internetową podczas jej przeglądania. Czy Twoja witryna nadal działa, jeśli domyślny rozmiar czcionki zostanie zwiększony o 200%? A może 400%?

Osoba odwiedzająca Twoją witrynę na komputerze stacjonarnym z rozmiarem czcionki zwiększonym do 400% powinna widzieć ten sam układ co osoba odwiedzająca Twoją witrynę na urządzeniu z małym ekranem.

nawigacja przy użyciu klawiatury,

Nie wszyscy używają myszy lub trackpada do poruszania się po stronach internetowych. Klawiatura to kolejny sposób poruszania się po stronie. Szczególnie przydatny jest klawisz tab. Użytkownicy mogą szybko przechodzić od jednego linku lub pola formularza do drugiego.

Linki, w których zastosowano :hover i :focus pseudoklasy, będą wyświetlać te style niezależnie od tego, czy ktoś używa myszy, trackpada czy klawiatury. Użyj :focus-visible pseudoklasy, aby dostosować styl linków tylko do nawigacji za pomocą klawiatury. Możesz sprawić, że te style będą bardziej widoczne.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

Gdy użytkownik przechodzi za pomocą klawisza Tab między linkami lub polami formularza, elementy te są zaznaczane w kolejności, w jakiej występują w strukturze dokumentu. Powinna ona być zgodna z kolejnością wizualną.

Uważaj na właściwość CSS order. Możesz używać tej właściwości w połączeniu z flexboxem i siatką, aby umieszczać elementy w innej kolejności wizualnej niż w HTML-u. To przydatna funkcja, ale może być myląca dla osób, które poruszają się po stronie za pomocą klawiatury.

Przetestuj strony internetowe, używając klawisza tab na klawiaturze, aby sprawdzić, czy kolejność tabulacji jest logiczna.

W panelu Ułatwienia dostępu w narzędziach dla programistów w przeglądarce Firefox znajduje się opcja Pokaż kolejność tabulacji. Włączenie tej opcji spowoduje nałożenie numerów na każdy element, który można zaznaczyć.

Mniej animacji

Animacje i ruch to świetne sposoby na ożywienie projektów stron internetowych. U niektórych osób te ruchy mogą jednak powodować dezorientację, a nawet nudności.

Jest to zapytanie o funkcję, które informuje, czy użytkownik woli mniej ruchu. Nazywa się prefers-reduced-motion. Dodaj go wszędzie tam, gdzie używasz przejść lub animacji CSS.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

Zapytanie o multimedia prefers-reduced-motion dotyczy konkretnie ruchu na ekranie. Jeśli używasz przejść w przypadku koloru elementu, na który nie powinna mieć wpływu funkcja prefers-reduced-motion. Możesz też zmieniać krycie i przenikać obrazy. Ograniczanie ruchu nie musi oznaczać braku animacji.

Głos

Użytkownicy korzystają z internetu na różne sposoby. Nie wszyscy użytkownicy przeglądają Twoją witrynę na ekranie. Technologie wspomagające, takie jak czytniki ekranu, przekształcają informacje wyświetlane na ekranie w mowę.

Czytniki ekranu działają z różnymi aplikacjami, w tym z przeglądarkami internetowymi. Aby przeglądarka internetowa mogła skutecznie komunikować się z czytnikiem ekranu, na stronie internetowej musi być dostępna przydatna informacja semantyczna.

Wcześniej dowiedzieliśmy się, że przyciski z samymi ikonami muszą zawierać atrybut określający ich przeznaczenie dla osób niewidomych. To tylko jeden z przykładów, który pokazuje, jak ważne jest solidne podstawowe HTML.

Nagłówki

Używaj nagłówków takich jak <h1>, <h2>, <h3> itp. w rozsądny sposób. Czytniki ekranu używają tych nagłówków do generowania konspektu dokumentu, po którym można poruszać się za pomocą skrótów klawiszowych.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Struktura

Używaj elementów orientacyjnych, takich jak <main>, <nav>, <aside>, <header> i <footer>, aby uporządkować zawartość strony. Użytkownicy czytników ekranu mogą wtedy przejść bezpośrednio do tych punktów orientacyjnych.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Formularze

Upewnij się, że każde pole formularza ma powiązany element <label>. Możesz powiązać etykietę z polem formularza za pomocą atrybutu for w elemencie <label> i odpowiedniego atrybutu id w polu formularza.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Obrazy

Zawsze podawaj tekstowy opis obrazów za pomocą atrybutu alt.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Jeśli obraz ma charakter wyłącznie prezentacyjny, nadal musisz uwzględnić atrybut alt, ale możesz mu przypisać pustą wartość.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald opublikował artykuł o tworzeniu świetnych alttekstów.

Linki

Staraj się umieszczać w linkach tekst opisowy. Unikaj wyrażeń takich jak „kliknij tutaj” czy „więcej”.

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

Używanie sensownego kodu HTML semantycznego zwiększy dostępność stron internetowych dla technologii wspomagających, takich jak czytniki ekranu, a także dla innych wyjść audio, np. asystentów głosowych.

Niektóre widżety interfejsu, które nie mają odpowiedniego elementu HTML, np. karuzele, karty i akordeony. Muszą być one tworzone od podstaw przy użyciu kombinacji języków HTML, CSS i JavaScript oraz atrybutów ARIA.

ARIA to skrót od Accessible Rich Internet Applications. Jego słownictwo umożliwia podawanie informacji semantycznych, gdy nie ma odpowiedniego elementu HTML.

Jeśli musisz utworzyć elementy interfejsu, które nie są jeszcze dostępne jako elementy HTML, zapoznaj się z ARIA.

Im więcej niestandardowych funkcji dodasz za pomocą JavaScriptu, tym lepiej musisz rozumieć ARIA. Jeśli używasz standardowych elementów HTML, możesz nie potrzebować ARIA.

Jeśli to możliwe, przeprowadź testy z udziałem prawdziwych użytkowników czytników ekranu. Dzięki temu nie tylko lepiej zrozumiesz, jak poruszają się po internecie, ale też unikniesz zgadywania, jak projektować z myślą o dostępności.

Testowanie z udziałem prawdziwych użytkowników to świetny sposób na ujawnienie wszelkich założeń, które możesz przyjmować. Z następnego modułu dowiesz się, w jaki sposób użytkownicy wchodzą w interakcję z Twoimi witrynami. To kolejny obszar, w którym łatwo o błędne założenia.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ułatwieniach dostępu