Dostosowanie stron do różnych rozmiarów ekranu to tylko jeden ze sposobów, dzięki którym witryna będzie dostępna dla jak największej liczby osób. Weź pod uwagę także inne czynniki.
Zaburzenie rozpoznawania barw
Różne osoby inaczej postrzegają kolor. Osoby z protanopią nie postrzegają czerwonego jako charakterystycznego koloru. W przypadku deuteranopii zieleń nie ma. Dla osób z tritanopią jest kolor niebieski.
Niektóre narzędzia mogą dać Ci ogólne pojęcie o tym, jak Twoje schematy kolorów wyglądają u osób z różnymi zaburzeniami rozpoznawania barw.
Karta Ułatwienia dostępu w przeglądarce Firefox zawiera menu Symuluj z listą opcji.
W Narzędziach deweloperskich w Chrome karta renderowania pozwala emulować problemy z widzeniem.
Są to narzędzia właściwe dla danej przeglądarki. Możesz też emulować różne typy obrazów na poziomie systemu operacyjnego.
Na komputerze Mac otwórz:
- Preferencje systemowe
- Ułatwienia dostępu
- Reklamy displayowe
- Filtry kolorów
- Włącz filtry kolorów
Wybierz jedną z opcji.
Ogólnie rzecz biorąc, nie jest dobrym pomysłem rozróżnienie poszczególnych elementów wyłącznie na podstawie koloru. Możesz na przykład ustawić linki w innym kolorze niż otaczający tekst. Warto jednak zastosować też inny wskaźnik stylu, np. podkreślenie linków lub pogrubienie.
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 nie jest wystarczający, tekst staje się trudny do odczytania. Słaby kontrast kolorów to jeden z najczęstszych problemów z ułatwieniami dostępu w internecie, ale na szczęście można go wychwycić na wczesnym etapie projektu.
Oto kilka narzędzi, za pomocą których możesz sprawdzić współczynnik kontrastu kolorów tekstu i tła:
- tota11y to skryptozakładka, który możesz dodać do paska narzędzi przeglądarki.
- VisBug to rozszerzenie przeglądarki dostępne dla wszystkich popularnych przeglądarek komputerowych.
- Inspektor ułatwień dostępu w Firefoksie może sprawdzić, czy nie występują problemy z kontrastem wizualnym.
- Możesz też wykryć i poprawić tekst o niskim kontraście za pomocą Narzędzi deweloperskich w Chrome.
- W przeglądarce Microsoft Edge możesz przetestować kontrast kolorów tekstu za pomocą selektora kolorów.
Dobrze jest zadeklarować jednocześnie atrybuty color i background-color w swojej usłudze porównywania cen. Nie zakładaj, że kolor tła będzie kolorem domyślnym w przeglądarce. Użytkownicy mogą zmieniać kolory używane przez przeglądarkę i zmieniać je.
body {
color: black;
}
body {
color: black;
background-color: white;
}
Wysoki kontrast
Niektórzy ustawili w swoich systemach operacyjnych tryb wysokiego kontrastu. Możesz wypróbować tę funkcję w swoim systemie operacyjnym.
Na komputerze Mac otwórz:
- Preferencje systemowe
- Ułatwienia dostępu
- Reklamy displayowe
Wybierz opcję zwiększania kontrastu.
Dostępna jest funkcja multimediów, która wykrywa, czy ktoś włączył tryb wysokiego kontrastu. Do funkcji multimediów prefers-contrast możesz wysyłać zapytania o 3 wartości: no-preference, less i more. Na podstawie tych informacji możesz dostosować paletę kolorów witryny.
Użytkownicy mogą też ustawić odwrócone kolory w swoim systemie operacyjnym.
Na komputerze Mac otwórz:
- Preferencje systemowe
- Ułatwienia dostępu
- Reklamy displayowe
Wybierz opcję odwrócenia kolorów.
Upewnij się, że Twoja witryna jest nadal przydatna dla osób przeglądających w odwróconych kolorach. Uważaj na cienie ramki, ponieważ w przypadku odwrócenia kolorów mogą one wymagać korekty.
rozmiar czcionki;
Użytkownicy mogą dostosować kolor nie tylko w przeglądarce, ale także dostosować domyślny rozmiar czcionki. Wraz z pogorszeniem wzroku mogą zmieniać domyślny rozmiar czcionki w przeglądarkach lub systemach operacyjnych, zwiększając przy tym liczbę z upływem lat.
Możesz dostosować te ustawienia, używając względnych rozmiarów czcionek. Unikaj używania takich jednostek jak px. Użyj 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ż zrobić to podczas przeglądania strony internetowej, powiększając ją. Czy Twoja witryna będzie nadal działać, jeśli domyślny rozmiar czcionki zostanie zwiększony o 200%? A może 400%?
Użytkownik odwiedzający Twoją witrynę na komputerze, którego rozmiar czcionki sięgnie 400%, powinien uzyskać taki sam układ jak użytkownik odwiedzający Twoją witrynę na urządzeniu z małym ekranem.
Nawigacja przy użyciu klawiatury
Nie każdy użytkownik porusza się po stronach internetowych za pomocą myszy lub trackpada. Innym sposobem poruszania się po stronie jest klawiatura, a szczególnie przydatny jest klawisz tab. Użytkownicy mogą szybko przechodzić od jednego linku lub pola formularza do kolejnego.
Linki z pseudoklasami :hover i :focus wyświetlają te style niezależnie od tego, czy ktoś używa myszy, trackpada czy klawiatury. Użyj pseudoklasy :focus-visible, aby dostosować styl linków do potrzeb nawigacji z użyciem klawiatury. Dzięki temu te style mogą być jeszcze bardziej zauważalne.
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
Gdy użytkownik kliknie link do linku lub pola formularza do pola formularza, elementy te zostaną zaznaczone w kolejności, w jakiej wyświetlają się w strukturze dokumentu. Powinna też odpowiadać kolejności wizualnej.
Uważaj na właściwość CSS order. Możesz użyć tej funkcji w połączeniu z funkcją Flexbox i siatką, aby umieszczać elementy w różnej kolejności wizualnej w kodzie HTML. To zaawansowana funkcja, która może wprowadzać w błąd użytkowników korzystających z klawiatury.
Przetestuj strony internetowe za pomocą klawisza tab na klawiaturze, aby upewnić się, że kolejność znaków tabulacji jest prawidłowa.
W panelu Ułatwienia dostępu w narzędziach dla programistów przeglądarki Firefox dostępna jest opcja Pokaż kolejność kart. Włączenie tej opcji spowoduje nakładanie liczb na każdy element, który można zaznaczyć.
Ograniczony ruch
Animacja i ruch to świetne sposoby na ożywienie projektów internetowych. U niektórych jednak takie ruchy mogą być bardzo dezorientujące, a nawet powodować mdłości.
Widoczne jest zapytanie dotyczące funkcji, które informuje, czy użytkownik woli mniej ruchu. Nazywa się prefers-reduced-motion. Umieść go w każdym miejscu, w którym 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 służy do poruszania się po ekranie. Jeśli używasz przejść w kolorze elementu, na który nie powinien mieć wpływ atrybut prefers-reduced-motion. Możesz też używać przejścia z przezroczystością i przenikaniem. Mniejszy ruch nie musi oznaczać braku animacji.
Głos
Ludzie inaczej doświadczają sieci. Nie wszyscy użytkownicy widzą Twoją witrynę na ekranie. Technologie wspomagające osoby z niepełnosprawnością, takie jak czytniki ekranu, przekształcają informacje generowane na ekranie w zamieniane na nie słowa.
Czytniki ekranu współpracują z wszelkiego rodzaju aplikacjami, w tym z przeglądarkami internetowymi. Aby przeglądarka mogła właściwie komunikować się z czytnikiem ekranu, strona internetowa, którą przeglądasz, musi zawierać przydatne informacje semantyczne.
Wcześniej dowiedzieliśmy się, że przyciski zawierające tylko ikonę muszą zawierać atrybut, który określa ich przeznaczenie dla osób niewidzących. To tylko jeden z przykładów znaczenia silnego podstawowego kodu HTML.
Nagłówki
Rozsądnie używaj nagłówków, takich jak <h1>, <h2>, <h3> itp. Czytniki ekranu wykorzystują te nagłówki 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żyj elementów orientacyjnych, takich jak <main>, <nav>, <aside>, <header> i <footer>, aby uporządkować zawartość strony. Użytkownicy czytników ekranu mogą 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
Sprawdź, czy do każdego pola formularza jest powiązany element <label>. Możesz powiązać etykietę z polem formularza za pomocą atrybutu for w elemencie <label> oraz 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">
zdjęcia;
Zawsze dodawaj opis tekstowy zdjęć 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 czysto prezentacyjny, nadal należy dołączyć atrybut alt, ale możesz nadać mu pustą wartość.
<img src="texture.png">
<img src="texture.png" alt="">
Jake Archibald opublikował artykuł na temat pisania świetnego tekstu alt.
Linki
Staraj się umieszczać w linkach opisowy tekst. Unikaj zwrotów takich jak „kliknij tutaj” lub „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życie zrozumiałego semantycznego kodu HTML zwiększy dostępność Twoich stron internetowych dla technologii wspomagających, takich jak czytniki ekranu, a także inne urządzenia audio, np. asystenty głosowe.
niektóre widżety interfejsu, które nie mają odpowiadających im elementów HTML: karuzele, karty, akordeony itd.; Należy je tworzyć od podstaw z wykorzystaniem kombinacji kodu HTML, CSS, JavaScript i ARIA.
ARIA to skrót od Accessible Rich Internet Applications (Aplikacje Accessible Rich Internet Applications). Słownictwo pozwala na dostarczanie informacji semantycznych, gdy nie jest dostępny odpowiedni element HTML.
Jeśli chcesz utworzyć elementy interfejsu, które nie są jeszcze dostępne jako elementy HTML, zapoznaj się z ARIA.
Im bardziej zindywidualizowane funkcje są dodane za pomocą JavaScriptu, tym lepiej zrozumieć funkcję ARIA. Jeśli pozostaniesz przy natywnych elementach HTML, żadna ARIA może nie być potrzebna.
Jeśli to możliwe, przeprowadź test z pomocą rzeczywistych użytkowników czytników ekranu. Dzięki temu nie tylko lepiej zrozumiesz, jak użytkownicy korzystają z internetu, ale unikniesz też domysłów przy projektowaniu z myślą o ułatwieniach dostępu.
Testowanie z prawdziwymi ludźmi to świetny sposób na przedstawienie własnych założeń. W następnym module powiemy, jak użytkownicy korzystają z Twoich witryn. To kolejny obszar, w którym łatwo wyciągać wnioski.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ułatwieniach dostępu
Czy w kodzie CSS deweloper może zastąpić preferencje użytkownika, takie jak rozmiar czcionki?
body { font-size: 12px; }.Aby uniknąć zastąpienia ustawienia rozmiaru czcionki ustawionego przez użytkownika, należy użyć funkcji?
px.rem.Wszyscy na świecie używają myszy.
Co robi obraz z pustym atrybutem alt?