Responsywny i dostępny frontend
Projektowanie i programowanie systemów internetowych I
wykład 12 z 15
mgr inż. Krzysztof Rewak
Zakład Informatyki, Wydział Nauk Technicznych i Ekonomicznych
Collegium Witelona Uczelnia Państwowa
Blumilk sp. z o.o.
Agenda
- RWD
- a11y
- Inne rozwiązania
- Podsumowanie
Dostępność w web designie
Dostępność (ang. accessibility) stron internetowych polega na tworzeniu stron, które są użyteczne i funkcjonalne dla wszystkich użytkowników, w tym osób z różnymi niepełnosprawnościami. Celem jest zapewnienie równego dostępu do informacji i funkcji niezależnie od ograniczeń użytkownika.
Kluczowe zasady dostępności
Tworzenie dostępnych stron internetowych opiera się na kilku kluczowych zasadach, które pomagają zapewnić, że wszystkie elementy strony są dostępne dla wszystkich użytkowników. Są to:
- postrzegalność
- funkcjonalność
- zrozumiałość
- solidność
Wsparcie dla technologii asystujących
Technologie asystujące, takie jak czytniki ekranowe, lupy ekranowe i urządzenia do sterowania głosem, pomagają użytkownikom z niepełnosprawnościami korzystać z internetu. Projektowanie stron z myślą o tych technologiach jest kluczowe dla dostępności.
Dobre praktyki projektowania dostępnych stron
Do dobrych praktyk w projektowaniu dostępnych stron należą między innymi:
- używanie semantycznego HTML
- dodawanie alternatywnego tekstu (alt) do obrazków
- zapewnienie odpowiedniego kontrastu kolorów
- tworzenie dostępnych formularzy z etykietami
- zarządzanie skupieniem (focus) na elementach interaktywnych
Testowanie dostępności
Regularne testowanie dostępności jest kluczowe w procesie projektowania. Można to zrobić za pomocą:
- narzędzi automatycznych, takich jak WAVE, Axe
- manualnych testów z wykorzystaniem czytników ekranowych
- testów użytkowników z różnymi niepełnosprawnościami
Regularne testowanie pomaga identyfikować i naprawiać problemy dostępności.
Przykłady dostępnych komponentów
Dostępne komponenty to takie, które są zaprojektowane z myślą o wszystkich użytkownikach. Przykłady obejmują:
- dostępne menu nawigacyjne
- interaktywne przyciski i linki z odpowiednimi etykietami
- formularze z czytelnymi etykietami i instrukcjami
Każdy z tych komponentów powinien być testowany pod kątem dostępności.
Zasoby i narzędzia do nauki dostępności
Aby pogłębić wiedzę na temat dostępności, warto skorzystać z dostępnych zasobów:
- Web Content Accessibility Guidelines (WCAG)
- materiały edukacyjne WAI-ARIA
- kursy online, takie jak "Accessibility for Web Developers" na Udacity
- fora i społeczności, np. WebAIM
Highlights
- (...)
Źródła i do dalszego poczytania