Wymagania dotyczące projektowania stron internetowych w coraz większym stopniu obejmują lepszą dostępność sieci. Ale czy optymalizacja witryny pod kątem wszystkich głównych przeglądarek obsługujących wiele urządzeń nie wystarczy? Możesz łatwo mierzyć wydajność, dostępność, najlepsze praktyki i SEO swojej witryny za pomocą Google Lighthouse. Dlaczego więc dostępność ma znaczenie?

Według CDC (Centrów Kontroli i Zapobiegania Chorobom) ponad 60 milionów Amerykanów żyje z niepełnosprawnością. Postępując zgodnie z Wytycznymi dotyczącymi dostępności treści internetowych, możesz wprowadzić pewne wstępne uwagi, które przyczynią się do stworzenia dostępnej witryny internetowej. Oto wszystko, czego potrzebujesz, aby rozpocząć korzystanie z ułatwień dostępu w Internecie za pomocą HTML i CSS.

Ustrukturyzowany HTML z odpowiednią semantyką

Aby strona była atrakcyjna wizualnie, użytkownicy technologii wspomagających nie powinni się mylić. Chociaż wiele systemów zarządzania treścią, takich jak WordPress, stosuje kod HTML, Twoim obowiązkiem jest ponowne sprawdzenie i potwierdzenie, że jest on stosowany prawidłowo.

Na przykład

Czytaj więcej: Proste przykłady kodu HTML, których możesz się nauczyć w 10 minut

Semantyczny HTML jest łatwiejszy do opracowania, ponieważ wraz z nim otrzymasz dodatkowe funkcjonalności. Działa świetnie na urządzeniach mobilnych. Również, gdy przywiązujesz wagę do słów kluczowych zawartych w środku

lub tag, pomaga w SEO.

Treści strukturalne dla użytkowników czytników ekranu

Oto przykład semantycznego HTML dobry vs. zły.

Dobry semantyczny HTML
Mój nagłówek

Oto jak możesz stworzyć dostępną stronę internetową za pomocą HTML i CSS

Mój drugi nagłówek

Zły semantyczny kod HTML
Mój nagłówek

Oto jak możesz stworzyć dostępną stronę internetową za pomocą HTML i CSS

Pierwszy przypadek jest dość łatwy w nawigacji dla czytników ekranu. Odczyta nagłówek informujący o nagłówku i akapicie. Zatrzyma się na sekundę po każdym elemencie. Możesz pominąć niektóre nagłówki lub wrócić do poprzedniego za pomocą klawisza Enter/Return. Możesz również utworzyć spis treści za pomocą tagu nagłówka.

Kiedy piszesz prezentacyjny HTML zamiast semantycznego HTML (w drugim przypadku), wiersz niepotrzebnie się łamie i powoduje złe wrażenia. To tak, jakby przygotować gigantyczny blok, który jest o wiele trudniejszy do kaskadowania i manipulowania, ponieważ nie ma potencjalnych selektorów.

Język i układy dostępnej strony internetowej

Powinieneś używać precyzyjnego języka z rozszerzonymi akronimami i skrótami. Jeśli to możliwe, staraj się unikać myślników, pisząc 9-5 -> 9 do 5. Wcześniej do tworzenia układów stron używano tabel HTML. Kiedyś utrudniał poprawne odczyty ze względu na zagnieżdżone tabele, które tworzyły dość złożony układ. Oto nowoczesna struktura strony:

To jest nagłówek



Zawartość strony głównej

zawierający artykuł

Nagłówek artykułu

treść artykułu



Stopka strony internetowej

Jak widać, ten układ jest przyjazny dla czytników ekranu. Znaczniki są zrozumiałe dzięki jasnemu i zwięzłemu kodowi. Ponadto jest łatwy w utrzymaniu i wymaga mniejszej przepustowości podczas pobierania. Upewnij się, że logicznie umieściłeś kod źródłowy; to zrobi różnicę.

Ponownie rozważ kontrolki interfejsu użytkownika, tabele i tekst alternatywny

Najczęściej kontrolki interfejsu użytkownika to przyciski, kontrolki formularzy i łączy w dokumencie internetowym. Ogólna zasada jest taka, że ​​można nimi manipulować za pomocą klawiatury. Mają pewien domyślny styl (może się różnić w różnych przeglądarkach), w którym można przeskoczyć do innych opcji za pomocą klawisza Tab i nacisnąć Enter/Return, aby dojść do wniosku. Możesz zarządzać etykietami tekstowymi, dodając wyróżniające i znaczące teksty kotwic zamiast „kliknij tutaj”.

Aby utworzyć dostępne tabele, dodaj nagłówki tabeli

i określ wiersze lub kolumny za pomocą atrybutu scope. Ponadto możesz użyć lub Atrybut podsumowania, aby dać czytnikom ekranu szybki przegląd zawartości tabeli.

Tekst alternatywny przekazuje informacje kontekstowe obrazu lub filmu robotom internetowym i czytnikom ekranu. Jeśli Twój obraz służy do celów dekoracyjnych, lepiej pozostawić pusty znacznik alt. W przeciwnym razie podanie szczegółowego opisu obrazu bardzo pomaga.

W większości przypadków czytnik ekranu odczyta tekst alternatywny, nazwę pliku i atrybut tytułu (możesz go pominąć). Ponadto, jeśli nie chcesz używać tekstu alternatywnego lub chcesz dodać tę samą etykietę do wielu obrazów, oto krótka wskazówka:

Czerwony kwiat ...

Użyłeś atrybutu aria-labelledby do odwoływania się do tego identyfikatora. Pozwoli to czytnikom ekranu na użycie tekstu alternatywnego w formie tego akapitu.

Standardowy CSS dla lepszej dostępności

Stylizacja dostępnych funkcji strony oznacza, że ​​projekt powinien zachowywać się zgodnie z podstawową zawartością strony. Na przykład dla

,

, oraz

element, typowy CSS powinien mieć postać:

h1 {
rozmiar czcionki: 4rem;
}
p, li {
rozmiar czcionki: 1,5 rem;
kolor niebieski;
}

Wielkość czcionki, odstępy między literami, rodzina czcionek itp. powinny pomóc w wygodnym czytaniu. Nagłówki powinny odstawać od tekstu głównego (domyślna stylizacja też jest dobra). Dodatkowo tekst powinien mieć kontrastujący kolor z tło wybierasz za pomocą CSS.

Stylizacja tekstu, linków i etykiet

Mikrointerakcje są możliwe dzięki dostępnemu CSS. Może to być zarówno podkreślenie tekstu, jak i odpowiednie wyróżnienie linków. Możesz użyć oraz oznacz wyraźnie. Możesz dodać kropkowane podkreślenie, używając element.

Standardowy link powinien być podkreślony domyślnym kolorem: niebieskim, a poprzednio odwiedzony link domyślnym kolorem: fioletowym (możesz go dostosować).

a {
kolor: #ff0000;
}
a: aktywny {
kolor: #000000;
kolor tła: #a60000;
}
a: najechanie, a: odwiedzone, a: fokus {
kolor: #a60000;
dekoracja tekstu: brak;
}

Tak więc wraz ze zmianą wskaźnika myszy powinieneś podświetlić skupiony tekst. Kursor i kontur odgrywają ważną rolę w dostępności sieci.

Użyj CSS, aby nadać przejrzysty wygląd elementom formularza i etykietom. Ponadto zdecyduj, które stany fokusu/najechania są spójne w większości przeglądarek. Pamiętaj, że te małe wskazówki pomagają ludziom zrozumieć Twoją stronę internetową.

Kontrast kolorów i ukrywanie wartości

Dostosuj schemat kolorów witryny tak, aby kolor pierwszego planu (tekstu/obrazu) kontrastował z kolorem tła przede wszystkim dlatego, że osobom z wadami wzroku (np. ślepota barw) trudniej jest czytać treści odpowiednio. Możesz użyć Kontroler kontrastu kolorów uzyskać przyzwoitą kolorystykę zgodnie z kryteriami WCAG. Spróbuj także dodać znaki znaczników (takie jak gwiazdka) wraz z ostrzeżeniami lub warunkami (nie tylko czerwonym alertem).

Czytniki ekranu nie mają się czym martwić, dopóki kolejność kodu źródłowego nie zostanie napisana przyzwoicie. Staraj się unikać używania wyświetlania: brak lub widoczności: właściwości ukryte, ponieważ ukrywają one zawartość przed czytnikami ekranu.

Ułatw sobie zmianę stylu

Kluczową kwestią jest to, że bez względu na to, jak dobrze zaprojektujesz witrynę, użytkownicy mają różne powody, aby zmienić styl. Na przykład niektórzy mogą chcieć większego rozmiaru tekstu lub zmienić kolor tekstu i tła w celu zwiększenia czytelności. Więc twój obszar zawartości powinien być w stanie całkowicie sobie z tym poradzić.

Zawijanie: Połącz HTML i CSS

Teraz znasz już podstawy rozpoczęcia pracy z semantycznym kodem HTML i pisania rozsądnego kodu źródłowego we właściwej kolejności dla dostępnej strony internetowej. Skoncentruj się na HTML i przejdź do tworzenia dostępnego CSS, gdy już to zrobisz.

Korzystając z powyższych technik, możesz poprawić wrażenia użytkownika i służyć pięknej publiczności. Zacznij więc tworzyć strony internetowe, które są responsywne i dostępne.

Jak zrobić stronę internetową: dla początkujących

Dzisiaj przeprowadzę Cię przez proces tworzenia kompletnej strony internetowej od podstaw. Nie martw się, jeśli brzmi to trudne. Przeprowadzę Cię przez to na każdym kroku.

Czytaj dalej

O autorze

Rozwiń, aby przeczytać całą historię