Jak tworzyć dostępne witryny

CO TO JEST DOSTĘPNOŚĆ SIECI I JAK TWORZYĆ DOSTĘPNE WITRYNY INTERNETOWE?

NAJNOWSZE Wytyczne Google ( ważne / wideo )

Dostępność strony WWW

Według Światowej Organizacji Zdrowia 285 milionów ludzi ma upośledzenie wzroku, a około 15 procent światowej populacji, czyli szacunkowo 1 miliard ludzi, żyje z niepełnosprawnością.

W miarę jak strony internetowe i aplikacje mobilne stały się bogate i kreatywne, stały się mniej dostępne dla tych użytkowników.

Dostępność w projektowaniu stron internetowych oznacza tworzenie witryn internetowych i aplikacji, z których może korzystać każdy, niezależnie od sprzętu, oprogramowania lub jakichkolwiek upośledzeń sensorycznych lub fizycznych.

Jako webmaster musisz zadbać o to, aby Twoja witryna była dostępna dla osób niewidomych na kolory, które nie widzą ani nie używają myszy, oraz odwiedzających, których podstawowym językiem nie jest Twój język. Osoby niepełnosprawne również używają specjalnego oprogramowania lub sprzętu wspomagającego, aby uzyskać dostęp do sieci.

JAK TWORZYĆ DOSTĘPNE STRONY INTERNETOWE 
Oto kilka najlepszych wskazówek, wtyczek i motywów do tworzenia dostępnych witryn za pomocą WordPress.

1. Wybierz WordPress jako system zarządzania treścią
Programiści WordPress bardzo poważnie traktują dostępność sieci. Zespół ds. Ułatwień dostępu WordPress ma oficjalny blog dotyczący ułatwień dostępu w WordPress .

26 czerwca członkowie zespołu ds. Dostępności WordPress przybyli na WordCamp Europe, aby uczyć twórców motywów WordPress i recenzentów procesu testowania motywów WordPress pod kątem tagu gotowego do ułatwień dostępu.

WordPress obsługuje ułatwienia dostępu i możesz znaleźć wiele wtyczek i motywów do tworzenia gotowych motywów i witryn WordPress od podstaw.

WP Accessibility to bezpłatna i aktualna wtyczka, która pomaga w rozwiązaniu wielu typowych problemów z dostępnością w motywach WordPress.

2. Motywy WordPress gotowe do ułatwienia dostępu
Tworząc motyw WordPress, poświęć więcej czasu na zwrócenie uwagi na białe lub „puste” miejsce wokół różnych elementów na stronie.

Domyślne motywy WordPress (TwentySixteen, 20 Fifteen i inne motywy) to świetne przykłady, aby dowiedzieć się, jak tworzyć dostępne motywy WordPress.

Możesz znaleźć wszystkie gotowe motywy dostępności w oficjalnym katalogu motywów WordPress, w tym TwentySixteen, Twenty Fifteen i inne motywy stworzone przez zespół WordPress.

Wybierz mądrze motyw, upewnij się, że jest gotowy do ułatwień dostępu. Jeśli jesteś programistą WordPress, skorzystaj z tej kolekcji wzorców, aby utworzyć motywy WordPress gotowe do ułatwień dostępu .

Wzorce motywów ułatwień dostępu dla WordPress pomagają tworzyć motywy WordPress gotowe do ułatwień dostępu. Kod nie ma być kompletnym motywem, ale każdy wzorzec w podkatalogach może pomóc w uczynieniu motywu bardziej dostępnym.

3. Uczyń zawartość czytelną
Bardzo ważne jest, aby stworzyć czytelną stronę. Zatłoczony tekst, długie akapity, dużo obrazów, mały rozmiar czcionki i zbyt dużo informacji sprawiają, że strona internetowa jest bardzo trudna do odczytania.

Pisząc post na blogu, staraj się, aby zdania były krótkie i proste. Staraj się unikać skrótów, chyba że najpierw je wyjaśnisz.

Nie używaj trudnych słów. Upewnij się, że czcionki są wystarczająco duże, aby były czytelne, mądrze wybieraj czcionki.

Nie używaj nagłówków do pogrubienia tekstu lub zwiększania rozmiaru czcionki. Użyj tagów , em, q, bq i list dla wizualnej hierarchii. Użyj listy uporządkowanej i nieuporządkowanej, aby treść była bardziej czytelna.

Oprogramowanie czytnika ekranu może czytać tekst na ekranie i zapewniać wiele sposobów poruszania się po stronie internetowej. Obejmują one listę połączoną z wszystkimi nagłówkami HTML strony, inną listę linków strony i jedną trzecią jej punktów orientacyjnych (role ARIA).

4. Menu nawigacji
Upewnij się, że menu nawigacji są w pełni responsywne i przyjazne dla urządzeń mobilnych. Pozycjonuj pozycje menu nawigacji w logiczny i spójny sposób. Udostępnij je za pomocą klawiatury.

Użytkownicy niepełnosprawni mogą korzystać z oprogramowania czytnika ekranu, które umożliwia osobom niewidomym i niedowidzącym czytanie tekstu wyświetlanego na ekranie komputera za pomocą syntezatora mowy lub monitora brajlowskiego.

Im lepsza struktura i semantyka strony internetowej, tym łatwiejsza w nawigacji i zrozumiała dla użytkowników, czytników ekranu i wyszukiwarek. Upewnij się, że wszystkie łącza są dostępne za pomocą samej klawiatury w logiczny sposób.

Twórz dostępne menu rozwijane dla motywów WordPress i zwiększ dostępność klawiatury dla dużych menu za pomocą funkcji Keyboard Arrow Nav, która działa z elementami podrzędnymi klas .menu i .sub-menu.

Upewnij się, że menu nawigacji są w pełni responsywne i przyjazne dla urządzeń mobilnych. Jeśli jesteś twórcą motywów WordPress, użyj tego responsywnego menu w swoim motywie.

Jeśli nie jesteś twórcą motywów, możesz zainstalować tę popularną, bezpłatną i wysoce konfigurowalną wtyczkę responsywnego menu dla WordPress, z ponad 120 konfigurowalnymi opcjami.

5. Prawidłowo używaj nagłówków, aby uporządkować strukturę treści
Nagłówek 1 Znacznik H1 jest używany do najważniejszych nagłówków na stronie internetowej. Na stronie głównej swojego bloga umieść tytuł witryny w tagu h1, a na stronie pojedynczego posta użyj tagu H1 jako tytułu posta na blogu.

Zawsze zagnieżdżaj sekcje i podsekcje strony internetowej w sekwencyjnej hierarchii h2 – h6. Użyj h2 dla podtytułów i h3, h4 dla innych ważnych nagłówków na twojej stronie.

Nie pomijaj poziomów: na przykład zawsze następuj po h2 z h3 (nagłówek podsekcji podrzędnej) lub h2 (sekcja rodzeństwa), ale nigdy poza kolejnością h4.

6. Linki i obrazy
Zawsze optymalizuj swoje obrazy na potrzeby Internetu. Użyj wtyczek do optymalizacji obrazu WordPress lub usług online, aby skompresować obrazy w celu zmniejszenia ich rozmiaru. Pomoże Ci to przyspieszyć ładowanie witryny.

Zawsze dostarczaj alternatywny tekst dla wszystkich obrazów i możesz to bardzo łatwo zrobić dzięki WordPress. Tekst ALT obrazów powinien opisywać obraz. Opisz obraz, aby osoba, która go nie widzi, zrozumiała.

Zawsze używaj tekstu opisowego dla nazw obrazów i tekstu alternatywnego. np. WordPress-Dashboard-screenshot.png jest znacznie lepszy niż screenshot.png

Nigdy nie używaj tekstu kliknij tutaj dla linków. Aby linki były dostępne, użyj odpowiedniego i opisowego tekstu, aby poprawnie je opisać. Samouczek dotyczący motywów potomnych WordPress jest opisowy i lepszy niż przeczytaj ten post na naszym blogu.

7. OSTROŻNIE UŻYWAJ KOLORU
Osoby z częściową ślepotą barw narzekały, że nie widzą słów podświetlonych na czerwono i pomarańczowo leżących na moim trawniku.
użyj-kolor-z-ostrożnością

Minimalny kontrast między tłem a pierwszym planem, tekstem i kolorami linków powinien wynosić (4,5: 1; 3,1: 1 w przypadku dużego tekstu).

Ślepota barw może dotyczyć 1 na 20 odwiedzających Twoją witrynę internetową. Możesz znaleźć listę przydatnych narzędzi do wyszukiwania i rozwiązywania problemów z kolorami w swojej witrynie. Dzięki Vischeck możesz zobaczyć, jak strony i obrazy wyglądają dla użytkowników z daltonizmem.

Obejrzyj film wideo Perspektywy dostępności w Internecie: kolory z dobrym kontrastem w serwisie YouTube.

Daltonizm i projektowanie stron internetowych to świetny artykuł na usability.gov.

8. Zaprojektuj swoje formularze pod kątem dostępności
Formularze są bardzo ważną częścią każdej witryny internetowej i służą do wielu rodzajów interakcji (rejestracja, logowanie, formularz kontaktowy itp.) W sieci.

Aby Twoje formularze były dostępne, oznacz je odpowiednio i uporządkuj wszystkie formularze w logiczny sposób. Użytkownicy niepełnosprawni mogą używać tylko klawiatury lub czytnika ekranu do nawigacji i korzystania z Internetu.

Element

Contact Form 7: Accessible Defaults Darmowa wtyczka może zastąpić domyślny formularz Contact Form 7 dostępnym odpowiednikiem i zapewnia zestaw wybieralnych formularzy podstawowych.

Pola formularzy WCAG 2.0 dla wtyczki Gravity Forms modyfikują pola formularzy i poprawiają walidację, tak aby formularze spełniały wymagania dostępności WCAG 2.0.

9. Napisy do filmów
Zdecydowanie zaleca się zapewnienie podpisów (tekstowych wersji słowa mówionego prezentowanego w multimediach) i transkrypcji nagrań audio oraz opisów wideo.

Te napisy i transkrypcje są niezbędne i pomocne dla osób, które nie słyszą, mają trudności ze zrozumieniem akcentu mówiącego lub mają trudności ze słyszeniem dźwięku.

Napisy i transkrypcje są przeznaczone głównie dla tych, którzy nie słyszą dźwięku lub nie oglądają wideo, ale okazało się, że pomagają również tym, którzy słyszą dźwięk lub oglądają treści wideo.

Ci, którzy mogą nie biegle posługiwać się językiem, w którym prezentowany jest dźwięk, ci, dla których używany język nie jest ich językiem podstawowym itp.

Udostępnianie napisów i transkrypcji poszerza grono odbiorców i umożliwia wyszukiwanie treści przez użytkowników i wyszukiwarki.

Obejrzyj film: Spraw, by technologia działała dla wszystkich: wprowadzenie cyfrowej dostępności

Dostępna biblioteka wideo to bezpłatna wtyczka WordPress do zarządzania filmami, w tym podpisami, transkrypcjami i napisami do każdego filmu.

reklama:

  • https://www.w3.org/WAI/perspective-videos/contrast/
Skip to content