[{"data":1,"prerenderedAt":271},["ShallowReactive",2],{"docs:\u002Fdocs\u002Faccessibility":3},{"id":4,"title":5,"body":6,"description":262,"extension":263,"meta":264,"navigation":265,"path":266,"rawbody":267,"seo":268,"stem":269,"__hash__":270},"docs\u002Fdocs\u002Faccessibility.md","Accessibility",{"type":7,"value":8,"toc":255},"minimark",[9,14,23,69,72,75,108,111,159,163,185,192,196,203,207,216,220,251],[10,11,13],"h2",{"id":12},"reduced-motion","Reduced motion",[15,16,17,18,22],"p",{},"With ",[19,20,21],"code",{},"prefers-reduced-motion: reduce",", Kinesis:",[24,25,26,30,46,66],"ul",{},[27,28,29],"li",{},"holds pointer effects at rest: parallax, tilt, magnetic, repel, follow, look, point, and spin",[27,31,32,33,36,37,36,40,36,43],{},"holds the transform outputs of reactions at rest: ",[19,34,35],{},"--k-x",", ",[19,38,39],{},"--k-y",[19,41,42],{},"--k-rotate",[19,44,45],{},"--k-scale",[27,47,48,49,36,52,36,55,36,58,61,62,65],{},"keeps reactions that don't move anything: ",[19,50,51],{},"--k-opacity",[19,53,54],{},"--k-color",[19,56,57],{},"--k-background",[19,59,60],{},"--k-blur",", and ",[19,63,64],{},"--k-progress",", so a reveal still fades in and a pressed button still changes color",[27,67,68],{},"keeps drag working, without momentum: a release stops in place, or returns home instantly",[15,70,71],{},"If the preference changes while the page is open, motion stops or resumes immediately.",[15,73,74],{},"To override the policy, for example in a game where motion is the content:",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-js shiki shiki-themes github-dark-default","initKinesis({ reducedMotion: \"never\" })   \u002F\u002F or \"always\", or \"user\" (default)\n","js","",[19,83,84],{"__ignoreMap":81},[85,86,89,93,97,101,104],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"sc3cj","initKinesis",[85,94,96],{"class":95},"sZEs4","({ reducedMotion: ",[85,98,100],{"class":99},"s9uIt","\"never\"",[85,102,103],{"class":95}," })   ",[85,105,107],{"class":106},"sH3jZ","\u002F\u002F or \"always\", or \"user\" (default)\n",[15,109,110],{},"Or write your own reduced version in CSS:",[76,112,116],{"className":113,"code":114,"language":115,"meta":81,"style":81},"language-css shiki shiki-themes github-dark-default","@media (prefers-reduced-motion: reduce) {\n  .hero__art { --k-parallax: 4px; }\n}\n","css",[19,117,118,127,153],{"__ignoreMap":81},[85,119,120,124],{"class":87,"line":88},[85,121,123],{"class":122},"suJrU","@media",[85,125,126],{"class":95}," (prefers-reduced-motion: reduce) {\n",[85,128,130,134,137,141,144,147,150],{"class":87,"line":129},2,[85,131,133],{"class":132},"sFSAA","  .hero__art",[85,135,136],{"class":95}," { ",[85,138,140],{"class":139},"sQhOw","--k-parallax",[85,142,143],{"class":95},": ",[85,145,146],{"class":132},"4",[85,148,149],{"class":122},"px",[85,151,152],{"class":95},"; }\n",[85,154,156],{"class":87,"line":155},3,[85,157,158],{"class":95},"}\n",[10,160,162],{"id":161},"keyboard","Keyboard",[24,164,165,176,182],{},[27,166,167,168,171,172,175],{},"A ",[19,169,170],{},"hover"," reaction also turns on with keyboard focus (",[19,173,174],{},":focus-visible",").",[27,177,167,178,181],{},[19,179,180],{},"press"," reaction responds to Enter and Space.",[27,183,184],{},"A focused draggable element moves with the arrow keys.",[15,186,187,188,191],{},"Kinesis never adds ",[19,189,190],{},"tabindex",", roles, or event handlers to elements it doesn't animate. If dragging is essential, make the element focusable, label it, and offer another way to do the same thing.",[10,193,195],{"id":194},"touch","Touch",[15,197,198,199,202],{},"Pointer effects follow a finger while it is down and settle when it lifts. Touch never turns on hover. Draggable elements get the right ",[19,200,201],{},"touch-action",", so the page still scrolls around them.",[10,204,206],{"id":205},"screen-readers","Screen readers",[15,208,209,210,215],{},"Kinesis doesn't change the document's structure or text. ",[211,212,214],"a",{"href":213},"\u002Fdocs\u002Ftext\u002F","Text splitting"," keeps the text readable and hides the animated letters from assistive technology.",[10,217,219],{"id":218},"good-practice","Good practice",[24,221,222,225,244],{},[27,223,224],{},"Don't put information only in motion.",[27,226,227,228,231,232,235,236,239,240,243],{},"Keep amplitudes small on controls. A magnetic button that drifts 40px from where it was is hard to click. ",[19,229,230],{},"--k-magnetic"," between ",[19,233,234],{},"0.2"," and ",[19,237,238],{},"0.4",", with ",[19,241,242],{},"--k-limit",", is enough.",[27,245,246,247,250],{},"Avoid continuous motion across large areas. Full-page parallax can cause discomfort for people with vestibular disorders, even without reduced motion turned on. ",[19,248,249],{},"--k-intensity"," keeps it subtle.",[252,253,254],"style",{},"html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}",{"title":81,"searchDepth":155,"depth":155,"links":256},[257,258,259,260,261],{"id":12,"depth":129,"text":13},{"id":161,"depth":129,"text":162},{"id":194,"depth":129,"text":195},{"id":205,"depth":129,"text":206},{"id":218,"depth":129,"text":219},"Defaults for reduced motion, keyboard, touch, and screen readers, and what is left to you.","md",{},true,"\u002Fdocs\u002Faccessibility","---\ntitle: Accessibility\ndescription: Defaults for reduced motion, keyboard, touch, and screen readers, and what is left to you.\n---\n\n## Reduced motion\n\nWith `prefers-reduced-motion: reduce`, Kinesis:\n\n- holds pointer effects at rest: parallax, tilt, magnetic, repel, follow, look, point, and spin\n- holds the transform outputs of reactions at rest: `--k-x`, `--k-y`, `--k-rotate`, `--k-scale`\n- keeps reactions that don't move anything: `--k-opacity`, `--k-color`, `--k-background`, `--k-blur`, and `--k-progress`, so a reveal still fades in and a pressed button still changes color\n- keeps drag working, without momentum: a release stops in place, or returns home instantly\n\nIf the preference changes while the page is open, motion stops or resumes immediately.\n\nTo override the policy, for example in a game where motion is the content:\n\n```js\ninitKinesis({ reducedMotion: \"never\" })   \u002F\u002F or \"always\", or \"user\" (default)\n```\n\nOr write your own reduced version in CSS:\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  .hero__art { --k-parallax: 4px; }\n}\n```\n\n## Keyboard\n\n- A `hover` reaction also turns on with keyboard focus (`:focus-visible`).\n- A `press` reaction responds to Enter and Space.\n- A focused draggable element moves with the arrow keys.\n\nKinesis never adds `tabindex`, roles, or event handlers to elements it doesn't animate. If dragging is essential, make the element focusable, label it, and offer another way to do the same thing.\n\n## Touch\n\nPointer effects follow a finger while it is down and settle when it lifts. Touch never turns on hover. Draggable elements get the right `touch-action`, so the page still scrolls around them.\n\n## Screen readers\n\nKinesis doesn't change the document's structure or text. [Text splitting](\u002Fdocs\u002Ftext\u002F) keeps the text readable and hides the animated letters from assistive technology.\n\n## Good practice\n\n- Don't put information only in motion.\n- Keep amplitudes small on controls. A magnetic button that drifts 40px from where it was is hard to click. `--k-magnetic` between `0.2` and `0.4`, with `--k-limit`, is enough.\n- Avoid continuous motion across large areas. Full-page parallax can cause discomfort for people with vestibular disorders, even without reduced motion turned on. `--k-intensity` keeps it subtle.\n",{"title":5,"description":262},"docs\u002Faccessibility","rUqLcaF1PWXgznXAh_ZHAAIFjDNeJ0E-5R_ec9TuJjo",1791309903089]