Przejdź do głównej zawartości
Developer Toolkit Developer Toolkit Cursor & Claude Code | Developer Toolkit

Testowanie dostępności

Dostępność dotyczy 1,85 miliarda osób na świecie z niepełnosprawnościami, reprezentując rynek o wartości 13 bilionów dolarów. Poza zgodnością prawną, dostępne aplikacje zapewniają lepsze doświadczenia użytkownika dla wszystkich. Testowanie dostępności wspomagane przez AI z serwerami A11y MCP przekształca walidację WCAG z ręcznych audytów w inteligentne, zautomatyzowane przepływy pracy zapewniające projektowanie włączające na dużą skalę.

Rewolucja w konwersacyjnym testowaniu dostępności

Dział zatytułowany „Rewolucja w konwersacyjnym testowaniu dostępności”

Tradycyjne testowanie dostępności wymaga specjalistycznej wiedzy o wytycznych WCAG i technologiach wspomagających. Serwery A11y MCP umożliwiają przepływy pracy dostępności w języku naturalnym:

Testowanie A11y w języku naturalnym

  • “Testuj nasze formularze pod kątem kompatybilności z czytnikami ekranu”
  • “Sprawdź kontrast kolorów na wszystkich stronach”
  • “Waliduj ścieżki nawigacji klawiaturowej”
  • “Zapewnij zgodność z WCAG 2.1 AA”

Analiza WCAG wspomagana przez AI

  • Inteligentne wykrywanie problemów dostępności
  • Sugestie naprawcze uwzględniające kontekst
  • Redukcja fałszywych pozytywów
  • Priorytetyzacja oparta na wpływie

Integracja A11y MCP

  • Axe-core MCP do automatycznego skanowania
  • Playwright MCP do testowania przeglądarek
  • Pa11y MCP do integracji CI/CD
  • Screen reader MCP do testowania technologii wspomagających

Ciągła walidacja dostępności

  • Monitorowanie zgodności WCAG w czasie rzeczywistym
  • Zapobieganie regresji dostępności
  • Walidacja doświadczenia użytkownika
  • Raportowanie zgodności prawnej

Konfiguracja serwera A11y MCP i testowanie WCAG

Dział zatytułowany „Konfiguracja serwera A11y MCP i testowanie WCAG”

Rozpoczęcie z serwerami MCP dostępności

Dział zatytułowany „Rozpoczęcie z serwerami MCP dostępności”
Okno terminala
# Skonfiguruj serwery A11y MCP do testowania dostępności
# Zainstaluj serwer A11y MCP z integracją Axe-core
npm install a11y-mcp-server


# Skonfiguruj w ustawieniach MCP Cursor:
{
  "mcpServers": {
    "a11y-testing": {
      "command": "npx",
      "args": ["a11y-mcp-server"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}


# Testowanie dostępności w języku naturalnym
Agent: "Używając serwera A11y MCP, przeprowadź kompleksowy audyt dostępności:


PRD: Ocena zgodności WCAG 2.1 AA
- Testuj naszą stronę e-commerce pod kątem barier dostępności
- Skup się na dostępności formularzy i nawigacji
- Waliduj współczynniki kontrastu kolorów na wszystkich stronach
- Testuj nawigację klawiaturową i zarządzanie fokusem
- Sprawdź implementację ARIA i semantyczny HTML
- Zapewnij kompatybilność z czytnikami ekranu


Todo:
- [ ] Automatyczne skanowanie WCAG 2.1 AA z Axe-core
- [ ] Ręczne testowanie nawigacji klawiaturowej
- [ ] Walidacja kompatybilności z czytnikami ekranu
- [ ] Kontrole dostępności wizualnej i kontrastu kolorów
- [ ] Dostępność formularzy i obsługa błędów
- [ ] Wygeneruj kompleksowy raport dostępności
- [ ] Dostarczenie przykładów kodu naprawczego"

Scenariusze testowania dostępności w świecie rzeczywistym

Dział zatytułowany „Scenariusze testowania dostępności w świecie rzeczywistym”

Testowanie dostępności e-commerce

Dział zatytułowany „Testowanie dostępności e-commerce”
Okno terminala
# Kompleksowe testowanie dostępności e-commerce
Agent: "Używając serwera A11y MCP, testuj dostępność naszej platformy e-commerce:


Kontekst biznesowy:
- Platforma sprzedaży internetowej z 500K+ miesięcznymi użytkownikami
- Katalog produktów z filtrowaniem i wyszukiwaniem
- Koszyk zakupowy i proces płatności
- Konta użytkowników i historia zamówień
- System opinii i ocen klientów


Scenariusze testów dostępności:
1. Odkrywanie produktów
   - Nawigacja czytnika ekranu po listach produktów
   - Filtrowanie i sortowanie produktów tylko klawiaturą
   - Tekst alternatywny dla zdjęć produktów
   - Ogłoszenia cen i dostępności


2. Dostępność koszyka zakupowego
   - Dodawanie/usuwanie przedmiotów z technologiami wspomagającymi
   - Aktualizacje ilości z właściwym feedbackiem
   - Ogłoszenia obliczeń sum koszyka
   - Dostępna obsługa błędów dla problemów z magazynem


3. Proces płatności
   - Etykietowanie pól formularzy i komunikaty błędów
   - Dostępność wyboru metody płatności
   - Autouzupełnianie adresów z czytnikami ekranu
   - Dostępność potwierdzenia zamówienia


4. Funkcje konta użytkownika
   - Dostępność formularzy logowania/rejestracji
   - Nawigacja historii zamówień
   - Modyfikacja ustawień konta
   - Dostępność preferencji użytkownika


Wymagania zgodności WCAG:
- Zgodność poziomu AA we wszystkich podróżach użytkowników
- Minimalny współczynnik kontrastu kolorów 4.5:1
- Kompletność nawigacji klawiaturowej
- Walidacja kompatybilności z czytnikami ekranu"

Testowanie czytników ekranu i klawiatury

Dział zatytułowany „Testowanie czytników ekranu i klawiatury”

Przepływy pracy testowania technologii wspomagających

Dział zatytułowany „Przepływy pracy testowania technologii wspomagających”
Okno terminala
# Testowanie kompatybilności z czytnikami ekranu
Agent: "Testuj kompatybilność z czytnikami ekranu używając A11y MCP:


Macierz testów czytników ekranu:
1. NVDA (Windows - najczęstszy)
   - Nawigacja skrótami nagłówków (klawisz H)
   - Testuj tryb formularzy i tryb aplikacji
   - Weryfikuj nawigację tabeli (Ctrl+Alt+strzałki)
   - Sprawdź nawigację punktów orientacyjnych (klawisz D)


2. JAWS (Windows - fokus korporacyjny)
   - Testuj nawigację wirtualnego kursora
   - Weryfikuj ogłoszenia trybu formularzy
   - Sprawdź klawisze szybkiej nawigacji
   - Testuj tryb przeglądania vs tryb fokusu


3. VoiceOver (macOS/iOS)
   - Testuj nawigację rotorem
   - Weryfikuj kontrole gestów
   - Sprawdź z wyświetlaczem brajla
   - Testuj aktualizacje zawartości dynamicznej


4. TalkBack (Android)
   - Testuj nawigację liniową
   - Weryfikuj eksplorację dotykiem
   - Sprawdź gesty globalne
   - Testuj kontrole czytania


Scenariusze testowania zawartości:
- Nagłówki i struktura dokumentu
- Pola formularzy i komunikaty błędów
- Elementy interaktywne i przyciski
- Tabele danych i złożone układy
- Zawartość dynamiczna i regiony na żywo
- Obrazy i zawartość multimedialna


Oczekiwane wyniki:
- Cała zawartość dostępna przez czytnik ekranu
- Utrzymywana logiczna kolejność czytania
- Właściwie ogłaszane elementy interaktywne
- Jasno komunikowane komunikaty błędów
- Brak mylących lub redundantnych ogłoszeń"

Testowanie dostępności wizualnej i kognitywnej

Dział zatytułowany „Testowanie dostępności wizualnej i kognitywnej”

Kompleksowa ocena dostępności wizualnej

Dział zatytułowany „Kompleksowa ocena dostępności wizualnej”
Okno terminala
# Testowanie kontrastu kolorów i dostępności wizualnej
Agent: "Testuj dostępność wizualną używając serwera A11y MCP:


Plan testów dostępności wizualnej:
1. Analiza kontrastu kolorów
   - Tekst na tle (minimum 4.5:1 dla AA)
   - Kontrast dużego tekstu (minimum 3:1 dla AA)
   - Kontrast elementów nietekstowych (3:1 dla komponentów UI)
   - Walidacja kontrastu wskaźników fokusu


2. Testowanie zależności od koloru
   - Informacje przekazywane tylko kolorem
   - Testowanie symulacji dla osób niewidomych na kolory
   - Alternatywne wskaźniki dla zawartości kodowanej kolorami
   - Identyfikacja komunikatów błędów bez koloru


3. Ocena układu wizualnego
   - Skalowanie tekstu do 200% bez przewijania poziomego
   - Przepływ zawartości przy różnych poziomach powiększenia
   - Kolejność czytania z prezentacją wizualną
   - Białe przestrzenie i odstępy zawartości


4. Testowanie trybu ciemnego i motywów
   - Kompatybilność z trybem wysokiego kontrastu
   - Dostępność ciemnego motywu
   - Walidacja kontrastu kolorów niestandardowych motywów
   - Dostosowanie do preferencji użytkownika


Scenariusze dostępności kolorów:
- Testowanie z różnymi typami ślepoty barw
- Walidacja współczynników kontrastu we wszystkich kombinacjach kolorów
- Sprawdzanie wskaźników fokusu i stanów wyboru
- Testowanie stanów błędów i komunikatów sukcesu
- Weryfikacja identyfikacji linków bez polegania na kolorze


Oczekiwane wyniki:
- Raport zgodności kontrastu kolorów
- Wyniki symulacji ślepoty barw
- Przewodnik naprawczy dostępności wizualnej
- Zgodna z marką dostępna paleta kolorów"

Zaawansowane przepływy pracy testowania dostępności

Dział zatytułowany „Zaawansowane przepływy pracy testowania dostępności”

Zawartość dynamiczna i elementy interaktywne

Dział zatytułowany „Zawartość dynamiczna i elementy interaktywne”
Okno terminala
# Testowanie dostępności okien modalnych i nakładek
Agent: "Testuj dostępność okien modalnych używając A11y MCP:


Wymagania dostępności okien modalnych:
1. Zarządzanie fokusem
   - Pułapka fokusu w zawartości modalnej
   - Powrót fokusu do elementu wyzwalającego po zamknięciu
   - Początkowe umieszczenie fokusu przy otwarciu modala
   - Kolejność tabulatora w granicach modala


2. Interakcja klawiaturowa
   - Klawisz Escape zamyka modal
   - Klawisz Enter aktywuje główną akcję
   - Nawigacja Tab cykluje w modalu
   - Nakładka modala nieinteraktywna


3. Obsługa czytników ekranu
   - Modal ogłaszany przy otwarciu
   - Zawartość tła oznaczona jako inertna
   - Właściwe role i właściwości ARIA
   - Jasno oznaczony przycisk zamknięcia


4. Dostępność wizualna
   - Wystarczający kontrast kolorów w modalu
   - Jasno widoczne wskaźniki fokusu
   - Zawartość modala czytelna przy 200% powiększeniu
   - Przyciemnienie tła nie uniemożliwia czytania zawartości


Scenariusze testowania okien modalnych:
- Otwieranie modala klawiaturą (Enter/Space)
- Nawigacja w modalu używając klawisza Tab
- Zamykanie modala klawiszem Escape
- Testowanie z aktywnym czytnikiem ekranu
- Weryfikacja niedostępności zawartości tła
- Sprawdzanie modala na urządzeniach mobilnych


Oczekiwane wyniki:
- Perfekcyjne zarządzanie fokusem przez całą interakcję
- Jasne ogłoszenia czytnika ekranu
- Możliwa obsługa tylko klawiaturą
- Brak barier dostępności w przepływach pracy modala"

Integracja dostępności CI/CD

Dział zatytułowany „Integracja dostępności CI/CD”

Potok automatycznego testowania dostępności

Dział zatytułowany „Potok automatycznego testowania dostępności”
.github/workflows/accessibility-testing.yml
name: Potok testowania dostępności


on:
  push:
    branches: [main, develop]
  pull_request:
    types: [opened, synchronize]
  schedule:
    - cron: '0 2 * * *' # Codzienne skany dostępności


jobs:
  accessibility-test:
    runs-on: ubuntu-latest


    steps:
      - uses: actions/checkout@v4


      - name: Konfiguracja serwerów A11y MCP
        run: |
          # Zainstaluj narzędzia testowania dostępności
          npm install a11y-mcp-server
          npm install @playwright/mcp@latest
          npm install pa11y-ci


          # Zainstaluj Axe CLI do skanowania bazowego
          npm install -g @axe-core/cli


      - name: Buduj i uruchom aplikację
        run: |
          npm install
          npm run build
          npm start &
          sleep 30 # Czekaj na uruchomienie aplikacji


      - name: Uruchom testy A11y z MCP
        run: |
          # Użyj języka naturalnego do testowania dostępności
          claude "Używając serwera A11y MCP, przeprowadź kompleksowy audyt dostępności:


          - Skanowanie zgodności WCAG 2.1 AA na wszystkich stronach
          - Testowanie nawigacji klawiaturowej dla kompletnych podróży użytkowników
          - Walidacja kompatybilności z czytnikami ekranu
          - Analiza kontrastu kolorów z zgodnością marki
          - Ocena dostępności formularzy i obsługi błędów
          - Testowanie zawartości dynamicznej i regionów na żywo


          Wygeneruj raport dostępności z:
          - Szczegółową analizą naruszeń WCAG
          - Priorytetyzacją wpływu dostępności
          - Przykładami kodu naprawczego
          - Rekomendacjami testów czytników ekranu
          - Oceną zgodności prawnej"


      - name: Integracja Pa11y CI
        run: |
          # Uruchom Pa11y do integracji CI/CD
          pa11y-ci --sitemap http://localhost:3000/sitemap.xml \
            --standard WCAG2AA \
            --threshold 10


      - name: Skanowanie Axe Core
        run: |
          # Uruchom Axe CLI do dodatkowej walidacji
          axe http://localhost:3000 \
            --tags wcag2a,wcag2aa,wcag21aa \
            --exit


      - name: Prześlij raporty A11y
        uses: actions/upload-artifact@v4
        with:
          name: accessibility-reports
          path: |
            a11y-report.html
            pa11y-results.json
            axe-results.json

Najlepsze praktyki testowania dostępności

Dział zatytułowany „Najlepsze praktyki testowania dostępności”

Przykładowe prompty do testowania dostępności

Dział zatytułowany „Przykładowe prompty do testowania dostępności”
Okno terminala
# PRD: Zgodność dostępności strony korporacyjnej
# Wymagania: zgodność WCAG 2.1 AA, ADA Section 508


"Używając serwera A11y MCP, zapewnij dostępność strony korporacyjnej:


Kontekst biznesowy:
- Strona korporacyjna z 1M+ miesięcznymi odwiedzającymi
- Wymóg prawny zgodności ADA
- Globalna publiczność z różnorodnymi potrzebami dostępności
- Funkcjonalność e-commerce z przetwarzaniem płatności


Todo:
- [ ] Kompletny audyt zgodności WCAG 2.1 AA
- [ ] Testowanie nawigacji klawiaturowej na wszystkich stronach
- [ ] Kompatybilność z czytnikami ekranu (NVDA, JAWS, VoiceOver)
- [ ] Walidacja kontrastu kolorów (minimum 4.5:1)
- [ ] Dostępność formularzy i obsługa błędów
- [ ] Tekst alternatywny obrazów i dostępność multimediów
- [ ] Dostępność dokumentów i plików PDF
- [ ] Dostępność mobilna (iOS/Android)
- [ ] Ocena dostępności kognitywnej
- [ ] Wygeneruj dokumentację zgodności prawnej


Kryteria sukcesu:
- Zero krytycznych naruszeń dostępności
- Osiągnięta zgodność WCAG 2.1 AA
- W pełni funkcjonalna nawigacja czytnika ekranu
- Kompletna obsługa tylko klawiaturowa
- Kontrast kolorów spełnia standardy
- Gotowa dokumentacja zgodności prawnej"

Metryki sukcesu testowania dostępności

Dział zatytułowany „Metryki sukcesu testowania dostępności”

Testowanie A11y ulepszone przez AI

Prędkość testowania: 10x szybsza walidacja zgodności WCAG

Pokrycie: 95% automatycznego wykrywania problemów dostępności

Dokładność: 85% redukcji fałszywych pozytywnych naruszeń

Zgodność WCAG

Standardy: Walidacja zgodności WCAG 2.1 AA/AAA

Prawne: Raportowanie zgodności ADA i Section 508

Międzynarodowe: Przestrzeganie globalnych standardów dostępności

Doświadczenie użytkownika

Język naturalny: “Testuj nasze formularze pod kątem kompatybilności z czytnikami ekranu”

Integracja MCP: Płynna orkiestracja narzędzi A11y

Naprawa: Automatyczne sugestie poprawek dostępności

Wpływ biznesowy

Dostęp do rynku: Osiągnięto 1,85 mld osób z niepełnosprawnościami

Ryzyko prawne: 90% redukcji pozwów dostępności

Zadowolenie użytkowników: 40% poprawa włączającego UX

Serwery A11y MCP do testowania dostępności

Dział zatytułowany „Serwery A11y MCP do testowania dostępności”
Serwer A11y MCP Testowanie dostępności wspierane przez Axe-core z analizą AI
Playwright MCP Automatyzacja przeglądarek dla przepływów pracy testowania dostępności
Pa11y MCP Testowanie dostępności z linii poleceń z integracją CI/CD
Accessibility Scanner MCP Testowanie dostępności LambdaTest z adnotacjami wizualnymi

Rozpoczęcie z testowaniem dostępności

Dział zatytułowany „Rozpoczęcie z testowaniem dostępności”

  1. Skonfiguruj serwer A11y MCP

    Okno terminala
    # Zainstaluj serwer A11y MCP z Axe-core
    npm install a11y-mcp-server
    

    # Skonfiguruj w kliencie MCP
    # Dodaj serwer A11y do mcp_settings.json

  2. Uruchom pierwszy skan A11y

    Okno terminala
    # Testowanie dostępności w języku naturalnym
    Agent: "Używając A11y MCP, skanuj naszą stronę pod kątem naruszeń WCAG 2.1 AA"

  3. Analizuj wyniki dostępności

    Okno terminala
    # Analiza naruszeń wspierana przez AI
    "Analizuj wyniki dostępności i priorytetyzuj według wpływu na użytkownika"

  4. Implementuj poprawki dostępności

    Okno terminala
    # Uzyskaj wskazówki naprawcze
    "Wygeneruj przykłady kodu, aby naprawić zidentyfikowane problemy dostępności"

  5. Skonfiguruj ciągłe testowanie A11y

    Okno terminala
    # Integruj z CI/CD
    "Utwórz automatyczne testowanie dostępności w naszym przepływie pracy GitHub Actions"

Typowe scenariusze testowania dostępności

Dział zatytułowany „Typowe scenariusze testowania dostępności”

Dostępność platformy edukacyjnej

Dział zatytułowany „Dostępność platformy edukacyjnej”
Okno terminala
# PRD: Dostępność platformy nauki online
"Używając serwera A11y MCP, zapewnij dostępność platformy edukacyjnej:


Wymagania dostępności:
- Zgodność WCAG 2.1 AA dla zawartości edukacyjnej
- Kompatybilność z czytnikami ekranu dla materiałów kursu
- Nawigacja klawiaturowa dla wszystkich elementów interaktywnych
- Napisy zamknięte dla zawartości wideo
- Dostarczanie zawartości w wielu formatach


Scenariusze użytkowników:
1. Niewidomy student używający czytnika ekranu NVDA
2. Student niedowidzący z powiększeniem ekranu
3. Student z niepełnosprawnością motoryczną używający tylko klawiatury
4. Głuchy student wymagający napisów i transkrypcji
5. Student z niepełnosprawnością poznawczą potrzebujący jasnej nawigacji


Oczekiwane wyniki:
- Audyt dostępności zawartości kursu
- Ocena dostępności wideo i mediów
- Walidacja dostępności ocen i quizów
- Dostępność śledzenia postępów studentów
- Ewaluacja dostępności narzędzi instruktorskich"

Dostępność strony rządowej

Dział zatytułowany „Dostępność strony rządowej”
Okno terminala
# PRD: Zgodność Section 508 dla strony rządowej
"Testuj stronę rządową pod kątem zgodności Section 508:


Wymagania zgodności:
- Przestrzeganie standardów Section 508
- Walidacja zgodności WCAG 2.1 AA
- Dostępność dokumentów PDF
- Dostępność formularzy dla usług obywatelskich
- Wielojęzyczna obsługa dostępności


Krytyczne usługi:
- Aplikacje usług online
- Pobieranie dokumentów i formularzów
- Dostęp do informacji publicznych
- Alerty i powiadomienia awaryjne
- Systemy kontaktu i wsparcia


Wygeneruj raport zgodności z:
- Walidacją listy kontrolnej Section 508
- Przygotowaniem oświadczenia dostępności
- Harmonogramem napraw i kosztami
- Rekomendacjami szkolenia personelu
- Procedurami ciągłego monitorowania"

Najlepsze praktyki testowania dostępności

Dział zatytułowany „Najlepsze praktyki testowania dostępności”

Testuj wcześnie i często

Integruj testowanie dostępności od fazy projektowania. Używaj serwerów A11y MCP do przewidywania problemów przed implementacją.

Łącz automatyczne i ręczne

AI nie może wychwycić wszystkiego. Używaj go do kierowania testami ręcznymi i skupiania ludzkiego wysiłku tam, gdzie ma największe znaczenie.

Feedback rzeczywistych użytkowników

Współpracuj z użytkownikami z niepełnosprawnościami. AI może symulować, ale prawdziwe doświadczenie jest nieocenione.

Ciągłe uczenie się

Używaj serwerów A11y MCP do budowania instytucjonalnej wiedzy o dostępności i ciągłego doskonalenia.

Następne kroki

Dział zatytułowany „Następne kroki”
Testowanie mobilne Testuj aplikacje mobilne z automatyzacją chmury urządzeń
Testowanie wydajności Testowanie obciążenia i stresu z automatyzacją wspieraną przez AI
Testowanie bezpieczeństwa Skanowanie bezpieczeństwa i wykrywanie luk
Ekosystem MCP Poznaj serwery MCP do automatyzacji testowania