🍕 Баг вартістю в мільйони: Чому QA зобов'язаний вимкнути мишку (Accessibility Testing)Привіт, екіпаж! Неділя — час поговорити про те, як IT впливає на реальних людей. ☕️Уявіть ситуацію: п'ятниця, вечір, ви хочете замовити піцу. Заходите на сайт, а там... неможливо натиснути кнопку "Оплатити". Ви злитесь і йдете до конкурентів.Саме це сталося з Гільєрмо Роблесом у 2016 році на сайті Domino's Pizza. Але був нюанс — Гільєрмо сліпий. Він користувався Screen Reader'ом (програмою, що читає екран), а розробники Domino's забули додати текстові мітки до кнопок. Програма просто озвучувала сліпому юзеру: "Кнопка. Кнопка. Графіка".Гільєрмо подав на Domino's до суду і виграв справу. Компанія витратила роки на суди, отримала величезні репутаційні збитки і все одно була змушена переписати сайт.У західному IT тестування доступності (a11y — від літери 'a', 11 літер між ними, і 'y') — це не благодійність, це суворий закон (ADA в США, EAA в Європі). Якщо ваш продукт не доступний для людей з інвалідністю — вас засудять.Як Manual QA може протестувати Accessibility прямо зараз?Вам не потрібні складні автотести. Достатньо зробити три прості кроки:🚫🖱Челендж "Без мишки" (Keyboard Navigation)Вимкніть мишку та тачпад. Відкрийте ваш проєкт і спробуйте пройти головний флоу (наприклад, реєстрацію або покупку), використовуючи тільки клавішу Tab (для переходу вперед), Shift+Tab (назад) і Enter (для кліку).Що шукати: Чи видно "фокус" (рамку) навколо активної кнопки? Чи не застряг ваш курсор у невидимому вікні (Keyboard Trap)? Чи можна взагалі дійти до кнопки "Купити"? 🎧 Тест із заплющеними очима (Screen Reader)У Windows є вбудований Narrator (або популярний NVDA), у macOS — VoiceOver.Увімкніть його, заплющте очі і спробуйте зрозуміти, що знаходиться на екрані.Що шукати: Якщо замість "Додати в кошик", читалка каже "іконка кошика крапка пнг" — фронтендер забув прописати атрибути alt для картинок або aria-label для кнопок. Для сліпого користувача ваш сайт — це чорна діра. 👁 Тест на контрастність (Color Contrast)Люди з порушеннями зору (або просто на яскравому сонці) не бачать світло-сірий текст на білому тлі.Як тестувати: Відкрийте Chrome DevTools -> вкладка Lighthouse -> поставте галочку Accessibility і натисніть Analyze. Браузер сам покаже вам місця, де дизайнер перемудрував із "повітряними та ніжними" кольорами, порушивши стандарти WCAG. Висновок:Коли ви перевіряєте alt-тексти або навігацію з клавіатури, ви не просто робите нудну рутину за чек-листом. Ви буквально даєте можливість людині з інвалідністю жити повноцінним життям (і рятуєте свою компанію від позову на мільйон доларів).А у вас на проєкті приділяють увагу a11y? 👇🔥 — Так, у нас суворі вимоги до доступності, тестуємо регулярно!👀 — Іноді Lighthouse ганяємо, але без фанатизму.🤯 — Яка клавіатура? У нас би "щасливий шлях" мишкою пройти без крашів!