[{"data":1,"prerenderedAt":296},["ShallowReactive",2],{"docs:\u002Fdocs\u002Ffoundations\u002Fa11y":3},{"id":4,"title":5,"body":6,"component":283,"dependsOn":284,"description":285,"emitDescriptions":286,"extension":287,"meta":288,"navigation":289,"order":290,"path":291,"seo":292,"status":293,"stem":294,"__hash__":295},"docs\u002Fdocs\u002Ffoundations\u002Fa11y.md","Контракт доступності",{"type":7,"value":8,"toc":271},"minimark",[9,13,18,25,40,51,55,70,100,115,119,133,137,143,147,150,186,193,197,208,222,234,237,241,261,265],[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],{},"Нижче цього палець промахується. Але «44px» — про ЦІЛЬОВУ ЗОНУ, а не про\nвидиму висоту: збільшувати заливку кнопки заради дотику означає втратити\nієрархію розмірів і щільність панелей. Тому контракт бібліотеки такий:",[151,152,153,165,179],"ul",{},[154,155,156,157,160,161,164],"li",{},"Поля вводу на мобільному фізично 45px (",[21,158,159],{},"h-12"," за кореня 15px) і текст\n16px — iOS Safari не зумує сторінку при фокусі; ",[21,162,163],{},"md:"," повертає щільні\nдесктопні висоти.",[154,166,167,168,171,172,175,176,99],{},"Кнопки й сегменти залишають ієрархію (sm 9 \u002F md 10 \u002F lg 12 на\nмобільному), а точність дотику тримає ",[107,169,170],{},"невидима"," зона 45×45 через\n",[21,173,174],{},"pointer-coarse:after:"," — той самий прийом, що в ",[21,177,178],{},"UiSwitch",[154,180,181,182,185],{},"Пункти випадайок і меню — щільні рядки з паддінгом ",[21,183,184],{},"py-3"," на дотику.",[10,187,188,189,192],{},"Там, де елемент мусить лишатися дрібним (перемикач у списку налаштувань),\nневидима зона 44×44 через ",[21,190,191],{},"::after"," — щільність списку не страждає.",[14,194,196],{"id":195},"оверлеї","Оверлеї",[10,198,199,200,203,204,207],{},"Панель має ",[21,201,202],{},"role=\"dialog\"",", ",[21,205,206],{},"aria-modal=\"true\""," і назву.",[10,209,210,211,214,215,218,219,99],{},"Фокус утримується всередині й повертається на елемент, з якого відкрили.\nРешта прямих дітей ",[21,212,213],{},"\u003Cbody>"," отримують ",[21,216,217],{},"inert"," і ",[21,220,221],{},"aria-hidden",[10,223,224,225,228,229,99],{},"Escape закриває ",[107,226,227],{},"лише верхній"," оверлей. Деталі — на сторінці\n",[230,231,233],"a",{"href":232},"\u002Fdocs\u002Fpatterns\u002Foverlays","Оверлеї та фокус",[10,235,236],{},"Типово фокус отримує сама панель, а не перший інпут: на мобільних автофокус\nв інпуті одразу піднімає клавіатуру і з'їдає пів екрана.",[14,238,240],{"id":239},"анімації-вимикаються","Анімації вимикаються",[10,242,243,246,247,249,250,253,254,257,258,99],{},[21,244,245],{},"prefers-reduced-motion"," вимкнено глобально в ",[21,248,30],{},". Але цього мало\nтам, де тривалість задана в JS: ",[21,251,252],{},"\u003CTransition>"," з явним ",[21,255,256],{},":duration"," тримав\nби елемент у DOM повні 300 мс навіть із вимкненими анімаціями. Для цього є\n",[21,259,260],{},"useReducedMotion()",[14,262,264],{"id":263},"опис-один-а-не-два","Опис один, а не два",[10,266,267,270],{},[21,268,269],{},"aria-describedby"," вказує рівно на один активний опис. Якщо передати і\nпідказку, і помилку, скрінрідер зачитає інструкцію, яку користувач щойно\nпорушив, раніше за причину відмови.",{"title":272,"searchDepth":273,"depth":273,"links":274},"",2,[275,276,277,278,279,280,281,282],{"id":16,"depth":273,"text":17},{"id":53,"depth":273,"text":54},{"id":117,"depth":273,"text":118},{"id":135,"depth":273,"text":136},{"id":145,"depth":273,"text":146},{"id":195,"depth":273,"text":196},{"id":239,"depth":273,"text":240},{"id":263,"depth":273,"text":264},null,[],"Мінімум, який зобов'язаний виконувати кожен компонент бібліотеки.",{},"md",{},true,3,"\u002Fdocs\u002Ffoundations\u002Fa11y",{"title":5,"description":285},"stable","docs\u002Ffoundations\u002Fa11y","j0eHzySDsYzyif0vfV0he5-deZzliCypDq2RVOu5LGQ",1789660506388]