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

75 запитань для співбесіди з теми Доступність (Middle) - з правильними відповідями, поясненнями й посиланнями на документацію.

Пройти цей тест
  1. 1.Що таке дерево доступності?
  2. 2.Яке джерело зазвичай перемагає при обчисленні доступного імені?
  3. 3.Чим відрізняються aria-labelledby і aria-describedby?
  4. 4.Чому краще aria-labelledby на видимий текст, ніж aria-label?
  5. 5.Що тут не так?
  6. 6.Чому <nav role="navigation"> зайве?
  7. 7.Чому <button role="link"> може бути поганою ідеєю?
  8. 8.На сторінці два <nav>. Що робити?
  9. 9.Коли <section> стає орієнтиром?
  10. 10.Як зв'язати помилку поля з самим полем?
  11. 11.Нативний required чи aria-required: що обрати?
  12. 12.Який патерн добрий після невдалого надсилання довгої форми?
  13. 13.Чому варто перевіряти поле при втраті фокусу чи надсиланні, а не на кожну клавішу?
  14. 14.Чим aria-live="polite" відрізняється від assertive?
  15. 15.Чому новий елемент із role="alert" не завжди оголошується?
  16. 16.Чим role="status" відрізняється від role="alert"?
  17. 17.Чому перехід у React Router чи Next.js для скринрідера не схожий на повне завантаження сторінки?
  18. 18.Куди зазвичай має перейти фокус після клієнтського переходу?
  19. 19.Користувач видаляє пункт списку, а фокус був на його кнопці Delete. Що має статися?
  20. 20.Яка поведінка клавіатури очікується у вкладках (role="tablist")?
  21. 21.Що таке roving tabindex?
  22. 22.Коли беруть aria-activedescendant замість roving tabindex?
  23. 23.Чи має головна навігація сайту використовувати role="menu"?
  24. 24.Як зробити доступний випадний список навігаційних посилань?
  25. 25.Що має містити заголовок акордеона?
  26. 26.Що правильно щодо підказок (tooltip)?
  27. 27.Вміст при наведенні має відповідати трьом умовам WCAG 1.4.13. Яким?
  28. 28.Як показати допоміжним технологіям стан кнопки-перемикача?
  29. 29.Коли брати role="switch", а не чекбокс?
  30. 30.Які атрибути потрібні власному модальному вікну?
  31. 31.Що робить атрибут inert?
  32. 32.Навіщо рендерити власне модальне вікно через React portal?
  33. 33.Яку роль має діалог підтвердження на кшталт «Видалити проєкт?»?
  34. 34.Sticky-шапка закриває елемент у фокусі після Tab. Що це виправить?
  35. 35.Який контраст вимагає WCAG для індикатора фокусу чи рамки поля?
  36. 36.Чи мають вимкнені елементи відповідати вимогам контрасту?
  37. 37.Чим відрізняються disabled і aria-disabled="true"?
  38. 38.Що таке режим примусових кольорів (forced colors)?
  39. 39.Чим ризикований стиль фокусу лише через box-shadow?
  40. 40.Що визначає медіазапит prefers-contrast: more?
  41. 41.Що вимагає WCAG 1.4.10 Reflow?
  42. 42.Що перевіряє критерій Text Spacing?
  43. 43.Чому сайт не має фіксувати лише портретну орієнтацію?
  44. 44.Що вимагає критерій Pointer Cancellation?
  45. 45.Канбан-дошка використовує перетягування. Що вимагає WCAG 2.2?
  46. 46.Чому має запобігати критерій Redundant Entry?
  47. 47.Чому форма входу має дозволяти вставку пароля?
  48. 48.Що має пропонувати тайм-аут сесії?
  49. 49.Кнопка показує «Пошук», але має aria-label="Знайти товари". Чому це проблема?
  50. 50.Як позначити французьку фразу на англійській сторінці?
  51. 51.Як показати змістовний вбудований SVG допоміжним технологіям?
  52. 52.Фото через CSS background-image несе зміст. У чому проблема?
  53. 53.Як добре показати стовпець таблиці, який можна сортувати?
  54. 54.Що елемент <caption> дає таблиці?
  55. 55.Чому display: block на таблиці може зламати доступність?
  56. 56.Прокручуваний блок коду чи таблиця недосяжні з клавіатури. Що допоможе?
  57. 57.Як розмітити хлібні крихти?
  58. 58.Чому нескінченне прокручування може бути бар'єром?
  59. 59.Куди має йти фокус, коли «Завантажити ще» додає пункти?
  60. 60.Що сигналізує aria-busy="true"?
  61. 61.Віртуалізований список рендерить 20 із 10 000 пунктів. Що допоможе скринрідерам?
  62. 62.Чому карусель з автопрокруткою - це проблема?
  63. 63.Що правильно щодо віджетів-оверлеїв доступності?
  64. 64.Як скринрідери зазвичай читають сторінку на десктопі?
  65. 65.Які пари браузера й скринрідера зазвичай тестують?
  66. 66.Як запустити axe у тестах Playwright?
  67. 67.Яке обмеження має jest-axe у jsdom?
  68. 68.Скільки приблизно знаходять автоматичні інструменти?
  69. 69.Як useId допомагає у формах React?
  70. 70.Чому зміна key у списку може загубити клавіатурний фокус?
  71. 71.Чому багато команд беруть headless-примітиви на кшталт Radix для віджетів?
  72. 72.Що таке заява про доступність?
  73. 73.На якому етапі розробки доступність обходиться найдешевше?
  74. 74.У чому допомагає autocomplete="one-time-code"?
  75. 75.Чи мають посилання, що відкриваються в новій вкладці, попереджати про це?