Implementacja ułatwień dostępu w aplikacji React

Ponieważ technologia wciąż się rozwija, ważne jest, abyśmy upewnili się, że nasze produkty cyfrowe są dostępne dla wszystkich, niezależnie od ich umiejętności. Obejmuje to osoby z niepełnosprawnością wzrokową, słuchową, fizyczną i poznawczą. W tym poście na blogu przyjrzymy się, jak zaimplementować funkcje ułatwień dostępu w aplikacji React wraz z przykładami.

1. Użyj semantycznego HTML

Semantyczny HTML odnosi się do używania elementów HTML, które przekazują znaczenie technologiom wspomagającym. Na przykład zamiast używać elementu div do tworzenia przycisku, użyj elementu przycisku. W ten sposób czytniki ekranu mogą zrozumieć, że jest to plik

przycisk i podać odpowiednią informację użytkownikowi.

Oto przykład tworzenia przycisku w React przy użyciu elementu przycisku:

<button onClick={handleClick}>Click me</button>

Tekst alternatywny to krótki opis obrazu odczytywany na głos przez czytniki ekranu. Ważne jest, aby zapewnić tekst alternatywny dla wszystkich obrazów, zwłaszcza tych, które przekazują ważne informacje. W React możesz dodać tekst alternatywny do obrazu za pomocą atrybutu alt:

<img src="image.png" alt="A person using a computer"></img>

Nawigacja za pomocą klawiatury jest niezbędna dla użytkowników, którzy nie mogą używać myszy. W React możesz dodać nawigację za pomocą klawiatury do swojej aplikacji, używając atrybutu tabindex i zdarzenia onKeyPress:

<button tabindex="0" onKeyPress={handleKeyPress}>Click me</button>

ARIA (Accessible Rich Internet Applications) to zestaw atrybutów, które można dodać do elementów HTML w celu poprawy dostępności. Etykiety ARIA zapewniają dodatkowy kontekst dla technologii wspomagających, podczas gdy role ARIA definiują typ elementu i jego funkcję. Oto przykład, jak dodać etykietę i rolę ARIA do przycisku w React:

<button role="button" aria-label="Click me" onClick={handleClick}>Click me</button>

Kontrast kolorów jest ważny dla użytkowników z wadami wzroku. Upewnij się, że tekst w Twojej aplikacji ma duży kontrast z kolorem tła. Możesz użyć narzędzi, takich jak Color Contrast Checker WebAIM, aby upewnić się, że kontrast kolorów spełnia wytyczne dotyczące ułatwień dostępu.

6. Dostarcz podpisy i transkrypcje

W przypadku materiałów wideo i audio należy zapewnić napisy i transkrypcje, aby użytkownicy niesłyszący lub niedosłyszący mogli uzyskać dostęp do treści. W React możesz użyć elementu track, aby dodać napisy:

<video>
  <source src="video.mp4" type="video/mp4" />
  <track label="English" kind="subtitles" srclang="en" src="captions.vtt" default />
</video>