Jak korzystać z ARIA w kodzie HTML witryny WordPress

Jednym z głównych celów tworzenia stron internetowych jest tworzenie angażującego doświadczenia użytkownika. Często robisz to, umieszczając interaktywne funkcje i wspaniałe elementy wizualne w swojej witrynie. Jednak te aspekty niekoniecznie są dostępne dla każdego potencjalnego odwiedzającego, zwłaszcza dla tych, którzy korzystają z czytników ekranu.

Na szczęście istnieje system, który pomoże wszystkim użytkownikom doświadczyć wyników Twojej ciężkiej pracy. Włączenie Accessible Rich Internet Applications (ARIA) do kodu HTML witryny wymaga tylko trochę dodatkowego wysiłku i może przynieść ogromne korzyści. Ten post przedstawi Ci ARIA i jak z niej korzystać. Chodźmy!

Wprowadzenie do ARIA: co to jest i dlaczego warto z niego korzystać

Krótko mówiąc, ARIA to sposób na określenie atrybutów HTML, aby czytniki ekranu mogły je dokładnie zidentyfikować, a następnie przekazać odwiedzającym. Jest to kluczowy aspekt tworzenia stron internetowych z ułatwieniami dostępu i pomaga tworzyć dokładniejsze środowisko dla użytkowników czytników ekranu.

Dzieje się tak, ponieważ włączenie ARIA do kodu HTML wpływa na sposób, w jaki przeglądarki modyfikują Twoje strony internetowe pod kątem czytników ekranu. Ta zmodyfikowana treść jest prezentowana w drzewie dostępności, a ARIA przejmuje zadanie przetłumaczenia na nią elementów HTML.

Załóżmy na przykład, że masz stronę z polem wyboru i używasz ARIA w kodzie HTML. ARIA powie czytnikowi ekranu, aby poinformował użytkownika, że ​​na stronie znajduje się pole wyboru i wskaże, czy jest zaznaczone, czy nie. Natywny HTML nie może tego zrobić samodzielnie.

Zastanów się, jak często korzystasz z sieci, nie tylko w pracy, ale w codziennym życiu. Teraz wyobraź sobie, że duża część sieci byłaby dla ciebie bezużyteczna. Miałbyś dostęp do mniejszej liczby zasobów na edukację, zatrudnienie, opiekę zdrowotną, informacje, komunikację, a nawet rozrywkę.

Stosowanie najlepszych praktyk w zakresie tworzenia stron internetowych z ułatwieniami dostępu to jeden ze sposobów na uczynienie z Internetu miejsca równych szans dla wszystkich, niezależnie od wieku i umiejętności. Jest to uważane przez ONZ za podstawowe prawo człowieka i jest celem, do którego warto dążyć dla własnych zasług.

Jeśli to jednak nie wystarczy, aby zainwestować w korzystanie z ARIA, możesz również zauważyć, że programowanie z ułatwieniami dostępu jest również przydatne z perspektywy biznesowej. Pokrywa się z najlepszymi praktykami optymalizacji pod kątem wyszukiwarek i zwiększa zasięg Twojej witryny. Dodatkowo w niektórych przypadkach jest to wymagane przez prawo. Innymi słowy, istnieje wiele powodów, dla których warto wykonać kilka prostych kroków w celu zwiększenia dostępności witryny.

Jak korzystać z ARIA w kodzie HTML witryny WordPress (3 kluczowe praktyki)

Zdecydowanie zalecamy dalsze kształcenie się w zakresie ARIA i dostępności sieci poza zakresem tego postu. Szczególnie warto rozważyć przetestowanie aktualnej dostępności witryny.

To powiedziawszy, tak naprawdę są tylko trzy rzeczy, które musisz wiedzieć, aby zacząć używać ARIA w kodzie HTML swojej witryny WordPress. Poznanie poniższych praktyk powinno zapewnić Ci solidne podstawy.

1. Używanie ARIA z semantycznym HTML

Zanim omówimy, jak zastosować ARIA do kodu HTML, ważne jest, aby pamiętać, kiedy należy go używać. Chociaż sam natywny kod HTML nie zapewnia dostępu do treści internetowych, istnieją pewne elementy semantyczne, które sprawiają, że ARIA jest niepotrzebna lub w przypadku nieprawidłowego użycia ARIA może powodować konflikt.

Elementy semantyczne – takie jak <header> , <figure> i <nav> – opisują przeznaczenie ich kodu HTML. Włączenie ARIA do tych elementów byłoby zbędne, ponieważ semantyczny HTML już implikuje rolę elementu (za chwilę powiemy więcej o rolach ARIA).

Dodatkowo istnieją pewne zasady dotyczące używania ARIA, aby uniemożliwić programistom używanie jej w sposób sprzeczny z semantycznym kodem HTML. Konsorcjum World Wide Web (W3C) ma przydatną tabelę, w której przedstawiono semantyczne elementy HTML, które implikowały role ARIA:

Pierwsza kolumna określa element HTML, a druga zawiera niejawną rolę. Jeśli element ma na liście implikowaną rolę, nie musisz dołączać dla niego dodatkowej roli ARIA. Trzecia kolumna zawiera listę ról, które może mieć każdy element HTML, zgodnie z najlepszymi praktykami.

2. Dodawanie ról do znaczników HTML

Gdy masz pewność, że element HTML, nad którym pracujesz, wymaga użycia ARIA, możesz przejść do używania „roli” i „atrybutów”. Być może już wiesz, co robią role ARIA z poprzedniej sekcji. Określają typ elementu zawartego w tagu i określają przeznaczenie elementu.

Na przykład, jeśli chcesz utworzyć alert informujący użytkowników, że muszą zainstalować aktualizację, użyj roli „alert” w następujący sposób:

 <div role="alert">
<p>Zainstaluj najnowszą aktualizację!</p>
</div>

Jak wyjaśniliśmy wcześniej, nie musisz przypisywać roli, jeśli element jest semantyczny i implikuje rolę, i nie powinieneś przypisywać nowej roli do elementu, który jest w konflikcie z jego dorozumianą rolą. Należy jednak pamiętać, że do każdego elementu można przypisać tylko jedną rolę.

Pomyśl o tym w ten sposób - A określa rolę, co jest element. Element nie może być jednocześnie dwiema rzeczami, dlatego należy wybrać rolę, która najlepiej go opisuje. To powiedziawszy, kiedy musisz, możesz zdecydować się na zagnieżdżenie jednego elementu wewnątrz elementu o innej roli.

Na przykład, jeśli chcesz dodać powyższy alert do nagłówka, może wyglądać mniej więcej tak:

 <header><div role="alert">
<p>Zainstaluj najnowszą aktualizację!</p>
</div></header>

Zamiast stwierdzać, że pojedynczy element jest zarówno nagłówkiem, jak i alertem, jasne jest, że w nagłówku znajduje się alert.

3. Dołączanie atrybutów do stanów i właściwości notatek

Atrybuty to drugi element składający się na ARIA. Różnią się one od ról tym, że mówią czytnikom ekranu coś ważnego na temat konkretnego elementu, a nie określają, czym jest ten element. Istnieją dwa rodzaje atrybutów ARIA:

• Stany udostępniają informacje dotyczące funkcji, które mogą się zmienić, gdy użytkownik będzie z nimi wchodzić w interakcję. Na przykład może to obejmować pola wyboru lub przyciski radiowe.
• Właściwości wskazują funkcje, które prawdopodobnie nie ulegną zmianie podczas użytkowania. Element opisujący inny element lub poziom hierarchiczny, na którym znajduje się element, są właściwościami.

Oba są łatwe do zauważenia, ponieważ zawsze zaczynają się od arii, po której następuje konkretny stan lub właściwość, której się używa. Na przykład stan używany do informowania czytnika ekranu, że pole wyboru jest domyślnie wypełnione, jest zaznaczony jako aria, jak w tym przykładzie:

 <span role="pole wyboru" 
aria-checked="prawda"
tabindex="0">
</span>

Podobnie właściwość używana do zaznaczania, kiedy jeden element oznacza inny etykietę, to aria-labelledby. Możesz zastosować ten atrybut do obrazu, na przykład, aby wskazać powiązany z nim podpis:

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="Opera w Sydney">
<figcaption>Widzieliśmy tutaj operę <cite>Cyrulik sewilski</cite>!</figcaption>
</figur>

Zalecamy zapoznanie się z listą dozwolonych ról, stanów i właściwości W3C, aby zobaczyć więcej przykładów atrybutów, których możesz użyć.

Wniosek

Jeśli chodzi o tworzenie stron internetowych, tworzenie dostępnych treści może nie być pierwszą rzeczą, o której myślisz. Jednak postępując zgodnie z najlepszymi praktykami dotyczącymi ułatwień dostępu do sieci i umieszczając w witrynie kod ARIA HTML, możesz odegrać rolę w udostępnianiu sieci wszystkim użytkownikom.

Trzy kluczowe praktyki korzystania z ARIA w witrynie WordPress obejmują:

1. Używanie ARIA z semantycznym HTML.
2. Dodawanie ról do znaczników HTML.
3. Dołączanie atrybutów do stanów i właściwości notatek.

Masz pytania dotyczące korzystania z ARIA w witrynie WordPress? Daj nam znać w sekcji komentarzy poniżej!

Artykuł Miniatura Obrazu EgudinKa / shutterstock.com