0Pricing
HTML Academy · Lekcja

Testowanie za pomocą czytników ekranu

Weryfikowanie implementacji ARIA za pomocą VoiceOver i NVDA

Testowanie za pomocą czytników ekranu to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Dlaczego warto testować z czytnikami ekranu?

Automatyczne narzędzia wykrywają tylko 30–40% problemów z dostępnością. Testowanie z rzeczywistym czytnikiem ekranu ujawnia problemy, których nie wykrywają automatyczne kontrole:

  • Niejasna kolejność odczytu
  • Nieprzydatne komunikaty ARIA
  • Brak zarządzania fokusem
  • Niejasne wzorce interakcji

VoiceOver na komputerze Mac

VoiceOver jest wbudowany w macOS — nie trzeba go instalować:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver na iOS

Testuj działanie mobilnego czytnika ekranu za pomocą VoiceOver na iPhonie lub iPadzie:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA w systemie Windows

NVDA to bezpłatny czytnik ekranu o otwartym kodzie źródłowym dla systemu Windows:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

Lista kontrolna testowania z czytnikiem ekranu

Co należy sprawdzić za pomocą czytnika ekranu:

  • Tytuł strony jest ogłaszany podczas ładowania
  • Nagłówki tworzą logiczną strukturę nawigacji
  • Wszystkie obrazy mają znaczący lub pusty tekst alternatywny alt
  • Wszystkie pola formularza mają etykiety
  • Przyciski i odsyłacze mają opisowe nazwy
  • Pułapka fokusu w oknie modalnym działa prawidłowo
  • Aktualizacje dynamicznej zawartości są ogłaszane

Typowe błędy czytników ekranu

Problemy, których nie wykrywają testy automatyczne:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

Testowanie w pierwszej kolejności za pomocą klawiatury

Przed użyciem czytnika ekranu najpierw przetestuj obsługę wyłącznie za pomocą klawiatury:

  1. Odłącz mysz lub gładzik
  2. Przejdź przez całą stronę, używając wyłącznie klawisza Tab
  3. Sprawdź, czy każdy element interaktywny jest osiągalny
  4. Sprawdź, czy wszystkie działania można wykonać za pomocą klawiatury

Narzędzia do automatycznego testowania dostępności

Uzupełnij testy ręczne narzędziami automatycznymi:

  • axe DevTools — rozszerzenie do Chrome; najdokładniejsze narzędzie do automatycznego sprawdzania
  • WAVE — wavebooth.com; wizualna nakładka na stronie
  • Lighthouse — Chrome DevTools; audyt wydajności i dostępności
  • pa11y — narzędzie CLI; doskonałe do potoków CI/CD

Informator o wzorcach ARIA

W3C ARIA Authoring Practices Guide (APG) zawiera implementacje referencyjne:

  • Accordion, Alert, Alert Dialog
  • Breadcrumb, Button, Carousel
  • Checkbox, Combobox, Dialog
  • Disclosure, Feed, Grid
  • Listbox, Menu, Menubar
  • Tab, Tooltip, Treeview

URL: w3.org/WAI/ARIA/apg/

Ciągła integracja testów dostępności

Włącz testowanie dostępności do swojego procesu pracy:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

Podsumowanie testowania

Kompletna strategia testowania dostępności:

  1. Projektowanie — sprawdź kontrast kolorów i rozmiary obszarów dotykowych
  2. Programowanie — przetestuj obsługę klawiatury i wykonaj automatyczne skanowanie za pomocą axe
  3. Przegląd — przetestuj z czytnikiem ekranu (VoiceOver + NVDA)
  4. CI/CD — użyj pa11y lub axe w automatycznym potoku
  5. Produkcja — użyj Lighthouse oraz wykonaj ręczne wyrywkowe kontrole

Szybkie sprawdzenie

Jaki odsetek problemów z dostępnością mogą wiarygodnie wykryć narzędzia automatyczne?

Podsumowanie: testowanie z czytnikiem ekranu

Najważniejsze informacje o testowaniu:

  • VoiceOver (Mac/iOS) i NVDA (Windows) są bezpłatne i niezbędne
  • Najpierw testuj obsługę wyłącznie za pomocą klawiatury, a następnie dodaj czytnik ekranu
  • Narzędzia automatyczne: axe, WAVE, Lighthouse, pa11y
  • Testy automatyczne wykrywają tylko około 30–40% problemów
  • W przypadku prawidłowych implementacji ARIA korzystaj ze wzorców APG

Często zadawane pytania

Czy lekcja „Testowanie za pomocą czytników ekranu” jest bezpłatna?

Tak — pełny tekst „Testowanie za pomocą czytników ekranu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Testowanie za pomocą czytników ekranu”?

Weryfikowanie implementacji ARIA za pomocą VoiceOver i NVDA Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Testowanie za pomocą czytników ekranu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. aria-expanded i aria-controls dla przełączników
  2. aria-selected i wzorce kart
  3. Live regions — aria-live, aria-atomic i aria-relevant
  4. Testowanie za pomocą czytników ekranu
← Powrót do HTML Academy