Najlepsze Praktyki Dostępności

Zamknięta przewodnica dotyczącego dostępnego projektowania stron internetowych (WCAG, ARIA i więcej)

Dostępność sieciowa zapewnia, że strony internetowe i aplikacje mogą być używane przez ludzi z niepełnosprawnościami. To obejmuje wsparcie dla czytników ekranu, nawigacji klawiatury, wystarczającego kontrastu oraz wiele innych aspektów. Ta przewodnica pokrywa wskazówki WCAG, atrybuty ARIA, semantyczną HTML i najlepsze praktyki tworzenia dostępnych aplikacji internetowych.

Poziom AA: Zalecany Poziom dla Największej Przestrzeni Internetowej

Poziom AAA: najwyższy poziom dostępności

Stany i Właściwości ARIA

demo na żywo · powiązana symulacja● LIVE

Automatyczne testowanie: axe DevTools, Lighthouse, WAVE

Odczytywanie ekranów: NVDA, JAWS, VoiceOver, TalkBack

Testowanie za pomocą klawiatury: Navigacja tylko za pomocą klawiatury

Często zadawane pytania

Jak powinny być dostarczone alternatywne metody wprowadzania danych?

Alternatywne metody wprowadzania danych powinny obejmować skróty klawiszowe do nawigacji, przyciski do przewijania w górę/dół lub pola tekstowe do podawania pozycji. Obszary ARIA live powinny być używane do anuncowania zmian, a atrybuty aria-grabbed i aria-dropeffect powinny zarządzać stanem operacji przeciągania, wraz z dostarczaniem zwrotnej informacji wizualnej. Idealnie, zarówno podejście – przeciąganie i upuszczać dla użytkowników myszkowych, jak i nawigacja za pomocą klawiatury dla użytkowników z klawiaturą – powinno być dostarczone.

Jak należy zarządzać nawigacją między „stronami” w aplikacji jednej strony (SPA)?

Podczas nawigowania między „stronami” w aplikacji jednej strony (SPA), należy programowo ustawić skupienie na głównym treści lub linku pominięcia. Zastosuj biblioteki routingu, takie jak React Router z funkcjonalnością zarządzania skupieniem. Obszary ARIA live powinny być używane do anuncowania zmian, utrzymując stan skupienia podczas nawigacji i przywracając go po powrocie. Powinny być zaimplementowane pułapki skupienia dla modalnych okien. Dbałość o przetestowanie za pomocą nawigacji za pomocą klawiatury jest kluczowa, aby zapewnić logiczny tok skupienia.

Co daje aria-label – bezpośrednia etykieta tekstowa czy odniesienie do innego elementu?

aria-label dostarcza bezpośrednią etykietę tekstową, na przykład „Zamknij dialog” (aria-label="Zamknij dialog"). aria-labelledby odnosi się do elementu z określonym ID zawierającym etykietę; na przykład aria-labelledby="tytuł-dialogu" (gdzie id="tytuł-dialogu" przechowuje tytuł). Używaj aria-label, gdy etykieta nie jest widoczna w DOM, a aria-labelledby, gdy etykieta już istnieje w DOM. aria-describedby służy do dostarczania dodatkowych opisowych informacji.

Jak powinny być dodane alternatywy tekstowe (sumaryczne opisy) dla skomplikowanej treści?

Alternatywy tekstowe lub sumaryczne opisy powinny być dostarczone dla tabel danych towarzyszących graficznym elementom, zaimplementowana powinna być nawigacja za pomocą klawiatury dla interaktywnych elementów, etykiety ARIA powinny być używane dla punktów danych, powinna być dostarczona możliwość eksportu danych i powinny być dostarczone szczegółowe opisy dla trendów i wzorów. Dla skomplikowanych wykresów powinny być zaimplementowane szczegółowe opisy lub interaktywne eksplorowanie za pomocą klawiatury.

▶ Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Hash Function Avalanche Visualizer