Pytania rekrutacyjne z dostępności z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

Dostępność · Junior

1. Co oznacza dostępność cyfrowa (a11y)?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Ze strony mogą korzystać ludzie o różnych możliwościach

   Dostępność oznacza, że osoby z niepełnosprawnością wzroku, słuchu, ruchu lub poznawczą mogą odbierać, rozumieć i obsługiwać stronę. „a11y” to skrót: a, 11 liter, y.

2. Komu pomagają dostępne interfejsy?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Wszystkim, także osobom z chwilowymi ograniczeniami

   Złamana ręka, ostre słońce czy hałas w pociągu tworzą te same bariery co trwała niepełnosprawność. Napisy, kontrast i klawiatura pomagają wszystkim tym osobom.

3. Czym jest WCAG?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Wytycznymi W3C dotyczącymi dostępności treści w sieci

   Web Content Accessibility Guidelines definiują sprawdzalne kryteria sukcesu. Wersja 2.2 to aktualna rekomendacja W3C, a przepisy i umowy często odwołują się do niej lub do 2.1.

4. Jakie są cztery zasady WCAG?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Postrzegalność, funkcjonalność, zrozumiałość, solidność

   To tak zwane POUR. Użytkownicy muszą móc odbierać treść, obsługiwać interfejs, rozumieć go i polegać na jego współpracy z technologiami wspomagającymi.

Dostępność · Middle

1. Czym jest drzewo dostępności?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Strukturą przeglądarki z ról, nazw i stanów zbudowaną z DOM

   Technologie wspomagające czytają to drzewo przez API platformy, a nie bezpośrednio DOM. DevTools w Chrome i Firefoksie pozwalają je obejrzeć dla każdego elementu.

2. Które źródło zwykle wygrywa przy obliczaniu nazwy dostępnej?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: aria-labelledby, potem aria-label, potem natywne etykiety i treść

   Obliczanie ma określoną kolejność. aria-labelledby nadpisuje wszystko, więc nieaktualne odwołanie może po cichu zastąpić dobrą widoczną etykietę.

3. Czym różnią się aria-labelledby i aria-describedby?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Pierwszy ustala nazwę; drugi dodaje opis uzupełniający

   Nazwa mówi, czym jest kontrolka, i jest zawsze ogłaszana. Opis dodaje szczegóły, np. format, a użytkownicy mogą ustawić, czy go słyszą.

4. Dlaczego lepiej aria-labelledby wskazujący widoczny tekst niż aria-label?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Widoczny tekst pozostaje aktualny i tłumaczy się ze stroną

   O aria-label łatwo zapomnieć przy zmianach, a tłumacze w przeglądarkach mogą go pominąć. Użycie widocznego tekstu daje jedno źródło prawdy.

Dostępność · Senior

1. Jak informacja trafia z DOM do czytnika ekranu?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Przeglądarka daje drzewo dostępności przez API systemu

   Przeglądarki mapują role i stany na API, takie jak UI Automation w Windowsie czy AX API w macOS. Dlatego wyniki różnią się między parami przeglądarki i czytnika.

2. Która z tych ról bierze nazwę ze swojej treści?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: button, a textbox potrzebuje etykiety z zewnątrz

   Role takie jak button i link pozwalają na nazwę z treści. Textbox nie, bo jego treść to wartość użytkownika.

3. Czy aria-describedby może wskazywać element z atrybutem hidden?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Tak, wskazana ukryta treść nadal się liczy

   Obliczanie nazwy i opisu uwzględnia ukryte węzły, jeśli wskazano je wprost. To wygodne dla opisu, którego nie powinno być na ekranie.

4. Okno modalne ustawia aria-hidden="true" na #app, ale fokus wciąż jest w #app. Co się stanie?
   ▸Pokaż odpowiedź

   Poprawna odpowiedź: Fokus trafia w ukrytą treść; Chrome może nawet zablokować atrybut

   Najpierw przenieś fokus. Chrome ostrzega i ignoruje aria-hidden, gdy potomek ma fokus. Lepszy jest inert, który usuwa też fokus.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.