[{"data":1,"prerenderedAt":275},["ShallowReactive",2],{"docs:\u002Fdocs\u002Ffoundations\u002Fa11y":3},{"id":4,"title":5,"body":6,"component":262,"dependsOn":263,"description":264,"emitDescriptions":265,"extension":266,"meta":267,"navigation":268,"order":269,"path":270,"seo":271,"status":272,"stem":273,"__hash__":274},"docs\u002Fdocs\u002Ffoundations\u002Fa11y.md","Контракт доступності",{"type":7,"value":8,"toc":250},"minimark",[9,13,18,25,40,51,55,70,100,115,119,133,137,143,147,161,172,176,187,201,213,216,220,240,244],[10,11,12],"p",{},"Це не побажання, а перелік того, що має бути в кожному компоненті. Більшість\nпунктів тут з'явилися тому, що в одному з вихідних проєктів вони були\nпорушені.",[14,15,17],"h2",{"id":16},"фокус-завжди-видимий","Фокус завжди видимий",[10,19,20,24],{},[21,22,23],"code",{},"focus:outline-none"," без заміни — заборонено. Керування з клавіатури стає\nсліпим: користувач тисне Tab і не бачить, де він.",[10,26,27,28,31,32,35,36,39],{},"Базовий рівень задано глобально в ",[21,29,30],{},"main.css"," (",[21,33,34],{},":focus-visible { outline }",").\nКомпонент може замінити його на ",[21,37,38],{},"focus-visible:ring-*",", але не прибрати.",[10,41,42,43,46,47,50],{},"Кільце малюється токеном ",[21,44,45],{},"--ring"," і має ",[21,48,49],{},"ring-offset"," — інакше на суцільній\nкнопці воно зливається з її ж заливкою.",[14,52,54],{"id":53},"семантичний-тег-обирається-за-поведінкою","Семантичний тег обирається за поведінкою",[10,56,57,58,61,62,65,66,69],{},"Клікабельний елемент — ",[21,59,60],{},"\u003Cbutton>",", навігаційний — ",[21,63,64],{},"\u003Ca>",". ",[21,67,68],{},"\u003Cdiv @click>","\nнедоступний із клавіатури й не має ролі.",[10,71,72,73,76,77,80,81,83,84,87,88,91,92,95,96,99],{},"Саме тому ",[21,74,75],{},"UiChip"," рендериться як ",[21,78,79],{},"\u003Cspan>"," або ",[21,82,60],{}," залежно від\n",[21,85,86],{},"clickable",", а ",[21,89,90],{},"UiButton"," перетворюється на ",[21,93,94],{},"NuxtLink",", коли задано ",[21,97,98],{},"to",".",[10,101,102,103,87,106,110,111,114],{},"Недоступна дія — це ",[21,104,105],{},"\u003Cbutton disabled>",[107,108,109],"strong",{},"не"," посилання з\n",[21,112,113],{},"pointer-events-none",": таке посилання лишається в порядку обходу Tab і\nспрацьовує на Enter.",[14,116,118],{"id":117},"стан-не-передається-лише-кольором","Стан не передається лише кольором",[10,120,121,122,124,125,128,129,132],{},"Дальтонік і скрінрідер не бачать тону. Якщо ",[21,123,75],{}," показує статус\nкрапкою — потрібен ",[21,126,127],{},"label",". Якщо перемикач увімкнений — потрібен\n",[21,130,131],{},"aria-checked",", а не лише зелений колір.",[14,134,136],{"id":135},"імя-мають-усі-інтерактивні-елементи","Ім'я мають усі інтерактивні елементи",[10,138,139,140,142],{},"Кнопка з самою іконкою зобов'язана мати ",[21,141,127],{},". Без нього скрінрідер\nзачитає «кнопка» — і все.",[14,144,146],{"id":145},"мінімальна-ціль-дотику-44px","Мінімальна ціль дотику 44px",[10,148,149,150,153,154,87,157,160],{},"Нижче цього палець промахується. Тому на мобільних усі поля й кнопки\nзводяться до ",[21,151,152],{},"h-11","\u002F",[21,155,156],{},"h-12",[21,158,159],{},"md:"," повертає щільні десктопні розміри.",[10,162,163,164,167,168,171],{},"Там, де елемент мусить лишатися дрібним (перемикач у списку налаштувань),\nнавколо нього додається ",[107,165,166],{},"невидима"," зона 44×44 через ",[21,169,170],{},"::after"," — щільність\nсписку не страждає.",[14,173,175],{"id":174},"оверлеї","Оверлеї",[10,177,178,179,182,183,186],{},"Панель має ",[21,180,181],{},"role=\"dialog\"",", ",[21,184,185],{},"aria-modal=\"true\""," і назву.",[10,188,189,190,193,194,197,198,99],{},"Фокус утримується всередині й повертається на елемент, з якого відкрили.\nРешта прямих дітей ",[21,191,192],{},"\u003Cbody>"," отримують ",[21,195,196],{},"inert"," і ",[21,199,200],{},"aria-hidden",[10,202,203,204,207,208,99],{},"Escape закриває ",[107,205,206],{},"лише верхній"," оверлей. Деталі — на сторінці\n",[209,210,212],"a",{"href":211},"\u002Fdocs\u002Fpatterns\u002Foverlays","Оверлеї та фокус",[10,214,215],{},"Типово фокус отримує сама панель, а не перший інпут: на мобільних автофокус\nв інпуті одразу піднімає клавіатуру і з'їдає пів екрана.",[14,217,219],{"id":218},"анімації-вимикаються","Анімації вимикаються",[10,221,222,225,226,228,229,232,233,236,237,99],{},[21,223,224],{},"prefers-reduced-motion"," вимкнено глобально в ",[21,227,30],{},". Але цього мало\nтам, де тривалість задана в JS: ",[21,230,231],{},"\u003CTransition>"," з явним ",[21,234,235],{},":duration"," тримав\nби елемент у DOM повні 300 мс навіть із вимкненими анімаціями. Для цього є\n",[21,238,239],{},"useReducedMotion()",[14,241,243],{"id":242},"опис-один-а-не-два","Опис один, а не два",[10,245,246,249],{},[21,247,248],{},"aria-describedby"," вказує рівно на один активний опис. Якщо передати і\nпідказку, і помилку, скрінрідер зачитає інструкцію, яку користувач щойно\nпорушив, раніше за причину відмови.",{"title":251,"searchDepth":252,"depth":252,"links":253},"",2,[254,255,256,257,258,259,260,261],{"id":16,"depth":252,"text":17},{"id":53,"depth":252,"text":54},{"id":117,"depth":252,"text":118},{"id":135,"depth":252,"text":136},{"id":145,"depth":252,"text":146},{"id":174,"depth":252,"text":175},{"id":218,"depth":252,"text":219},{"id":242,"depth":252,"text":243},null,[],"Мінімум, який зобов'язаний виконувати кожен компонент бібліотеки.",{},"md",{},true,3,"\u002Fdocs\u002Ffoundations\u002Fa11y",{"title":5,"description":264},"stable","docs\u002Ffoundations\u002Fa11y","cxPk3Tnljr6M_7ydL2TJG7HmM89h2wOaAjm45g8E1eU",1788072641376]