Chcesz więc stworzyć dostępną witrynę WordPress? Gratulacje – Twoja strona będzie dostępna dla jak najszerszego grona odbiorców!
Nie wiesz, dlaczego dostępność jest cenna? Dostępne witryny mają korzyści, w tym szybszą prędkość ładowania, lepsze SEO i dobre dla PR. Ponadto stworzenie dostępnej strony jest właściwą rzeczą do zrobienia.
15% ludności na całym świecie ma niepełnosprawność. Tak więc myślenie o dostępności to nie tylko odpowiedzialność webmastera. Każdy, od właścicieli witryn po cyfrowych kierowników projektów, projektantów, redaktorów, autorów treści i wszystkich innych zaangażowanych w witrynę, powinien pomyśleć o dostępności sieci.
Niektóre typowe problemy, które należy rozwiązać podczas tworzenia dostępnej strony internetowej, to tworzenie przyjaznego dla ekranu tekstu, w tym odpowiedniego tekstu alternatywnego dla obrazów, zapewnienie optymalnego kontrastu kolorów, dodawanie podpisów do filmów i upewnienie się, że witryna jest nawigowana za pomocą klawiatury.
Jak czytasz dalej, pamiętaj, że dostępność WordPress to coś więcej niż zgodność, a poniższe wskazówki pomogą Ci upewnić się, że jesteś na dobrej drodze.
Dostępność Strony Internetowej
“Dostępność cyfrowa jest prawem cywilnym i prawem człowieka osób niepełnosprawnych na całym świecie.”
Lainey Feingold, prawniczka i autorka
Każdego dnia coraz więcej z nas jest zmuszanych do pracy, zakupów, korzystania z usług i szukania informacji w Internecie.
Jednak znaczny odsetek populacji ma niepełnosprawność (np. utrata kończyn, zaburzenia widzenia itp.nie mają komputerów, tylko telefony komórkowe lub odwrotnie) lub inne bariery, które mogą utrudniać dostęp, nawigację lub czytanie treści w witrynie.
W rzeczywistości ponad miliard ludzi na całym świecie jest dotkniętych niepełnosprawnością. Tam, gdzie większość z nas bierze za pewnik fakt, że możemy otworzyć nasze laptopy lub wyciągnąć nasze smartfony i cieszyć się nieograniczonym dostępem do informacji, komunikacji, handlu i rozrywki, osoby niepełnosprawne w cyfrowym świecie doświadczają wielu wyzwań, ograniczeń i barier.
Nawet w trakcie pisania tego przewodnika, znaczna część cyfrowego świata nadal nie zdaje sobie sprawy z problemów z dostępnością.
Czy wiesz na przykład, że niedawno obchodziliśmy dziesiąty doroczny Światowy Dzień Wiedzy o dostępności?
Lub że każdego roku inicjatywa WebAIM w Center for Persons with Disabilities na Utah State University przeprowadza ocenę stron głównych dla najlepszych 1 milionów stron internetowych i że zgodnie z ich raportem 2021 WebAIM Million, 97% tych stron miało awarie wytycznych dotyczących dostępności treści internetowych, ze średnią błędami 51.4 na stronie?
Prawa człowieka istnieją po to, aby chronić ludzką różnorodność w środowisku cyfrowym. W tym właśnie przypadku w grę wchodzi zgodność sieci z przepisami, standardami i wytycznymi dotyczącymi dostępności.
Na przykład:
Zgodność WCAG – Web Content Accessibility Guidelines (WCAG) 2.0, Level AA zapewnia społeczności niepełnosprawnej najbardziej powszechnie akceptowane wymagania techniczne dotyczące dostępności stron internetowych i doświadczenia bez barier.
Zgodność z ADA – Ustawa o Amerykanach niepełnosprawnych (Ada) zakazuje dyskryminacji niepełnosprawnych amerykańskich osób. Chociaż jest on skierowany przede wszystkim do przedsiębiorstw publicznych i brakuje jasnych wytycznych dotyczących dostępności, Tytuł III ADA wymaga, aby miejsca z obiektami użyteczności publicznej i obiektami komercyjnymi były dostępne dla osób z niepełnosprawności, w tym aplikacji internetowych i mobilnych.
Czy moja strona internetowa musi być zgodna z WCAG / ADA?
“Pozwy o dostępność witryny i zagrożone roszczenia stały się wielkim biznesem…więcej firm prawniczych składa pozwy lub wysyła listy żądające, że osoby niepełnosprawne nie mają dostępu do towarów i usług firmy z powodu niedostępnych stron internetowych niż kiedykolwiek.”
Źródło: Dostępność.prace
Jednym słowem … tak!
Chociaż specyficzne standardy dla zgodności WCAG i ADA są nieco niejasne, wszystkie strony internetowe powinny być zgodne z WCAG na jednym lub więcej z trzech poziomów zgodności WCAG (początkujący, średniozaawansowany lub zaawansowany).
Wytyczne WCAG sugerują, jak pomóc niepełnosprawnym użytkownikom w nawigacji i znajdowaniu treści w witrynie, na przykład za pomocą czytników ekranu.
Czy wszystkie strony internetowe muszą być zgodne z ADA?
To jest miejsce, gdzie rzeczy mogą być trochę trudne.
Strony internetowe władz lokalnych i państwowych muszą być dostępne zgodnie z tytułem II ADA i sekcją 508 ustawy o rehabilitacji. Ponieważ ustawa o Amerykanach niepełnosprawnych (Ada) Tytuł III dotyczy przedsiębiorstw publicznych i nie dotyczy stron internetowych, jednak technicznie może się zdarzyć (i nie), że pozwy cywilne ADA mogą być wnoszone przeciwko firmom z niedostępnymi stronami internetowymi, a sądy muszą zdecydować, czy nakazać firmie udostępnienie swoich stron internetowych.
Decyzja ta może się różnić w zależności od miejsca złożenia pozwu i tego, czy strona internetowa:
- Jest uważana za “zakwaterowanie publiczne” (jeśli tak, Strona internetowa musi być dostępna), oraz
- Należy do firmy, która ma również fizyczną lokalizację, która służy społeczeństwu.
Powodem, dla którego zgodność z ADA jest tak szara, jest tak szara, jeśli chodzi o publiczne strony internetowe, jest to, że strony internetowe nie były tak powszechnie używane w 1990 r., kiedy ADA została stworzona, jak są one dzisiaj, więc prawodawstwo ich nie dotyczy.
Chociaż ustawa była aktualizowana przez lata, jej język nadal nie odnosi się konkretnie do dostępności stron internetowych. Stąd niepewność co do tego, czy wszystkie strony internetowe muszą być zgodne z ADA, czy nie.
Konsekwencje braku zgodności z siecią Dla dostępności
Zgodność z ADA i WCAG może kosztować od setek do dziesiątek tysięcy dolarów.
Nieprzestrzeganie przepisów i regulacji dotyczących dostępności może jednak kosztować cię więcej … od dziesiątek do setek tysięcy dolarów.
WCAG jest de facto międzynarodowym standardem, który Sect 508 of the Disabilities Act I American Disabilities Act obowiązują w USA.
Brak zgodności ze stroną ADA stał się jednak główną odpowiedzialnością dla właścicieli witryn w ostatnich latach, o czym świadczy zwiększona liczba pozwów ADA dotyczących urządzeń mobilnych i stron internetowych.
Osoby niepełnosprawne pozywają nie tylko duże firmy, takie jak Domino ‘ s, Bed, Bath & Beyond, Home Depot, Estee Lauder i dziesiątki innych za posiadanie niedostępnych stron internetowych, wiele z nich wnosi również sprawy przeciwko właścicielom witryn za naruszenie ADA.
Podsumowując: jeśli Twoja witryna świadczy usługi lub sprzedaje produkty ogółowi społeczeństwa, możesz naruszyć ADA, więc upewnij się, że uczysz się i robisz wszystko, aby Twoja witryna WordPress była dostępna.
Zobacz sekcję Zasoby poniżej, aby uzyskać dodatkowe informacje na temat WCAG, ADA, dostępności sieci, zgodności ze standardami sieciowymi i innych powiązanych tematów.
WordPress i dostępność
Ten przewodnik dla programistów witryn internetowych obejmuje wiele ważnych punktów na temat udostępniania witryny WordPress, w tym najlepsze wtyczki i motywy ułatwień dostępu WordPress. Zalecamy również przeczytanie naszego artykułu na temat tego, jak komunikować znaczenie dostępności witryny dla klientów.
Zapoznaj się również z tym przewodnikiem, w jaki sposób spełnić wytyczne dotyczące dostępności treści.
Jeśli jesteś właścicielem witryny, porozmawiaj z programistą witryny o przeprowadzeniu audytu dostępności sieci.
Gotowe Do Dostępności Motywy WordPress
Doskonałym miejscem na rozpoczęcie dostępności gotowych motywów WordPress jest katalog motywów WordPress na wordpress.org.
Katalog motywów WordPress (WordPress.org) Katalog motywów WordPress zapewnia filtr funkcji, który pozwala użytkownikom przeszukiwać bazę darmowych motywów w poszukiwaniu motywów gotowych do dostępności.
Użyj filtra funkcji katalogu motywów WordPress, aby znaleźć motywy gotowe do dostępności.Wyszukiwanie motywów “Accessibility Ready” w katalogu motywów WordPress wyświetla dziesiątki dostępnych gotowych motywów. Możesz również użyć filtra funkcji, aby wyszukać motywy “gotowe do ułatwienia dostępu”posortowane według układu, funkcji lub tematu, a także udoskonalić i zawęzić wyszukiwanie za pomocą innych parametrów filtra lub wpisując słowa kluczowe w pasku wyszukiwania, takie jak “WCAG”.
Katalog motywów WordPress wyniki dla gotowych motywów WordPress.Aby motywy WordPress znalazły się w katalogu motywów z tagiem “dostępność gotowa”, motyw musi spełniać ponad tuzin wymagań dostępności określonych przez zespół recenzji motywów WordPress.
Motywy muszą spełniać wymagania dostępności katalogu motywów WordPress, aby używać tagu dostępności. Wymagane i zalecane wytyczne dotyczące dostępności obejmują nawigację za pomocą klawiatury, elementy sterujące, łącza pomijania, łącza treści, formularze, nagłówki, kontrasty, obrazy, Multimedia i tekst czytnika ekranu (omówione poniżej).
WordPress theme handbook wymagania dostępności.
Motywy, które nie spełniają kryteriów zespołu przeglądu motywów, nie są oznaczone tagiem “dostępność-ready” w katalogu motywów WordPress.
Jeśli zdecydujesz się korzystać z motywów freemium, premium lub płatnych WordPress, upewnij się, że Twój motyw ma wbudowane funkcje ułatwień dostępu. A jeśli zdecydujesz się zbudować niestandardową stronę internetową dla swojej firmy lub organizacji, najpierw skonsultuj się z programistą stron internetowych, aby upewnić się, że wszelkie problemy związane z dostępnością zostały omówione i sprawdzone przed rozpoczęciem projektu. Dobrym punktem wyjścia, jeśli budujesz własny motyw, jest motyw startowy podkreślenia, który jest zgodny ze standardami internetowymi i ma wbudowane wiele funkcji ułatwień dostępu.
Ważne jest, aby pamiętać, że podczas gdy tematy oznaczone jako dostępność-Gotowe na WordPress.org nie tylko spełniłeś zwykłe wytyczne dotyczące przeglądu tematów, ale przeszedłeś dodatkowe kontrole dostępności, takie jak te wzorowane na wytycznych dotyczących dostępności treści internetowych 2.0 (WCAG 2.0) na poziomie AA, korzystanie z dostępnego tematu nie zwalnia cię z odpowiedzialności za udostępnianie treści, nawigacji po witrynie i innych obszarów witryny.
WordPress theme Review dostępność zespołu notice.As wyróżnione przez zespół ds. przeglądu tematu w sekcji dostępności podręcznika,
“Tematy oznaczone jako gotowe do dostępności spełniają wymagane wytyczne wymienione tutaj i nie powinny być interpretowane jako spełniające żaden poziom of formalne wymogi dostępności.”
Lista Kontrolna Funkcji Dostępności Motywu WordPress
Jakie funkcje powinien mieć dobry gotowy do dostępności motyw WordPress?
Oto wszystko, co mamy do omówienia. Kliknij na link, aby przejść do tej konkretnej sekcji.
Odpowiedni tekst Alt dla obrazów
Klawiatura dostępne linki i menu
Widoczne Style Ostrości
Kontrast Kolorów
Natywny HTML dla Przycisków i linków
Pomiń Linki
Semantyczne nagłówki HTML
Tekst Czytnika Ekranu
Brak Automatycznego Odtwarzania Multimediów
Wyraźne Etykiety Formularzy
Aria przełomowe role
Czytelna Typografia
Rzeczy Niedozwolone W Tematach Dostępności
Dodatnie Wartości Tabindex
Accesskeys
Przydatne zasoby i narzędzia do testowania dostępności
Odpowiedni tekst Alt dla obrazów
Czytniki ekranu potrzebują tekstu alternatywnego, aby pomóc niedowidzącym lub Użytkownikom z trudnościami w uczeniu się zrozumieć obrazy zawarte w treści.
Wszystkie obrazy wbudowane w motyw powinny mieć tekst alternatywny. Obejmuje to polecane obrazy. Nawet jeśli kod jest obecny, aby wyświetlić atrybuty alt, jednak odpowiednio spreparowany tekst alternatywny nadal musi zostać wprowadzony dla tych obrazów.
Obrazy tła nie wymagają atrybutu alt. Czysto dekoracyjne obrazy, takie jak obrazy tła i inne treści nietekstowe, powinny być dodawane za pomocą CSS, aby technologie wspomagające mogły je zignorować.
Alt Text: Tak
Domyślny motyw WordPress zawiera wbudowane funkcje dostępności.
W motywie Twenty Nineteen, na przykład, po określeniu strony jako strony głównej witryny, WordPress automatycznie tworzy alternatywny tekst za pomocą tytułu strony.
Motyw WordPress 2019 z wyróżnionym tagiem alt obrazu highlighted.In motyw Twenty Seventeen, obraz nagłówka alt text pasuje do tytułu strony.
Wyróżniony obraz alt text jest tym, co użytkownik wprowadził.
Twenty Seventeen theme ‘ s implementation of alt text.
Jeśli nie ma tekstu alternatywnego, domyślnie jest to alt=””. Jest to całkiem sensowne, ponieważ pusty atrybut alt jest lepszy niż nieistotny tekst alt.
Aby dowiedzieć się więcej o używaniu znaczników alt dla ułatwienia dostępu, zapoznaj się z naszym obszernym przewodnikiem na temat tworzenia idealnych znaczników alt dla ułatwienia dostępu w WordPress.
Niektórzy użytkownicy upośledzeni ruchowo nie mogą używać myszy. Polegają one na klawiaturze (lub urządzeniach podobnych do klawiatury), aby poruszać się po interaktywnych funkcjach strony. Klawisz Tab służy do poruszania się po elementach. I Shift + Tab, aby wrócić.
Powinieneś być w stanie uzyskać dostęp do następujących kart poprzez stronę:
- Linki
- Menu
- Przyciski
- Pola formularza
Często w przypadku menu, pozycje menu najwyższego poziomu będą dostępne za pomocą klawiatury,ale podmenu rozwijanego nie będzie!
Przykład: Dostępne Menu Rozwijane
Delikatnie motyw implementuje rozwijane menu w przystępny sposób, ponieważ można do nich dotrzeć za pomocą klawiatury, a także myszy.
Delikatnie motyw ma dostępną klawiaturę rozwijane menu pokazujące ostrość klawiatury.
Jeśli tworzysz własny motyw, podkreślniki mają wbudowane menu rozwijane dostępne na klawiaturze lub możesz wypróbować ten samouczek: Tworzenie dostępnych menu rozwijanych.
Widoczne Style Ostrości(Wskaźniki Ostrości)
Użytkownicy klawiatury potrzebują czegoś wizualnego, aby pokazać im, gdzie są na stronie podczas przeglądania kart. Jeśli nie ma stylu ostrości, trudno im powiedzieć, z czym wchodzą w interakcję.
Spróbuj użyć ton klawiatury, aby przejść przez następną stronę internetową, którą odwiedzasz.
Możesz powiedzieć, który link jest który?
Motywy często resetują domyślny styl ostrości. Często zobaczysz to w styl.css pliki:
Niestety, ten kod zmniejsza dostępność i programiści często nie myślą o ustawieniu własnego stylu ostrości.
Styl ostrości może zawierać kolorowe tło – ale musi również spełniać wytyczne dotyczące kontrastu kolorów.
Widoczne Style Ostrości: Tak
Motyw pingwina implementuje style ostrości na różne sposoby, ale łatwo jest stwierdzić, który link jest aktualny.
Penguin accessibility ready theme pokazujący biały na niebieskim stylu ostrości klawiatury postmeta.Penguin accessibility ready theme with link keyboard focus style showing an outline.
Wystarczający Kontrast Kolorów
Osoby z wadą wzroku mogą borykać się z czytaniem tekstu na tle o niskim kontraście. Nawet czytanie na laptopie w jasnym świetle słonecznym może okazać się trudne dla kogoś bez problemów ze wzrokiem.
Zalecenie jest takie samo jak w WCAG 2.0 poziom AA: współczynnik kontrastu 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (zdefiniowanego jako 14 punktów (zazwyczaj 18,66 px) i pogrubiony lub większy, lub 18 punktów (zazwyczaj 24px) lub większy), a współczynnik kontrastu co najmniej 3:1 dla grafiki i elementów interfejsu użytkownika (takich jak granice wejściowe formularza). Poziom AAA wymaga współczynnika kontrastu co najmniej 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu.
Kontrast Kolorów: Nie
Narzędzie Wave WebAIM Web accessibility ujawnia, że motyw ZBlackbeard ma wiele obszarów o niskim kontraście kolorów.
Błędy kontrastu kolorów motywu ZBlackbeard wyróżnione na Czerwono przez narzędzie Wave WebAIM.
Natywny kod HTML dla Przycisków i linków (lub równoważne znaczniki zachowujące się tak, jak robią to natywne kontrolki)
Nieprawidłowe znaczniki uniemożliwią użytkownikom korzystanie z niestandardowych formantów. Na przykład użytkownik może nie być w stanie kliknąć lub nacisnąć niestandardowego przycisku.
Jeśli chcesz, aby przycisk zachowywał się jak przycisk, najprostszym sposobem jest użycie
Oto film na temat korzystania z elementu przycisku, aby poprawić dostęp do Internetu:
Pomiń Linki
Pomiń linki Zapisz użytkowników czytnika ekranu lub użytkowników klawiatury od konieczności przeszukiwania długich list linków wielokrotnie.
Pomijane linki mogą być niewidoczne dla widzących użytkowników poprzez CSS. Będą one widoczne tylko wtedy, gdy zakładki użytkownika na stronie lub jeśli używany jest czytnik ekranu.
Pomiń linki: tak
Twenty Sixteen wykorzystuje link” Przejdź do treści”, który pozwala użytkownikowi ominąć nawigację i przejść bezpośrednio do zawartości strony.
Twenty Sixteen theme pokazujący link Przejdź do treści.
Niektóre motywy gotowe do ułatwienia dostępu mają również łącze przejdź do paska bocznego.
Semantyczne nagłówki HTML
Dobra struktura kursu przynosi korzyści wszystkim. Widzący użytkownicy mogą łatwo zeskanować stronę, aby zobaczyć, co jest ważne. Użytkownicy czytnika ekranu mogą nawigować po poziomie nagłówka do żądanej sekcji.
Nagłówki: Tak
Motyw jak dwadzieścia siedemnaście oznacza nagłówki w logicznej kolejności, jak widać za pomocą VoiceOver.
Twenty Seventeen theme. Menu nagłówki w VoiceOver pokazuje semantyczną kolejność nagłówków.
Nagłówki: Nie
Wyświetlanie tej samej treści na innym motywie pokazuje mniej dostępną implementację.
Istnieją dwa H1 headings i brakujący poziom kursu między ‘ H1 Hello world!’and’ H3 one thought on ” Hello world.””Osoba niedowidząca może się zastanawiać, gdzie poszedł kierunek 2!
Menu nagłówków VoiceOver w motywie pokazuje zduplikowany Nagłówek 1 i brakujący Nagłówek 2.
Tekst czytnika ekranu dla linków “Czytaj więcej”
Użytkownicy czytnika ekranu patrząc na linki wyrwane z kontekstu, np. na stronie bloga z fragmentami, mogą napotkać wiele linków “Czytaj więcej”. Bez tekstu czytnika ekranu cele łącza nie będą oczywiste.
Tekst czytnika ekranu jest również cenny dla czcionek ikon, które nie mogą mieć tekstu alternatywnego.
Tekst Czytnika Ekranu: Nie
Illdy theme ma wiele linków “Czytaj więcej”. Użytkownik szybko przeglądający linki usłyszy tylko “Czytaj więcej” i nie będzie wiedział, do którego postu trafia każdy link.
Illdy theme Czytaj więcej linki nie ujawniają tytułu postu po przejściu z kartami.
Tekst Czytnika Ekranu: Tak
Motyw Splinter implementuje tekst czytnika ekranu dla jego niesamowitych ikon społecznościowych. Facebook czytnik ekranu tekst Ikony brzmi “przejdź do Facebooka”.
Splinter accessibility-ready theme pokazuje tekst czytnika ekranu dla Font Awesome icons.
Aby uzyskać szczegółowe informacje na temat wdrażania tej techniki i wymaganego CSS, przeczytaj ukrywanie tekstu dla czytników ekranu z rdzeniem WordPress.
Automatyczne odtwarzanie multimediów jest złe dla osób z zaburzeniami poznawczymi – może okazać się mylące lub niepokojące, jeśli użytkownik nie może go kontrolować. Jeśli nośnik zawiera dźwięk, dotyczy to również użytkowników czytnika ekranu. Może to zakłócać odczyt strony.
Zaleca się dołączanie elementów multimedialnych do wtyczek.
Tematy są dla prezentacja i wtyczki są dla funkcjonalność.
Wyraźne Etykiety Formularzy
Formularze bez wyraźnego etykietowania mogą być problematyczne dla użytkowników czytnika ekranu. Mogą nie być w stanie określić, jakie informacje są wymagane w każdym polu.
Tekst zastępczy w polu formularza to za mało!
Etykiety formularza: Tak
Temat Drogi Mlecznej oznacza pola tekstowe formularza i obszar tekstowy, więc nie ma wątpliwości, co do tego, co robią. Pola wymagane są wyraźnie oznaczone.
Formularz komentarza do motywu Drogi Mlecznej z czytelnymi etykietami pól formularza.
Etykiety Formularza: Nie
W motywie Inspirez użytkownik VoiceOver może usłyszeć opis pól formularza komentarza, jeśli otworzy Rotor w menu formanty.
Jednak użycie klawisza Tab w celu uzyskania dostępu do pól nie ujawnia ich przeznaczenia. Po wybraniu pola tekst zastępczy znika.
Pole Nazwa formularza komentarza motywu Inspirez. VoiceOver czyta “wymagane, edytuj tekst za pomocą menu autouzupełniania”.
Użytkownik może pomyśleć: “Co mam tu wpisać? Imię czy e-mail?” a następnie wpisz złą rzecz, z całą tą frustracją.
Aria przełomowe role
Podobnie jak w przypadku nagłówków, role Aria landmark pomagają użytkownikom czytnika ekranu nawigować do poszczególnych części strony.
Role do wykorzystania to:
- sztandar
- główna
- uzupełniające
- contentinfo
- Szukaj
- nawigacja
Aria role: tak
Motyw Some implementuje role ARIA w całej strukturze strony. Użytkownicy VoiceOver mogą przełączać się na różne obszary oznaczone rolami.
Główna rola odpowiada głównemu obszarowi treści.
VoiceOver Aria Menu orientacyjne dla jakiegoś motywu, pokazującego główną rolę.
Czytelna Typografia
Fantazyjne czcionki mogą wyglądać fajnie, ale sprawiają, że Twoja strona jest trudniejsza do odczytania dla wszystkich użytkowników. Nielsen Norman Group specifies, że Czytelność treści jest kluczowym wskaźnikiem użyteczności.
Nie jest to wymagane dla gotowego motywu dostępności, ale jest zalecane.
Wskazówki:
- Użyj czcionki o rozmiarze co najmniej 16px dla tekstu.
- Wybierz czcionki serif lub sans serif, a nie cursive lub fantasy.
- Unikaj dużych połaci tekstu pisanego wielkimi literami.
Typografia: Nie
Motyw Germaine wykorzystuje czcionkę Great Vibes do nagłówków. Jest ładna, ale ta czcionka skryptu jest mniej czytelna niż czcionka serif lub sans-serif.
Motyw Germaine z nagłówkami postów w czcionce Great Vibes.
Rzeczy, które nie powinny być w gotowym szablonie dostępności
Linki otwierające się w nowych oknach/kartach bez ostrzeżenia
Niektórzy użytkownicy będą zdezorientowani, jeśli linki otwierają się nieoczekiwanie w nowym oknie lub karcie, ponieważ nie mogą użyć przycisku Wstecz, aby powrócić do miejsca, w którym się znajdowali.
Uwaga na target=”_blank” w linkach.
Najlepiej unikać otwierania linków w nowych oknach, ale jeśli musisz, PODAJ Ostrzeżenie.
Najprostszym i najlepszym sposobem na to jest tekst. Add (otwiera się w nowym oknie) za tekstem linku.
Linki: Nie
Motyw Dream Spa ma przycisk w Personalizatorze, aby dodać slajdy do suwaka. Otwiera się w nowym oknie, ale nie ma nic, o czym użytkownik powinien wiedzieć wcześniej.
Dream Spa Theme Customizer; przycisk link otwiera się w nowym oknie.
Linki: Tak
Tiny Framework używa kombinacji ikony Font Awesome external link i tekstu czytnika ekranu, aby wskazać, że link otwiera się w nowym oknie.
Tiny Framework zewnętrzna ikona łącza z tekstem czytnika ekranu, aby wskazać, że łącze otwiera się w nowym oknie.
Dodatnie Wartości Tabindex
Wartości Tabindex 1 lub wyższe zakłócają naturalną kolejność zakładek i zakłócają oczekiwania użytkowników tylko na klawiaturze.
Adrian Roselli pokazuje, dlaczego nie powinieneś tego robić w swoim artykule: nie używaj Tabindex większego niż 0.
Accesskeys
Accesskeys są w zasadzie dobrym pomysłem, ale implementacja na stronach internetowych jest niespójna. Istnieje również problem technologii wspomagającej przy użyciu niektórych z tych samych skrótów klawiaturowych.
Zasoby:
Narzędzia:
Wniosek
Korzystanie z motywu gotowego do dostępności jest niezbędne do posiadania dostępnej strony internetowej, ale nie jest to gwarancja dostępności, ponieważ wymaga to od wszystkich zaangażowanych w witrynę i procesy, takie jak dodawanie treści do witryny, zachowania zgodności ze standardami dostępności.
Dostępność jest ostatecznie określana przez użytkownika, a nie autora tematu. Testowanie w oparciu o formalny dostępny standard, taki jak WCAG 2.0 AA, może być wykonane tylko po zakończeniu strony internetowej.
Używając analogii, można zaprojektować pięknie dostępny budynek biurowy, ale zrujnować go złym wyborem, jeśli chodzi o wyposażenie go, na przykład przy użyciu nieczytelnych oznakowań, luźnych dywanów, niewygodnych mebli, nieodpowiednich odstępów między biurkami i innych zagrożeń dla zdrowia w pracy.
Podobnie, Twoje najlepsze wysiłki, aby Twoja strona była dostępna, mogą zostać wykolejone poprzez dodanie niedostępnych treści, takich jak:
- Nie dodawanie nagłówków do artykułów
- Dodawanie linków “kliknij tutaj”
- Używanie żargonu w zdaniach
- Dodawanie automatycznego odtwarzania filmów bez kontroli
Dlatego ważne jest nie tylko zbudowanie strony internetowej gotowej do dostępności, ale także utrzymanie dostępności w centrum uwagi przez cały czas, zwłaszcza podczas tworzenia treści internetowych lub szkolenia każdego, kto ma za zadanie aktualizację the treści na twojej stronie.
Wdrażanie dostępności jest procesem ciągłym. Zacznij myśleć o dostępności raczej wcześniej niż później, a będziesz na właściwej drodze, aby zapewnić użytkownikom prawdziwie integracyjną stronę internetową.
Web Accessibility-Przydatne Referencje
Aby uzyskać dodatkowe informacje, sprawdź poniższe linki:
Nota wydawcy: Ten post został zaktualizowany pod kątem dokładności i trafności. [Pierwotnie Opublikowany: Kwiecień 2017 / Zmieniony: Luty 2022]
Tagi:
Źródło
