Web-Dev-For-Beginners/translations/pl/1-getting-started-lessons/3-accessibility/assignment.md

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. 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.