# Kompleksowy audyt dostępności strony internetowej ## Instrukcje W tym zadaniu przeprowadzisz audyt dostępności na poziomie profesjonalnym rzeczywistej strony internetowej, stosując zasady i techniki, które poznałeś. To praktyczne doświadczenie pogłębi Twoje rozumienie barier i rozwiązań dostępnościowych. Wybierz stronę, która wydaje się mieć problemy z dostępnością — daje to więcej możliwości nauki niż analiza strony już idealnej. Dobrymi kandydatami są starsze witryny, złożone aplikacje internetowe lub serwisy z bogatą zawartością multimedialną. ### Faza 1: Strategiczna ocena ręczna Zanim sięgniesz po narzędzia automatyczne, wykonaj kompleksową ocenę ręczną. To podejście skoncentrowane na człowieku często ujawnia problemy, które narzędzia pomijają, i pomaga zrozumieć rzeczywiste doświadczenia użytkownika. **🔍 Podstawowe kryteria oceny:** **Nawigacja i struktura:** - Czy możesz poruszać się po całej stronie wyłącznie za pomocą klawiatury (Tab, Shift+Tab, Enter, Space, klawisze strzałek)? - Czy wskaźniki fokusu są wyraźnie widoczne na wszystkich elementach interaktywnych? - Czy struktura nagłówków (H1-H6) tworzy logiczny konspekt treści? - Czy istnieją linki pomijające do przejścia do głównej zawartości? **Dostępność wizualna:** - Czy na całej stronie jest wystarczający kontrast kolorów (minimum 4,5:1 dla zwykłego tekstu)? - Czy strona polega wyłącznie na kolorze w przekazywaniu ważnych informacji? - Czy wszystkie obrazy mają odpowiedni tekst alternatywny? - Czy układ pozostaje funkcjonalny przy powiększeniu 200%? **Treść i komunikacja:** - Czy występują sformułowania „kliknij tutaj” lub niejednoznaczne teksty linków? - Czy możesz zrozumieć treść i funkcjonalność bez wskazówek wizualnych? - Czy pola formularzy są prawidłowo opisane i pogrupowane? - Czy komunikaty o błędach są jasne i pomocne? **Elementy interaktywne:** - Czy wszystkie przyciski i kontrolki formularzy działają wyłącznie za pomocą klawiatury? - Czy dynamiczne zmiany zawartości są ogłaszane czytnikom ekranu? - Czy modalne okna dialogowe i zaawansowane widżety stosują właściwe wzorce dostępności? 📝 **Dokumentuj swoje spostrzeżenia** z konkretnymi przykładami, zrzutami ekranu i adresami URL stron. Zapisuj zarówno problemy, jak i dobre praktyki. ### Faza 2: Kompleksowe testy automatyczne Zweryfikuj i uzupełnij swoje ręczne ustalenia, korzystając z branżowych narzędzi do testowania dostępności. Każde narzędzie ma inne mocne strony, więc używanie kilku daje pełne pokrycie. **🛠️ Wymagane narzędzia testowe:** 1. **Lighthouse Accessibility Audit** (wbudowany w Chrome/Edge DevTools) - Przeprowadź audyt na wielu stronach - Skup się na konkretnych metrykach i zaleceniach - Zanotuj ocenę dostępności i konkretne naruszenia 2. **axe DevTools** (rozszerzenie przeglądarki - standard branżowy) - Bardziej szczegółowe wykrywanie problemów niż Lighthouse - Dostarcza konkretne przykłady kodu do naprawy - Testuje zgodnie z kryteriami WCAG 2.1 3. **WAVE Web Accessibility Evaluator** (rozszerzenie przeglądarki) - Wizualna reprezentacja funkcji dostępności - Wyróżnia błędy i pozytywne elementy - Świetne do zrozumienia struktury strony 4. **Analyzery kontrastu kolorów** - WebAIM Contrast Checker dla konkretnych kombinacji kolorów - Rozszerzenia do analizy całej strony - Testy zgodne ze standardami WCAG AA i AAA **🎧 Testowanie przy użyciu rzeczywistych technologii wspomagających:** - **Testy czytników ekranu**: Użyj NVDA (Windows), VoiceOver (Mac) lub TalkBack (Android) - **Nawigacja tylko klawiaturą**: Odłącz mysz i nawiguj po całym serwisie - **Test powiększenia**: Sprawdź działanie przy powiększeniu 200% i 400% - **Test sterowania głosowego**: Jeśli dostępne, spróbuj narzędzi do sterowania głosem **📊 Organizuj wyniki** tworząc główny arkusz kalkulacyjny zawierający: - Opis problemu i lokalizację - Poziom ważności (Krytyczny/Wysoki/Średni/Niski) - Złamanie kryteriów WCAG - Narzędzie, które wykryło problem - Zrzuty ekranu i dowody ### Faza 3: Kompleksowa dokumentacja wyników Sporządź profesjonalny raport z audytu dostępności, który pokaże Twoje rozumienie zarówno kwestii technicznych, jak i ich wpływu na użytkowników. **📋 Wymagane sekcje raportu:** 1. **Streszczenie wykonawcze** (1 strona) - Adres strony i krótki opis - Ogólny poziom dojrzałości dostępności - Top 3 najbardziej krytyczne problemy - Szacunkowy wpływ na osoby z niepełnosprawnościami 2. **Metodologia** (½ strony) - Podejście testowe i użyte narzędzia - Testowane strony oraz kombinacje urządzeń/przeglądarek - Standardy, wg których oceniano (WCAG 2.1 AA) 3. **Szczegółowe wyniki** (2-3 strony) - Problemy pogrupowane według zasad WCAG (Perceivable, Operable, Understandable, Robust) - Załącz zrzuty ekranu i konkretne przykłady - Zanotuj pozytywne cechy dostępności - Odnieś się do wyników narzędzi automatycznych 4. **Ocena wpływu na użytkownika** (1 strona) - Jak wykryte problemy wpływają na użytkowników z różnymi niepełnosprawnościami - Scenariusze opisujące rzeczywiste doświadczenia - Wpływ biznesowy (ryzyko prawne, SEO, rozszerzenie bazy użytkowników) **📸 Gromadzenie dowodów:** - Zrzuty ekranu naruszeń dostępności - Nagrania ekranu przedstawiające problematyczne ścieżki użytkownika - Raporty narzędzi (zapisane w PDF) - Przykłady kodu ilustrujące problemy ### Faza 4: Profesjonalny plan naprawczy Opracuj strategiczny, priorytetowy plan naprawy problemów dostępności. To pokaże Twoją zdolność myślenia jak profesjonalny web developer uwzględniający rzeczywiste ograniczenia biznesowe. **🎯 Stwórz szczegółowe rekomendacje poprawy (minimum 10 problemów):** **Dla każdego problemu podaj:** - **Opis problemu**: Jasne wyjaśnienie, co jest nie tak i dlaczego jest to problematyczne - **Odniesienie do WCAG**: Konkretne złamane kryteria sukcesu (np. „2.4.4 Cel odnośnika (w kontekście) – poziom A”) - **Wpływ na użytkownika**: Jak wpłynie na osoby z różnymi niepełnosprawnościami - **Rozwiązanie**: Konkretne zmiany w kodzie, modyfikacje projektu lub poprawki procesowe - **Poziom priorytetu**: Krytyczny (blokuje podstawowe użycie) / Wysoki (znacząca przeszkoda) / Średni (problem z użytecznością) / Niski (ulepszenie) - **Nakład pracy**: Szacunek czasu/skomplikowania (Szybka poprawka / Średni wysiłek / Duży refaktoring) - **Weryfikacja testowa**: Jak sprawdzić, czy naprawa działa **Przykład wpisu z rekomendacją:** ``` Issue: Generic "Read more" link text appears 8 times on homepage WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A User Impact: Screen reader users cannot distinguish between links when viewed in link list Solution: Replace with descriptive text like "Read more about sustainability initiatives" Priority: High (major navigation barrier) Effort: Low (30 minutes to update content) Testing: Generate link list with screen reader - each link should be meaningful standalone ``` **📈 Etapy strategicznego wdrożenia:** - **Faza 1 (0-2 tygodnie)**: Problemy krytyczne blokujące podstawową funkcjonalność - **Faza 2 (1-2 miesiące)**: Priorytetowe poprawki dla lepszego doświadczenia użytkownika - **Faza 3 (3-6 miesięcy)**: Ulepszenia o średnim priorytecie i poprawki procesowe - **Faza 4 (ciągłe)**: Stały monitoring i udoskonalanie ## Kryteria oceny Twój audyt dostępności będzie oceniany pod kątem dokładności technicznej i profesjonalnej prezentacji: | Kryterium | Doskonałe (90-100%) | Dobre (80-89%) | Zadowalające (70-79%) | Wymaga poprawy (<70%) | |-----------|---------------------|----------------|-----------------------|-----------------------| | **Głębokość testów ręcznych** | Kompleksowa ocena obejmująca wszystkie zasady POUR z szczegółowymi obserwacjami i scenariuszami użytkownika | Dobre pokrycie większości obszarów dostępności z jasnymi ustaleniami i analizą wpływu na użytkownika | Podstawowa ocena obejmująca kluczowe obszary z adekwatnymi obserwacjami | Ograniczone testy z powierzchownymi obserwacjami i minimalnym uwzględnieniem wpływu na użytkownika | | **Wykorzystanie i analiza narzędzi** | Efektywne użycie wszystkich wymaganych narzędzi, odniesienia krzyżowe, jasne dowody i analiza ograniczeń narzędzi | Użycie większości narzędzi z dobrą dokumentacją, częściowymi odniesieniami i adekwatnymi dowodami | Użycie wymaganych narzędzi z podstawową dokumentacją i niewieloma dowodami | Minimalne użycie narzędzi, zła dokumentacja lub brak dowodów | | **Identyfikacja i kategoryzacja problemów** | Identyfikuje ponad 15 konkretnych problemów we wszystkich zasadach WCAG, dokładnie kategoryzuje według ważności, wykazuje głębokie zrozumienie | Identyfikuje 10-14 problemów w większości zasad WCAG, dobra kategoryzacja, solidne zrozumienie | Identyfikuje 7-9 problemów z adekwatnym pokryciem WCAG i podstawową kategoryzacją | Identyfikuje mniej niż 7 problemów z ograniczonym zakresem lub słabą kategoryzacją | | **Jakość i wykonalność rozwiązań** | Ponad 10 szczegółowych, wykonalnych rozwiązań ze skutecznymi odniesieniami do WCAG, realistycznymi harmonogramami i metodami weryfikacji | 8-9 dobrze opracowanych rozwiązań z w większości dokładnymi odniesieniami i dobrymi szczegółami wdrożenia | 6-7 podstawowych rozwiązań z pewnymi szczegółami i zasadniczo realistycznym podejściem | Mniej niż 6 rozwiązań lub niewystarczające szczegóły, nierealistyczne wdrożenia | | **Profesjonalna komunikacja** | Raport doskonale zorganizowany, jasno napisany, zawiera streszczenie wykonawcze, używa odpowiedniego języka technicznego i spełnia standardy dokumentów biznesowych | Dobrze zorganizowany, dobra jakość tekstu, zawiera większość wymaganych części, odpowiedni ton | Wystarczająco zorganizowany, dopuszczalna jakość tekstu, zawiera podstawowe części | Słaba organizacja, niejasny tekst lub brak kluczowych części | | **Zastosowanie praktyczne** | Pokazuje zrozumienie wpływu biznesowego, zagadnień prawnych, różnorodności użytkowników i wyzwań wdrożeniowych | Wykazuje dobre rozumienie praktycznych zastosowań z uwzględnieniem kontekstu biznesowego | Podstawowe rozumienie zastosowań w świecie rzeczywistym | Ograniczone powiązania z praktycznymi zastosowaniami | ## Zaawansowane opcje wyzwania **🚀 Dla studentów szukających dodatkowych wyzwań:** - **Analiza porównawcza**: Zbadaj 2-3 konkurencyjne strony i porównaj ich dojrzałość dostępności - **Skupienie na dostępności mobilnej**: Głęboka analiza problemów dostępności specyficznych dla urządzeń mobilnych z użyciem TalkBack na Androidzie lub VoiceOver na iOS - **Perspektywa międzynarodowa**: Zbadaj i zastosuj standardy dostępności z różnych krajów (EN 301 549, Section 508, ADA) - **Przegląd deklaracji dostępności**: Oceń istniejącą deklarację dostępności serwisu (jeśli jest) w odniesieniu do Twoich ustaleń ## Efekty uczenia się Po ukończeniu tego kompleksowego audytu dostępności rozwiniesz kluczowe umiejętności zawodowe: **🎯 Kompetencje techniczne:** - **Biegłość w testowaniu dostępności**: Znajomość branżowych metod ręcznych i automatycznych testów - **Zastosowanie WCAG**: Praktyczne doświadczenie w stosowaniu Wytycznych dotyczących dostępności treści internetowych w rzeczywistych scenariuszach - **Znajomość technologii wspomagających**: Praktyka z czytnikami ekranu i nawigacją klawiaturową - **Mapowanie problemów na rozwiązania**: Umiejętność identyfikowania barier dostępności i tworzenia konkretnych, wykonalnych strategii naprawczych **💼 Umiejętności zawodowe:** - **Komunikacja techniczna**: Doświadczenie w pisaniu profesjonalnych raportów dostępności dla różnych odbiorców - **Planowanie strategiczne**: Umiejętność priorytetyzacji poprawek dostępności na podstawie wpływu na użytkowników i wykonalności wdrożenia - **Zapewnienie jakości**: Zrozumienie testów dostępności jako elementu cyklu życia rozwoju oprogramowania - **Ocena ryzyka**: Świadomość aspektów prawnych, biznesowych i etycznych zgodności z dostępnością **🌍 Mentalność projektowania inkluzywnego:** - **Empatia użytkownika**: Głębokie zrozumienie różnorodnych potrzeb użytkowników i interakcji z technologiami wspomagającymi - **Zasady uniwersalnego projektowania**: Uznanie, że projekt dostępny jest korzystny dla wszystkich użytkowników, nie tylko dla osób z niepełnosprawnościami - **Ciągłe doskonalenie**: Ramy dla stałej oceny i ulepszania dostępności - **Umiejętności rzecznictwa**: Pewność w promowaniu najlepszych praktyk dostępności w przyszłych projektach i zespołach **🚀 Przygotowanie do kariery:** To zadanie odzwierciedla rzeczywiste projekty konsultingowe w zakresie dostępności, dając Ci doświadczenie warte portfolio, które pokazuje: - Systematyczne podejście do rozwiązywania problemów - Dbałość o szczegóły techniczne i wpływ biznesowy - Jasną komunikację złożonych koncepcji technicznych - Zrozumienie obowiązków prawnych i etycznych w tworzeniu stron internetowych Po ukończeniu będziesz gotowy do aktywnego udziału w inicjatywach związanych z dostępnością na dowolnym stanowisku programisty i rzecznictwa na rzecz praktyk projektowania inkluzywnego w całej swojej karierze. --- **Zastrzeżenie**: Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dążymy do jak największej dokładności, prosimy mieć na uwadze, że tłumaczenia automatyczne mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być uznawany za autorytatywne źródło. W przypadku informacji o kluczowym znaczeniu zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.