Питання на співбесіді з доступності з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Доступність · Junior

1. Що означає вебдоступність (a11y)?
   ▸Показати відповідь

   Правильна відповідь: Сайтом можуть користуватися люди з будь-якими можливостями й пристроями

   Доступність означає, що люди з порушеннями зору, слуху, моторики чи когнітивних функцій можуть сприймати, розуміти й використовувати сайт. «a11y» - скорочення: a, 11 літер, y.

2. Кому корисні доступні інтерфейси?
   ▸Показати відповідь

   Правильна відповідь: Усім, зокрема людям із тимчасовими обмеженнями

   Зламана рука, яскраве сонце чи шумний потяг створюють ті самі бар'єри, що й постійна інвалідність. Субтитри, контраст і клавіатура допомагають усім цим людям.

3. Що таке WCAG?
   ▸Показати відповідь

   Правильна відповідь: Настанови W3C щодо доступності вебконтенту

   Web Content Accessibility Guidelines задають критерії успіху, які можна перевірити. Версія 2.2 - чинна рекомендація W3C, а закони й контракти часто посилаються на неї або на 2.1.

4. Які чотири принципи WCAG?
   ▸Показати відповідь

   Правильна відповідь: Сприйманість, керованість, зрозумілість, надійність

   Їх називають POUR. Користувачі мають могти сприймати контент, керувати інтерфейсом, розуміти його й покладатися на роботу з допоміжними технологіями.

Доступність · Middle

1. Що таке дерево доступності?
   ▸Показати відповідь

   Правильна відповідь: Структура браузера з ролей, імен і станів, побудована з DOM

   Допоміжні технології читають це дерево через API платформи, а не DOM напряму. DevTools у Chrome і Firefox дають змогу оглянути його для будь-якого елемента.

2. Яке джерело зазвичай перемагає при обчисленні доступного імені?
   ▸Показати відповідь

   Правильна відповідь: aria-labelledby, потім aria-label, потім нативні підписи й вміст

   Обчислення має визначений порядок. aria-labelledby переважає все, тож застаріле посилання може тихо замінити добрий видимий підпис.

3. Чим відрізняються aria-labelledby і aria-describedby?
   ▸Показати відповідь

   Правильна відповідь: Перший задає ім'я; другий додає допоміжний опис

   Ім'я каже, що це за елемент, і оголошується завжди. Опис додає подробиці, як-от формат, а користувачі можуть налаштувати, чи його чути.

4. Чому краще aria-labelledby на видимий текст, ніж aria-label?
   ▸Показати відповідь

   Правильна відповідь: Видимий текст лишається актуальним і перекладається зі сторінкою

   aria-label легко забути оновити, а браузерні перекладачі можуть його пропустити. Повторне використання видимого тексту дає єдине джерело правди.

Доступність · Senior

1. Як інформація потрапляє з DOM до скринрідера?
   ▸Показати відповідь

   Правильна відповідь: Браузер віддає дерево доступності через API платформи

   Браузери відображають ролі й стани на API на кшталт UI Automation у Windows чи AX API у macOS. Тому результати різняться між парами браузера й скринрідера.

2. Яка з цих ролей отримує ім'я зі свого вмісту?
   ▸Показати відповідь

   Правильна відповідь: button, а textbox потребує підпису ззовні

   Ролі на кшталт button і link дозволяють ім'я з вмісту. Textbox - ні, бо його вміст - це значення користувача.

3. Чи може aria-describedby вказувати на елемент з атрибутом hidden?
   ▸Показати відповідь

   Правильна відповідь: Так, прихований вміст за посиланням усе одно враховується

   Обчислення імені й опису враховує приховані вузли, якщо на них є пряме посилання. Це зручно для опису, якого не має бути на екрані.

4. Модальне вікно ставить aria-hidden="true" на #app, але фокус досі всередині #app. Що станеться?
   ▸Показати відповідь

   Правильна відповідь: Фокус у прихованому вмісті; Chrome може навіть заблокувати атрибут

   Спершу перенесіть фокус. Chrome попереджає й ігнорує aria-hidden, коли нащадок має фокус. Краще inert, що прибирає й фокус.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.