Strony internetowe powinny być dostępne dla każdego. Oto, co musisz wiedzieć.

Tworzenie strony internetowej to nie tylko tworzenie strony internetowej. Ważnym aspektem rozwoju front-endu jest zapewnienie dostępności interfejsów użytkownika dla wszystkich w Internecie, w tym dla osób z niepełnosprawnością wzrokową i słuchową. Musisz napisać swój kod z myślą o tych ludziach. W jaki sposób zapewniasz osobom niedowidzącym taki sam dostęp do Twojej witryny jak osobom niewidomym? Przeczytaj ten artykuł, aby się dowiedzieć.

Dlaczego programiści powinni być zaniepokojeni dostępnością sieci?

Dostępność sieci opiera się na założeniu, że każdy powinien mieć równy dostęp do sieci, niezależnie od jakiejkolwiek niepełnosprawności. Dostępna strona internetowa ułatwia dotarcie do większej liczby odbiorców (około 16% świata cierpi na jedną lub drugą niepełnosprawność).

Dostępność cyfrowa nie powinna być opcją dla programistów. To konieczność dla każdej profesjonalnej marki. Jest to traktowane poważnie: jak poinformował

instagram viewer
Różnorodność, ktoś pozwał The Pokémon Company w 2019 roku z powodu niedostępnej strony internetowej.

Dostępność sieci Web z HTML

W HTML istnieją zasady zapewniające rozwój dostępnych stron internetowych. Ta sekcja wyjaśni niektóre z tych zasad.

Użyj elementów semantycznych

Elementy semantyczne w HTML to elementy, które mają znaczenie. W HTML5 jest około 100 elementów. Niektóre elementy, jak np I, są niesemantyczne, podczas gdy inne znaczniki HTML są semantyczne. Chociaż zaprzestanie używania tych elementów niesemantycznych może być niemożliwe, ważne jest, aby włączyć do swojej pracy jak najwięcej elementów semantycznych. Oto lista popularnych elementów semantycznych:

Rozważ ten przykład z Taaskly:

Rzut oka na powyższy obraz ujawni następujące elementy:

  • Nagłówek
  • Obraz
  • Paragraf
  • Trzy przyciski

Łatwo założyć, że twórcy wykorzystali tagi, aby rozmieścić elementy na ekranie. Po bliższym przyjrzeniu się kodom zauważysz, że zamiast tego użyli sześciu znaczników semantycznych. Uproszczony kod wygląda następująco:

<Sekcja>
<imgźródło="/bohater.png"alt="bohater">
<artykuł>
<h1>Znajdź odpowiednie produkty i usługi we właściwym czasie.h1>
<P>
 Ręcznie robione obuwie, odświeżenie fryzury, social media manager, wysyłanie sprawunków, źródło dochoduB>— nazwij to, Taaskly to zrozumiał. Znajdź każdy produkt lub usługę, której potrzebujesz już dziś, rejestrując się i korzystając z Taaskly. 
P>
<Ahref="/główny/główny">Zleć zadanieA>
<Ahref="/główne/usługi"> Znajdź usługęA>
<Ahref="/main/rynek" >Znajdź sklepA>
artykuł>
Sekcja>

We fragmencie kodu HTML można zaobserwować, co następuje:

  1. Obrazy, tekst i przyciski znajdują się wewnątrz a element.
  2. The element równo dzieli I elementy.
  3. The element trzyma, , I elementy.
  4. Przyciski są kodowane jako elementy; stąd są to linki, a nie przyciski. Zasadniczo zawsze używaj linków, aby kierować użytkownika do innej strony lub widoku, a przycisków używaj tylko wtedy, gdy chcesz, aby użytkownik wykonał akcję tylko w tym samym widoku. Widzieć Strona przycisku Angulara aby uzyskać więcej informacji na ten temat.

Użyj punktów orientacyjnych, aby zapewnić przejrzystą strukturę strony

Punkty orientacyjne to znaczniki semantyczne, które pomagają niewidomym użytkownikom poruszać się po stronie internetowej za pomocą czytników ekranu. Dzięki punktom orientacyjnym można łatwo zdefiniować różne części strony internetowej. Witryna Apple korzysta z punktów orientacyjnych.

Na powyższym obrazku przedstawiono cztery różne punkty orientacyjne. Możesz użyć Informacje o ułatwieniach dostępu rozszerzenie do wizualizacji tych punktów orientacyjnych.

Na obrazie możemy wywnioskować a na górze, A zawierający i a element. Co zauważalne, obraz pokazuje "nawigacja", "region", I „informacje o treści”. Są to tak zwane role, którym przyjrzymy się później.

Ilekroć musisz użyć wielu punktów orientacyjnych na stronie, zawsze rozróżniaj je za pomocą etykiety. Na przykład, jeśli używasz wielu elementy, jakie ma Apple, musisz je oznaczyć. Powinieneś oznaczyć je symbolem aria-label atrybut. Możesz więc napisać coś takiego:

<nawigacjaaria-label = "światowy">
<nawigacjaaria-label = "lokalna nawigacja">
<nawigacjaaria-label = „katalog jabłek”>

Korzystanie z etykiet może pomóc czytnikom ekranu przejść do dowolnej nawigacji.

Wykorzystaj atrybuty roli, nazwy i wartości

Czasami użycie elementów HTML z wbudowanymi funkcjami ułatwień dostępu może być niemożliwe. Takie przypadki mogą być jednym z tych dwóch:

  1. Nie ma natywnego elementu HTML dla tego, co chcesz osiągnąć. Na przykład, jeśli musisz użyć a ponieważ żaden inny element nie wydaje się pasować do tej roli.
  2. Nie możesz używać elementów semantycznych z powodu problemów technicznych. Jeśli używasz frameworka, który używa kiedy lepiej byłoby go użyć Twoim obowiązkiem będzie zdefiniowanie kontrolki niestandardowej.

Aby zdefiniować kontrolkę niestandardową, potrzebujesz roli, nazwy i wartości (czasami) dla swojego elementu.

Rola

Domyślnie element pełni rolę nawigacyjną, natomiast a element pełni rolę banera. Powinieneś używać tych elementów wyłącznie zgodnie z ich przeznaczeniem, aby pomóc technologiom wspomagającym zrozumieć strukturę strony internetowej. Jeśli musisz użyć jednego zamiast drugiego, powinieneś określić rolę w następujący sposób:

<nagłówekrola = "nawigacja">
<nawigacjarola = "transparent">
<dzrola = "nawigacja">

Nazwa

Nazwa to opisowy tekst lub etykieta powiązana z elementem HTML. Najłatwiejszą formą nazwy jest tekst elementu. Oto przykład:

<dzrola = "przycisk">Kliknij!dz>

W powyższym fragmencie „Kliknij!" to nazwa element. Jest również znany jako dostępna nazwa.

W przypadku elementów takich jak nawigacja, listy rozwijane itp. przypisanie nazwy jest bardziej złożone niż w poprzednim przykładzie. Jest inaczej, ponieważ te elementy zawierają w sobie elementy potomne. Aby przypisać nazwę powyższej nawigacji, użyj opcji aria-label atrybut. Spójrz na ten przykład:

<nawigacjarola = "nawigacja"aria-label = "globalna nawigacja">...nawigacja>

Należy zauważyć, że A nazwa atrybut różni się od dostępnej nazwy. Ten fragment kodu daje lepsze zrozumienie:

 atrybut nazwy 
<nawigacjarola = "nawigacja"nazwa = "globalna nawigacja">...nawigacja>
 przystępna nazwa 
<nawigacjarola = "nawigacja"aria-label = "globalna nawigacja">...nawigacja>

Widzieć Artykuł TGPi na temat dostępnych nazw aby uzyskać głębsze zrozumienie tego.

Wartość

W HTML atrybut value może dostarczać dodatkowych informacji o elemencie. Wartości dostarczają informacji o stanie komponentu dla komponentów niestandardowych, takich jak akordeony. Na przykład akordeon może być otwarty lub zamknięty.

Możesz dodać wartość swoim elementom na kilka sposobów. Ten fragment pokazuje niektóre sposoby, w jakie możesz to zrobić:

 aria-valuenow 
wartość
<wejścietyp=„pole wyboru”nazwa="produkt[]"wartość="1">

Priorytetowe traktowanie dostępności sieci dla integracyjnego doświadczenia online

Dostępność sieci wykracza poza przestrzeganie zasad; chodzi również o to, aby każdy miał równy dostęp do Twojej strony internetowej. Włączenie do kodu HTML elementów semantycznych, punktów orientacyjnych i atrybutów, takich jak rola, nazwa i wartość, może sprawić, że witryna będzie bardziej dostępna dla osób niepełnosprawnych. Nie myśl o dostępności sieci jako opcji; uważaj to za konieczność.