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

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

Пройти цей тест
  1. 1.Що означає вебдоступність (a11y)?
  2. 2.Кому корисні доступні інтерфейси?
  3. 3.Що таке WCAG?
  4. 4.Які чотири принципи WCAG?
  5. 5.Який рівень відповідності WCAG обирає більшість законів і компаній?
  6. 6.Що робить скринрідер?
  7. 7.Які скринрідери зазвичай використовують для тестування?
  8. 8.Чому варто використовувати <button>, а не <div onclick>?
  9. 9.Що не так із цим елементом керування?
  10. 10.Для чого потрібен атрибут alt у зображення?
  11. 11.Який alt має бути в суто декоративного зображення?
  12. 12.Зображення не має атрибута alt. Що може оголосити скринрідер?
  13. 13.Який alt найкращий для графіка, де продажі зросли на 20% у III кварталі?
  14. 14.Чому важливий порядок заголовків (h1, h2, h3)?
  15. 15.Потрібен менший текст. Чи можна поставити h4 одразу після h1?
  16. 16.Що таке орієнтири (landmarks) на кшталт <main> і <nav>?
  17. 17.Що робить посилання «Перейти до вмісту» (skip link)?
  18. 18.Як клавіатурні користувачі рухаються між інтерактивними елементами?
  19. 19.Які елементи фокусуються за замовчуванням?
  20. 20.Чому *:focus { outline: none; } - це проблема?
  21. 21.У чому допомагає :focus-visible?
  22. 22.Що робить tabindex="0"?
  23. 23.Що робить tabindex="-1"?
  24. 24.Чому варто уникати додатних значень на кшталт tabindex="5"?
  25. 25.Як правильно зв'язати підпис із полем?
  26. 26.Чому placeholder не замінює підпис?
  27. 27.Для чого потрібні <fieldset> і <legend>?
  28. 28.Форма позначає невалідне поле лише червоною рамкою. У чому проблема?
  29. 29.Як слід позначати обов'язкове поле?
  30. 30.Як autocomplete="email" допомагає доступності?
  31. 31.Коли брати посилання, а коли кнопку?
  32. 32.Чому «Натисніть тут» - поганий текст посилання?
  33. 33.Який коефіцієнт контрасту вимагає WCAG AA для звичайного тексту?
  34. 34.Який мінімальний контраст діє для великого тексту за WCAG AA?
  35. 35.Чому колір не має бути єдиним способом передати інформацію?
  36. 36.Чому user-scalable=no у метатегу viewport шкодить?
  37. 37.Чому для розміру шрифту rem часто кращий за px?
  38. 38.Навіщо задавати lang в елементі <html>?
  39. 39.Чому кожній сторінці потрібен унікальний описовий <title>?
  40. 40.Яке перше правило ARIA?
  41. 41.Що насправді змінює ARIA?
  42. 42.Кнопка закриття має лише значок без тексту. Як дати їй ім'я?
  43. 43.Що робить aria-hidden="true"?
  44. 44.Чи читає скринрідер елемент із display: none?
  45. 45.Для чого потрібен клас візуального приховування (sr-only)?
  46. 46.Що дає role="button" на div?
  47. 47.Що aria-expanded повідомляє користувачу скринрідера?
  48. 48.Для чого використовують aria-current="page"?
  49. 49.Тост показує «Збережено», а скринрідери мовчать. Що це виправить?
  50. 50.Для чого потрібен prefers-reduced-motion?
  51. 51.Чому WCAG обмежує контент, що блимає?
  52. 52.Для чого потрібні субтитри у відео?
  53. 53.Чому автозапуск звуку - це проблема?
  54. 54.Який мінімальний розмір цілі задає WCAG 2.2 AA для вказівних елементів?
  55. 55.Які клавіші мають активувати кнопку?
  56. 56.Якою клавішею користувачі очікують закрити модальне вікно?
  57. 57.Куди має перейти фокус при відкритті модального вікна?
  58. 58.Куди має перейти фокус після закриття модального вікна?
  59. 59.Як розмітити заголовні клітинки таблиці даних?
  60. 60.Чому не варто верстати сторінку через <table>?
  61. 61.Навіщо розмічати список через <ul> і <li>?
  62. 62.Що дає <details> із <summary>?
  63. 63.Сайт отримав 100 балів за доступність у Lighthouse. Що це доводить?
  64. 64.Який ручний тест доступності найпростіший?
  65. 65.Чому getByRole("button", { name: "Save" }) робить тести кращими для a11y?
  66. 66.Для чого використовують axe?
  67. 67.Що робить eslint-plugin-jsx-a11y?
  68. 68.Що вимагає European Accessibility Act?
  69. 69.Навіщо перевіряти контраст і в темній темі?
  70. 70.Чому вміст, що з'являється лише на :hover, - це проблема?
  71. 71.Як доступно стилізувати власний чекбокс?
  72. 72.Чому форма має бути справжнім <form> із кнопкою надсилання?
  73. 73.Чому фокус чи введення не мають самі змінювати контекст, як-от автонадсилання?
  74. 74.Що таке клавіатурна пастка?
  75. 75.Чому CSS order чи flex-direction: row-reverse можуть створити проблеми?