W tym artykule dokonamy przeglądu niektórych użytecznych narzędzi, wymogów i zaleceń, które są odpowiednie, aby mieć z tyłu umysłu w powszechnym projektowaniu treści sieci.
Artykuł ten będzie badał następujące obszary:
- Współczynnik kontrastu
- Wysokość, akapit i odstępy
- Użycie etykiet na formularzach i wejściowych
- Alternatywny tekst dla obrazów i elementów nietekstowych
- Wymiary i funkcja połączenia
- Uruchom analizę dostępu przy użyciu Axe
- Spróbuj czytać tekst - do lepszego zrozumienia
- Unikać błędów i uchybień w kodzie walidacyjnym
Otwór kontrastud
Jeśli chodzi o projektowanie, łatwo jest narysować nowe, jak wydaje się miłe i czyste. Często zapominamy jednak, że jest część, która ma wyzwania z niskimi kontrastami. Niezdolność do prawidłowego odczytu i zrozumienia treści, jeśli kontrast jest zbyt niski, jest trudna dla osób z czytaniem i pisania wyzwań. Dotyczy to zazwyczaj takich elementów, jak tytuły, akapity i przyciski. Dlatego też ważne jest zapewnienie odpowiedniego kontrastu kolorów tła i początkowych. WCAG 2.0 wymaga osiągnięcia stosunku kontrastu od 4,5:1 do 4,5:1.
Przykłady relacji kontrastowych w pracy z tytułami i akapitami.
Sprawdź kontrast z Narzędzie programistyczne do programisterów Chrome Google
Użyj wbudowanego narzędzia programisty Google Chrome, aby zobaczyć kontrast między kolorem tła a pierwszymi. Otwórz w oknach CTRL + Shift + C lub na Mac z CMD + opcja + C i wybrać element, który chcesz dokładniej sprawdzić.
Sprawdź kontrast z plikiem Stark dla Adobe XD
Silny jest rozszerzeniem do Adobe XD, które pozwala na sprawdzenie kontrastów i wykonanie analiz zaślepioności koloru. LSilny do Adobe XD
Wysokość, akapit i odstępy
Dla osób, które noszą słabe widzenie i dysleksję, tekst na stronie może stwarzać wyzwania. Dlatego ważne jest, abyśmy dopilnowali, aby mamy dobry tytuł i akapit. Według zbliżającego się WCAG 2.1 zaleca się, aby mieć co najmniej:
- Odstępy między wierszami do co najmniej 1,5 razy rozmiar czcionki
- Odległość od akapitu do co najmniej 2 razy rozmiar czcionki
- Minimalna odległość w blokach tekstu wynosi 0,12 razy rozmiar czcionki
- Minimalna odstęp między słowami wynosi 0,16 razy rozmiar czcionki
Użycie etykiet na formularzach i wejściowych
Osoby z upośledzonym widzeniem i osoby z problemami czytania i pisania mogą używać narzędzi do czytania tekstu, aby usłyszeć i poruszać się po treści. Zwłaszcza jeśli chodzi o formy. Ważne jest zatem, aby formularze używały etykiet pola wejściowego, tak aby narzędzie tekst-do-czytania prawidłowo postrzegało pola.
W procesie form, możemy używać etykiety (znaki). Etykiety przyczyniają się do prawidłowego postrzegania przez narzędzie pól wejściowych, a pole jest identyfikowalne i znaczące.
W formie można użyć znacznika HTML: < label> dla narzędzia, aby prawidłowo odczuć pole. Alternatywny tekst dla obrazów i elementów nietekstowych
Dla narzędzia do postrzegania obrazów, figur i ilustracji oraz innych elementów nietekstowych, wymagany jest alternatywny opis tego elementu.
Obrazy muszą zawierać alternatywny podpis opis zawierający zawartość. Dotyczy to wszystkich elementów z wyjątkiem obrazów lub liczb do celów dekoracyjnych, w którym alternatywny tekst jest pusty.
Przykład obraz z alternatywnym obrazem tekstu i dekoracyjnym bez alternatywnego tekstu.
Wymiary i funkcja połączenia
Zaleca się, aby link był opisowy zgodnie z treścią strony docelowej odnośnika. Na przykład, rozwinęliśmy wykaz zasad wprowadzania do obrotuCo daje lepsze zrozumienie marketingu. Połączenie to musi być również postrzegane jako związek z kontekstem, tak aby nie powodowało zamieszania w kwestii istnienia związku lub na przykład tekstu. Aby to wyjaśnić, wiersz można użyć poniżej odnośnika. W dokumencie CSS można dodać dekorację tekstu: podlinię; na znaczniku kotwicy.
Uruchom analizę dostępu przy użyciu Axe
Axe pozwala na wykonanie analizy dostępności stron i pomaga w wykrywaniu błędów w projektowaniu. Pobierz Axe dla Google Chrome
Spróbuj czytać tekst - do lepszego zrozumienia
Narzędzie do czytania tekstu może zapewnić głębsze wgląd w to, jak strona internetowa jest rzeczywiście doświadczana przez osoby zaślepione, ograniczone widzenie, dysleksje i inne wyzwania poznawcze.
Pobierz Chrome Vox dla Google Chrome Więcej informacji o dostępności Mac OS
Unikać błędów i uchybień w kodzie walidacyjnym
Kod zawierający błędy w witrynie może powodować, że narzędzia dostępności i użytkownicy ze specjalnymi narzędziami nie mogą poruszać się po stronie lub jej prawidłowo postrzegać. Dlatego ważne jest, aby walidować kod na stronie internetowej i upewnić się, że korygujemy potencjalne błędy, które narzędzie walidacji znajduje.
Przejdź do walidatora HTML W3C Przejdź do walidatora CSS W3C
Źródła: Co mówi instrukcja? – Dyrekcja ds. Zarządzania i TIK WCAG 2.0-stander – Dyrekcja Zarządzania i TIK Rozwiązanie internetowe – Dyrekcja Zarządzania i TIK Dyrektywa internetowa i WCAG 2.1 – Dyrekcja Zarządzania i TIK Wytyczne dotyczące dostępności stron internetowych (WCAG) Przegląd – W3C