[{"data":1,"prerenderedAt":3083},["ShallowReactive",2],{"navigation_docs":3,"-docs-a11y-accessibility-guide":215,"-docs-a11y-accessibility-guide-surround":3078},[4,20,50,165,175,185],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-sprout",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"children":24,"page":6},"Framework Guides","\u002Fdocs\u002Fframework-guides","docs\u002F2.framework-guides",[25,30,35,40,45],{"title":26,"path":27,"stem":28,"icon":29},"Vue and Nuxt","\u002Fdocs\u002Fframework-guides\u002Fvue-nuxt","docs\u002F2.framework-guides\u002F1.vue-nuxt","i-simple-icons-vuedotjs",{"title":31,"path":32,"stem":33,"icon":34},"React and Next.js","\u002Fdocs\u002Fframework-guides\u002Freact-nextjs","docs\u002F2.framework-guides\u002F2.react-nextjs","i-simple-icons-react",{"title":36,"path":37,"stem":38,"icon":39},"Svelte and SvelteKit","\u002Fdocs\u002Fframework-guides\u002Fsvelte-sveltekit","docs\u002F2.framework-guides\u002F3.svelte-sveltekit","i-simple-icons-svelte",{"title":41,"path":42,"stem":43,"icon":44},"Web Components","\u002Fdocs\u002Fframework-guides\u002Fweb-components","docs\u002F2.framework-guides\u002F4.web-components","i-simple-icons-webcomponentsdotorg",{"title":46,"path":47,"stem":48,"icon":49},"Core","\u002Fdocs\u002Fframework-guides\u002Fcore","docs\u002F2.framework-guides\u002F5.core","i-lucide-braces",{"title":51,"path":52,"stem":53,"children":54,"page":6},"Examples","\u002Fdocs\u002Fexamples","docs\u002F3.examples",[55,100,135],{"title":56,"icon":6,"defaultOpen":6,"path":57,"stem":58,"children":59,"page":6},"Basic","\u002Fdocs\u002Fexamples\u002Fbasic","docs\u002F3.examples\u002F1.basic",[60,65,70,75,80,85,90,95],{"title":61,"path":62,"stem":63,"icon":64},"Simple","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsimple","docs\u002F3.examples\u002F1.basic\u002F1.simple","i-lucide-square",{"title":66,"path":67,"stem":68,"icon":69},"Snapping","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsnap","docs\u002F3.examples\u002F1.basic\u002F2.snap","i-lucide-magnet",{"title":71,"path":72,"stem":73,"icon":74},"Masonry","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fmasonry","docs\u002F3.examples\u002F1.basic\u002F3.masonry","i-lucide-grid-3x3",{"title":76,"path":77,"stem":78,"icon":79},"Right to Left","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fright-to-left","docs\u002F3.examples\u002F1.basic\u002F4.right-to-left","i-lucide-arrow-left-from-line",{"title":81,"path":82,"stem":83,"icon":84},"Sticky Slides","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsticky","docs\u002F3.examples\u002F1.basic\u002F5.sticky","i-lucide-pin",{"title":86,"path":87,"stem":88,"icon":89},"Buttons","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fbuttons","docs\u002F3.examples\u002F1.basic\u002F6.buttons","i-lucide-circle-arrow-right",{"title":91,"path":92,"stem":93,"icon":94},"Dots","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fdots","docs\u002F3.examples\u002F1.basic\u002F7.dots","i-lucide-rectangle-ellipsis",{"title":96,"path":97,"stem":98,"icon":99},"Thumbnails","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fthumbnails","docs\u002F3.examples\u002F1.basic\u002F8.thumbnails","i-lucide-layout-list",{"title":101,"icon":6,"defaultOpen":6,"path":102,"stem":103,"children":104,"page":6},"Advanced","\u002Fdocs\u002Fexamples\u002Fadvanced","docs\u002F3.examples\u002F2.advanced",[105,110,115,120,125,130],{"title":106,"path":107,"stem":108,"icon":109},"Cover Flow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcover-flow","docs\u002F3.examples\u002F2.advanced\u002F1.cover-flow","i-lucide-gallery-horizontal-end",{"title":111,"path":112,"stem":113,"icon":114},"Slideshow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fslideshow","docs\u002F3.examples\u002F2.advanced\u002F2.slideshow","i-lucide-presentation",{"title":116,"path":117,"stem":118,"icon":119},"Stories","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fstories","docs\u002F3.examples\u002F2.advanced\u002F2.stories","i-lucide-circle-fading-plus",{"title":121,"path":122,"stem":123,"icon":124},"Smart Stack","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fsmart-stack","docs\u002F3.examples\u002F2.advanced\u002F3.smart-stack","i-lucide-layers",{"title":126,"path":127,"stem":128,"icon":129},"Cards","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcards","docs\u002F3.examples\u002F2.advanced\u002F4.cards","i-lucide-images",{"title":131,"path":132,"stem":133,"icon":134},"Flipbook","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fflipbook","docs\u002F3.examples\u002F2.advanced\u002F5.flipbook","i-lucide-swatch-book",{"title":136,"icon":6,"defaultOpen":6,"path":137,"stem":138,"children":139,"page":6},"Experimental","\u002Fdocs\u002Fexamples\u002Fexperimental","docs\u002F3.examples\u002F3.experimental",[140,145,150,155,160],{"title":141,"path":142,"stem":143,"icon":144},"CSS Controls","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fcss-controls","docs\u002F3.examples\u002F3.experimental\u002F1.css-controls","i-lucide-eclipse",{"title":146,"path":147,"stem":148,"icon":149},"Scroll State Query","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-state-queries","docs\u002F3.examples\u002F3.experimental\u002F2.scroll-state-queries","i-lucide-anvil",{"title":151,"path":152,"stem":153,"icon":154},"Scroll Snap Events","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-snap-changing","docs\u002F3.examples\u002F3.experimental\u002F3.scroll-snap-changing","i-lucide-megaphone",{"title":156,"path":157,"stem":158,"icon":159},"Repeat","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Frepeat","docs\u002F3.examples\u002F3.experimental\u002F4.repeat","i-lucide-repeat",{"title":161,"path":162,"stem":163,"icon":164},"Scroll Trigger","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-trigger","docs\u002F3.examples\u002F3.experimental\u002F5.scroll-trigger","i-lucide-bow-arrow",{"title":166,"path":167,"stem":168,"children":169,"page":6},"A11y","\u002Fdocs\u002Fa11y","docs\u002F4.a11y",[170],{"title":171,"path":172,"stem":173,"icon":174},"Accessibility Guide","\u002Fdocs\u002Fa11y\u002Faccessibility-guide","docs\u002F4.a11y\u002Faccessibility-guide","i-lucide-person-standing",{"title":176,"path":177,"stem":178,"children":179,"page":6},"Ai","\u002Fdocs\u002Fai","docs\u002F5.AI",[180],{"title":181,"path":182,"stem":183,"icon":184},"Agent Skills","\u002Fdocs\u002Fai\u002Fagent-skills","docs\u002F5.AI\u002F1.agent-skills","i-lucide-sparkles",{"title":186,"icon":6,"path":187,"stem":188,"children":189,"page":6},"Migration Guides","\u002Fdocs\u002Fmigration-guides","docs\u002F6.migration-guides",[190,195,200,205,210],{"title":191,"path":192,"stem":193,"icon":194},"Embla","\u002Fdocs\u002Fmigration-guides\u002Fembla","docs\u002F6.migration-guides\u002F1.embla","i-lucide-atom",{"title":196,"path":197,"stem":198,"icon":199},"Swiper","\u002Fdocs\u002Fmigration-guides\u002Fswiper","docs\u002F6.migration-guides\u002F2.swiper","i-lucide-circle-slash",{"title":201,"path":202,"stem":203,"icon":204},"Splide","\u002Fdocs\u002Fmigration-guides\u002Fsplide","docs\u002F6.migration-guides\u002F3.splide","i-lucide-diamond",{"title":206,"path":207,"stem":208,"icon":209},"Slick","\u002Fdocs\u002Fmigration-guides\u002Fslick","docs\u002F6.migration-guides\u002F4.slick","i-lucide-ampersand",{"title":211,"path":212,"stem":213,"icon":214},"Flickity","\u002Fdocs\u002Fmigration-guides\u002Fflickity","docs\u002F6.migration-guides\u002F5.flickity","i-lucide-smartphone",{"id":216,"title":171,"body":217,"description":3069,"extension":3070,"links":3071,"meta":3072,"navigation":3073,"path":172,"seo":3074,"stem":173,"__hash__":3077},"docs\u002Fdocs\u002F4.a11y\u002Faccessibility-guide.md",{"type":218,"value":219,"toc":3054},"minimark",[220,224,227,233,238,241,339,342,346,349,786,789,875,881,885,888,891,905,985,988,995,1040,1047,1185,1189,1192,1195,1315,1318,1398,1401,1444,1447,1530,1534,1537,1540,1573,1579,1651,1658,1662,1665,1668,1678,1843,1850,1854,1857,1860,1880,1924,1927,2077,2081,2084,2087,2108,2169,2172,2176,2179,2182,2199,2202,2224,2594,2597,2601,2604,2621,2776,2780,2783,2786,2838,2842,2845,3011,3015,3050],[221,222,223],"p",{},"Accessible carousels are not created by adding a single ARIA attribute. They depend on ordinary web fundamentals working together: meaningful HTML, reachable controls, predictable focus, controllable motion, visible state, and tested assistive technology output.",[221,225,226],{},"Blossom gives you a native scroll container and progressive drag support. The accessibility of the carousel still depends on the markup, controls, labels, and behavior you build around that container.",[228,229,232],"note",{"color":230,"icon":231},"primary","i-lucide-info","WCAG is a baseline, not a guarantee of usability. A carousel can pass automated checks and still be confusing if controls are unnamed, focus moves into hidden content, or screen readers hear semantics that do not match the visual pattern.",[234,235,237],"h2",{"id":236},"start-with-the-right-pattern","Start with the right pattern",[221,239,240],{},"Not every horizontal scroller needs to be announced as a carousel. Choose the lightest pattern that matches the content and behavior.",[242,243,244,260],"table",{},[245,246,247],"thead",{},[248,249,250,254,257],"tr",{},[251,252,253],"th",{},"Pattern",[251,255,256],{},"Use when",[251,258,259],{},"Recommended structure",[261,262,263,284,306,328],"tbody",{},[248,264,265,269,272],{},[266,267,268],"td",{},"Scrollable list",[266,270,271],{},"Several related items are visible and users can scroll through them naturally.",[266,273,274,275,279,280,283],{},"A list such as ",[276,277,278],"code",{},"\u003Cul>"," with ",[276,281,282],{},"\u003Cli>"," items, plus optional previous and next buttons.",[248,285,286,289,292],{},[266,287,288],{},"Carousel region",[266,290,291],{},"The component is a distinct page feature with slides and controls.",[266,293,294,295,298,299,279,302,305],{},"A labelled ",[276,296,297],{},"\u003Csection>"," or ",[276,300,301],{},"role=\"region\"",[276,303,304],{},"aria-roledescription=\"carousel\"",".",[248,307,308,311,314],{},[266,309,310],{},"Tabbed carousel",[266,312,313],{},"Only one slide is displayed at a time and slide pickers behave exactly like tabs.",[266,315,316,317,320,321,324,325,305],{},"A real tabs pattern with ",[276,318,319],{},"tablist",", ",[276,322,323],{},"tab",", and ",[276,326,327],{},"tabpanel",[248,329,330,333,336],{},[266,331,332],{},"Gallery or product rail",[266,334,335],{},"Multiple cards are visible at once and all cards remain normal page content.",[266,337,338],{},"A list of articles\u002Fcards with ordinary links and buttons.",[221,340,341],{},"Avoid giving a component a role that promises behavior you do not implement. If the user hears \"tab\", arrow keys, selected state, and tabpanel relationships need to work like a tabs widget.",[234,343,345],{"id":344},"use-semantic-slide-markup","Use semantic slide markup",[221,347,348],{},"When slides are a set of related items, use a list. This gives assistive technologies a familiar count and structure.",[350,351,357],"pre",{"className":352,"code":353,"filename":354,"language":355,"meta":356,"style":356},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csection aria-labelledby=\"featured-heading\">\n  \u003Ch2 id=\"featured-heading\">Featured articles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"carousel-controls\" aria-label=\"Featured articles controls\">\n    \u003Cbutton type=\"button\" aria-label=\"Previous articles\">Previous\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" aria-label=\"Next articles\">Next\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003CBlossomCarousel as=\"ul\" class=\"carousel\">\n    \u003Cli>\n      \u003Carticle>\n        \u003Ch3>Designing with native scrolling\u003C\u002Fh3>\n        \u003Ca href=\"\u002Farticles\u002Fnative-scrolling\">Read article\u003C\u002Fa>\n      \u003C\u002Farticle>\n    \u003C\u002Fli>\n    \u003Cli>\n      \u003Carticle>\n        \u003Ch3>Understanding scroll snap\u003C\u002Fh3>\n        \u003Ca href=\"\u002Farticles\u002Fscroll-snap\">Read article\u003C\u002Fa>\n      \u003C\u002Farticle>\n    \u003C\u002Fli>\n  \u003C\u002FBlossomCarousel>\n\u003C\u002Fsection>\n","List-based carousel","html","",[276,358,359,391,424,431,465,507,546,556,561,594,604,615,635,666,676,686,695,704,722,750,759,768,777],{"__ignoreMap":356},[360,361,364,368,372,376,379,382,386,388],"span",{"class":362,"line":363},"line",1,[360,365,367],{"class":366},"sMK4o","\u003C",[360,369,371],{"class":370},"swJcz","section",[360,373,375],{"class":374},"spNyl"," aria-labelledby",[360,377,378],{"class":366},"=",[360,380,381],{"class":366},"\"",[360,383,385],{"class":384},"sfazB","featured-heading",[360,387,381],{"class":366},[360,389,390],{"class":366},">\n",[360,392,394,397,399,402,404,406,408,410,413,417,420,422],{"class":362,"line":393},2,[360,395,396],{"class":366},"  \u003C",[360,398,234],{"class":370},[360,400,401],{"class":374}," id",[360,403,378],{"class":366},[360,405,381],{"class":366},[360,407,385],{"class":384},[360,409,381],{"class":366},[360,411,412],{"class":366},">",[360,414,416],{"class":415},"sTEyZ","Featured articles",[360,418,419],{"class":366},"\u003C\u002F",[360,421,234],{"class":370},[360,423,390],{"class":366},[360,425,427],{"class":362,"line":426},3,[360,428,430],{"emptyLinePlaceholder":429},true,"\n",[360,432,434,436,439,442,444,446,449,451,454,456,458,461,463],{"class":362,"line":433},4,[360,435,396],{"class":366},[360,437,438],{"class":370},"div",[360,440,441],{"class":374}," class",[360,443,378],{"class":366},[360,445,381],{"class":366},[360,447,448],{"class":384},"carousel-controls",[360,450,381],{"class":366},[360,452,453],{"class":374}," aria-label",[360,455,378],{"class":366},[360,457,381],{"class":366},[360,459,460],{"class":384},"Featured articles controls",[360,462,381],{"class":366},[360,464,390],{"class":366},[360,466,468,471,474,477,479,481,483,485,487,489,491,494,496,498,501,503,505],{"class":362,"line":467},5,[360,469,470],{"class":366},"    \u003C",[360,472,473],{"class":370},"button",[360,475,476],{"class":374}," type",[360,478,378],{"class":366},[360,480,381],{"class":366},[360,482,473],{"class":384},[360,484,381],{"class":366},[360,486,453],{"class":374},[360,488,378],{"class":366},[360,490,381],{"class":366},[360,492,493],{"class":384},"Previous articles",[360,495,381],{"class":366},[360,497,412],{"class":366},[360,499,500],{"class":415},"Previous",[360,502,419],{"class":366},[360,504,473],{"class":370},[360,506,390],{"class":366},[360,508,510,512,514,516,518,520,522,524,526,528,530,533,535,537,540,542,544],{"class":362,"line":509},6,[360,511,470],{"class":366},[360,513,473],{"class":370},[360,515,476],{"class":374},[360,517,378],{"class":366},[360,519,381],{"class":366},[360,521,473],{"class":384},[360,523,381],{"class":366},[360,525,453],{"class":374},[360,527,378],{"class":366},[360,529,381],{"class":366},[360,531,532],{"class":384},"Next articles",[360,534,381],{"class":366},[360,536,412],{"class":366},[360,538,539],{"class":415},"Next",[360,541,419],{"class":366},[360,543,473],{"class":370},[360,545,390],{"class":366},[360,547,549,552,554],{"class":362,"line":548},7,[360,550,551],{"class":366},"  \u003C\u002F",[360,553,438],{"class":370},[360,555,390],{"class":366},[360,557,559],{"class":362,"line":558},8,[360,560,430],{"emptyLinePlaceholder":429},[360,562,564,566,569,572,574,576,579,581,583,585,587,590,592],{"class":362,"line":563},9,[360,565,396],{"class":366},[360,567,568],{"class":370},"BlossomCarousel",[360,570,571],{"class":374}," as",[360,573,378],{"class":366},[360,575,381],{"class":366},[360,577,578],{"class":384},"ul",[360,580,381],{"class":366},[360,582,441],{"class":374},[360,584,378],{"class":366},[360,586,381],{"class":366},[360,588,589],{"class":384},"carousel",[360,591,381],{"class":366},[360,593,390],{"class":366},[360,595,597,599,602],{"class":362,"line":596},10,[360,598,470],{"class":366},[360,600,601],{"class":370},"li",[360,603,390],{"class":366},[360,605,607,610,613],{"class":362,"line":606},11,[360,608,609],{"class":366},"      \u003C",[360,611,612],{"class":370},"article",[360,614,390],{"class":366},[360,616,618,621,624,626,629,631,633],{"class":362,"line":617},12,[360,619,620],{"class":366},"        \u003C",[360,622,623],{"class":370},"h3",[360,625,412],{"class":366},[360,627,628],{"class":415},"Designing with native scrolling",[360,630,419],{"class":366},[360,632,623],{"class":370},[360,634,390],{"class":366},[360,636,638,640,643,646,648,650,653,655,657,660,662,664],{"class":362,"line":637},13,[360,639,620],{"class":366},[360,641,642],{"class":370},"a",[360,644,645],{"class":374}," href",[360,647,378],{"class":366},[360,649,381],{"class":366},[360,651,652],{"class":384},"\u002Farticles\u002Fnative-scrolling",[360,654,381],{"class":366},[360,656,412],{"class":366},[360,658,659],{"class":415},"Read article",[360,661,419],{"class":366},[360,663,642],{"class":370},[360,665,390],{"class":366},[360,667,669,672,674],{"class":362,"line":668},14,[360,670,671],{"class":366},"      \u003C\u002F",[360,673,612],{"class":370},[360,675,390],{"class":366},[360,677,679,682,684],{"class":362,"line":678},15,[360,680,681],{"class":366},"    \u003C\u002F",[360,683,601],{"class":370},[360,685,390],{"class":366},[360,687,689,691,693],{"class":362,"line":688},16,[360,690,470],{"class":366},[360,692,601],{"class":370},[360,694,390],{"class":366},[360,696,698,700,702],{"class":362,"line":697},17,[360,699,609],{"class":366},[360,701,612],{"class":370},[360,703,390],{"class":366},[360,705,707,709,711,713,716,718,720],{"class":362,"line":706},18,[360,708,620],{"class":366},[360,710,623],{"class":370},[360,712,412],{"class":366},[360,714,715],{"class":415},"Understanding scroll snap",[360,717,419],{"class":366},[360,719,623],{"class":370},[360,721,390],{"class":366},[360,723,725,727,729,731,733,735,738,740,742,744,746,748],{"class":362,"line":724},19,[360,726,620],{"class":366},[360,728,642],{"class":370},[360,730,645],{"class":374},[360,732,378],{"class":366},[360,734,381],{"class":366},[360,736,737],{"class":384},"\u002Farticles\u002Fscroll-snap",[360,739,381],{"class":366},[360,741,412],{"class":366},[360,743,659],{"class":415},[360,745,419],{"class":366},[360,747,642],{"class":370},[360,749,390],{"class":366},[360,751,753,755,757],{"class":362,"line":752},20,[360,754,671],{"class":366},[360,756,612],{"class":370},[360,758,390],{"class":366},[360,760,762,764,766],{"class":362,"line":761},21,[360,763,681],{"class":366},[360,765,601],{"class":370},[360,767,390],{"class":366},[360,769,771,773,775],{"class":362,"line":770},22,[360,772,551],{"class":366},[360,774,568],{"class":370},[360,776,390],{"class":366},[360,778,780,782,784],{"class":362,"line":779},23,[360,781,419],{"class":366},[360,783,371],{"class":370},[360,785,390],{"class":366},[221,787,788],{},"Use a carousel role description only when the component benefits from being identified as a carousel.",[350,790,793],{"className":352,"code":791,"filename":792,"language":355,"meta":356,"style":356},"\u003Csection\n  aria-labelledby=\"product-carousel-heading\"\n  aria-roledescription=\"carousel\"\n>\n  \u003Ch2 id=\"product-carousel-heading\">Popular products\u003C\u002Fh2>\n  \u003C!-- controls and slides -->\n\u003C\u002Fsection>\n","Named carousel region",[276,794,795,802,817,830,834,861,867],{"__ignoreMap":356},[360,796,797,799],{"class":362,"line":363},[360,798,367],{"class":366},[360,800,801],{"class":370},"section\n",[360,803,804,807,809,811,814],{"class":362,"line":393},[360,805,806],{"class":374},"  aria-labelledby",[360,808,378],{"class":366},[360,810,381],{"class":366},[360,812,813],{"class":384},"product-carousel-heading",[360,815,816],{"class":366},"\"\n",[360,818,819,822,824,826,828],{"class":362,"line":426},[360,820,821],{"class":374},"  aria-roledescription",[360,823,378],{"class":366},[360,825,381],{"class":366},[360,827,589],{"class":384},[360,829,816],{"class":366},[360,831,832],{"class":362,"line":433},[360,833,390],{"class":366},[360,835,836,838,840,842,844,846,848,850,852,855,857,859],{"class":362,"line":467},[360,837,396],{"class":366},[360,839,234],{"class":370},[360,841,401],{"class":374},[360,843,378],{"class":366},[360,845,381],{"class":366},[360,847,813],{"class":384},[360,849,381],{"class":366},[360,851,412],{"class":366},[360,853,854],{"class":415},"Popular products",[360,856,419],{"class":366},[360,858,234],{"class":370},[360,860,390],{"class":366},[360,862,863],{"class":362,"line":509},[360,864,866],{"class":865},"sHwdD","  \u003C!-- controls and slides -->\n",[360,868,869,871,873],{"class":362,"line":548},[360,870,419],{"class":366},[360,872,371],{"class":370},[360,874,390],{"class":366},[221,876,877,878,880],{},"The accessible label should not repeat the word \"carousel\" when ",[276,879,304],{}," is present. A screen reader may announce the role description after the label, so \"Popular products carousel, carousel\" is noisy.",[234,882,884],{"id":883},"provide-real-controls","Provide real controls",[221,886,887],{},"Dragging and swiping are not enough. WCAG 2.5.7 requires functionality that uses dragging to have a non-drag alternative unless dragging is essential.",[221,889,890],{},"Use real buttons for carousel actions:",[578,892,893,896,899,902],{},[601,894,895],{},"Previous slide or previous set.",[601,897,898],{},"Next slide or next set.",[601,900,901],{},"Pause and play, if the carousel auto-rotates.",[601,903,904],{},"Slide picker controls, if users can jump to a specific slide.",[350,906,909],{"className":352,"code":907,"filename":908,"language":355,"meta":356,"style":356},"\u003Cbutton type=\"button\" aria-label=\"Previous product\">Previous\u003C\u002Fbutton>\n\u003Cbutton type=\"button\" aria-label=\"Next product\">Next\u003C\u002Fbutton>\n","Carousel buttons",[276,910,911,948],{"__ignoreMap":356},[360,912,913,915,917,919,921,923,925,927,929,931,933,936,938,940,942,944,946],{"class":362,"line":363},[360,914,367],{"class":366},[360,916,473],{"class":370},[360,918,476],{"class":374},[360,920,378],{"class":366},[360,922,381],{"class":366},[360,924,473],{"class":384},[360,926,381],{"class":366},[360,928,453],{"class":374},[360,930,378],{"class":366},[360,932,381],{"class":366},[360,934,935],{"class":384},"Previous product",[360,937,381],{"class":366},[360,939,412],{"class":366},[360,941,500],{"class":415},[360,943,419],{"class":366},[360,945,473],{"class":370},[360,947,390],{"class":366},[360,949,950,952,954,956,958,960,962,964,966,968,970,973,975,977,979,981,983],{"class":362,"line":393},[360,951,367],{"class":366},[360,953,473],{"class":370},[360,955,476],{"class":374},[360,957,378],{"class":366},[360,959,381],{"class":366},[360,961,473],{"class":384},[360,963,381],{"class":366},[360,965,453],{"class":374},[360,967,378],{"class":366},[360,969,381],{"class":366},[360,971,972],{"class":384},"Next product",[360,974,381],{"class":366},[360,976,412],{"class":366},[360,978,539],{"class":415},[360,980,419],{"class":366},[360,982,473],{"class":370},[360,984,390],{"class":366},[221,986,987],{},"If multiple items are visible at once, name controls for what they actually do. \"Next products\" or \"Next articles\" can be more honest than \"Next slide\".",[221,989,990,991,994],{},"Do not disable previous and next buttons only visually. If a button cannot perform an action, use the native ",[276,992,993],{},"disabled"," attribute when it should be skipped in the tab order.",[350,996,999],{"className":352,"code":997,"filename":998,"language":355,"meta":356,"style":356},"\u003Cbutton type=\"button\" aria-label=\"Previous product\" disabled>Previous\u003C\u002Fbutton>\n","Disabled edge control",[276,1000,1001],{"__ignoreMap":356},[360,1002,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1030,1032,1034,1036,1038],{"class":362,"line":363},[360,1004,367],{"class":366},[360,1006,473],{"class":370},[360,1008,476],{"class":374},[360,1010,378],{"class":366},[360,1012,381],{"class":366},[360,1014,473],{"class":384},[360,1016,381],{"class":366},[360,1018,453],{"class":374},[360,1020,378],{"class":366},[360,1022,381],{"class":366},[360,1024,935],{"class":384},[360,1026,381],{"class":366},[360,1028,1029],{"class":374}," disabled",[360,1031,412],{"class":366},[360,1033,500],{"class":415},[360,1035,419],{"class":366},[360,1037,473],{"class":370},[360,1039,390],{"class":366},[221,1041,1042,1043,1046],{},"For slide picker buttons, ",[276,1044,1045],{},"aria-disabled=\"true\""," can be useful for the current slide picker when users benefit from encountering the current item in the tab sequence.",[350,1048,1051],{"className":352,"code":1049,"filename":1050,"language":355,"meta":356,"style":356},"\u003Cdiv role=\"group\" aria-label=\"Choose product\">\n  \u003Cbutton type=\"button\" aria-disabled=\"true\">Canvas tote\u003C\u002Fbutton>\n  \u003Cbutton type=\"button\">Wool scarf\u003C\u002Fbutton>\n  \u003Cbutton type=\"button\">Ceramic mug\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n","Current slide picker",[276,1052,1053,1084,1123,1150,1177],{"__ignoreMap":356},[360,1054,1055,1057,1059,1062,1064,1066,1069,1071,1073,1075,1077,1080,1082],{"class":362,"line":363},[360,1056,367],{"class":366},[360,1058,438],{"class":370},[360,1060,1061],{"class":374}," role",[360,1063,378],{"class":366},[360,1065,381],{"class":366},[360,1067,1068],{"class":384},"group",[360,1070,381],{"class":366},[360,1072,453],{"class":374},[360,1074,378],{"class":366},[360,1076,381],{"class":366},[360,1078,1079],{"class":384},"Choose product",[360,1081,381],{"class":366},[360,1083,390],{"class":366},[360,1085,1086,1088,1090,1092,1094,1096,1098,1100,1103,1105,1107,1110,1112,1114,1117,1119,1121],{"class":362,"line":393},[360,1087,396],{"class":366},[360,1089,473],{"class":370},[360,1091,476],{"class":374},[360,1093,378],{"class":366},[360,1095,381],{"class":366},[360,1097,473],{"class":384},[360,1099,381],{"class":366},[360,1101,1102],{"class":374}," aria-disabled",[360,1104,378],{"class":366},[360,1106,381],{"class":366},[360,1108,1109],{"class":384},"true",[360,1111,381],{"class":366},[360,1113,412],{"class":366},[360,1115,1116],{"class":415},"Canvas tote",[360,1118,419],{"class":366},[360,1120,473],{"class":370},[360,1122,390],{"class":366},[360,1124,1125,1127,1129,1131,1133,1135,1137,1139,1141,1144,1146,1148],{"class":362,"line":426},[360,1126,396],{"class":366},[360,1128,473],{"class":370},[360,1130,476],{"class":374},[360,1132,378],{"class":366},[360,1134,381],{"class":366},[360,1136,473],{"class":384},[360,1138,381],{"class":366},[360,1140,412],{"class":366},[360,1142,1143],{"class":415},"Wool scarf",[360,1145,419],{"class":366},[360,1147,473],{"class":370},[360,1149,390],{"class":366},[360,1151,1152,1154,1156,1158,1160,1162,1164,1166,1168,1171,1173,1175],{"class":362,"line":433},[360,1153,396],{"class":366},[360,1155,473],{"class":370},[360,1157,476],{"class":374},[360,1159,378],{"class":366},[360,1161,381],{"class":366},[360,1163,473],{"class":384},[360,1165,381],{"class":366},[360,1167,412],{"class":366},[360,1169,1170],{"class":415},"Ceramic mug",[360,1172,419],{"class":366},[360,1174,473],{"class":370},[360,1176,390],{"class":366},[360,1178,1179,1181,1183],{"class":362,"line":467},[360,1180,419],{"class":366},[360,1182,438],{"class":370},[360,1184,390],{"class":366},[234,1186,1188],{"id":1187},"name-every-control-clearly","Name every control clearly",[221,1190,1191],{},"Every carousel control needs a unique accessible name. Repeated names like \"Show slide\" or \"Read more\" make the carousel hard to operate with screen readers and speech control.",[221,1193,1194],{},"Good names tell the user what will happen:",[350,1196,1199],{"className":352,"code":1197,"filename":1198,"language":355,"meta":356,"style":356},"\u003Cbutton type=\"button\" aria-label=\"Show canvas tote\">1\u003C\u002Fbutton>\n\u003Cbutton type=\"button\" aria-label=\"Show wool scarf\">2\u003C\u002Fbutton>\n\u003Cbutton type=\"button\" aria-label=\"Show ceramic mug\">3\u003C\u002Fbutton>\n","Specific control names",[276,1200,1201,1239,1277],{"__ignoreMap":356},[360,1202,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1226,1228,1230,1233,1235,1237],{"class":362,"line":363},[360,1204,367],{"class":366},[360,1206,473],{"class":370},[360,1208,476],{"class":374},[360,1210,378],{"class":366},[360,1212,381],{"class":366},[360,1214,473],{"class":384},[360,1216,381],{"class":366},[360,1218,453],{"class":374},[360,1220,378],{"class":366},[360,1222,381],{"class":366},[360,1224,1225],{"class":384},"Show canvas tote",[360,1227,381],{"class":366},[360,1229,412],{"class":366},[360,1231,1232],{"class":415},"1",[360,1234,419],{"class":366},[360,1236,473],{"class":370},[360,1238,390],{"class":366},[360,1240,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1264,1266,1268,1271,1273,1275],{"class":362,"line":393},[360,1242,367],{"class":366},[360,1244,473],{"class":370},[360,1246,476],{"class":374},[360,1248,378],{"class":366},[360,1250,381],{"class":366},[360,1252,473],{"class":384},[360,1254,381],{"class":366},[360,1256,453],{"class":374},[360,1258,378],{"class":366},[360,1260,381],{"class":366},[360,1262,1263],{"class":384},"Show wool scarf",[360,1265,381],{"class":366},[360,1267,412],{"class":366},[360,1269,1270],{"class":415},"2",[360,1272,419],{"class":366},[360,1274,473],{"class":370},[360,1276,390],{"class":366},[360,1278,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1302,1304,1306,1309,1311,1313],{"class":362,"line":426},[360,1280,367],{"class":366},[360,1282,473],{"class":370},[360,1284,476],{"class":374},[360,1286,378],{"class":366},[360,1288,381],{"class":366},[360,1290,473],{"class":384},[360,1292,381],{"class":366},[360,1294,453],{"class":374},[360,1296,378],{"class":366},[360,1298,381],{"class":366},[360,1300,1301],{"class":384},"Show ceramic mug",[360,1303,381],{"class":366},[360,1305,412],{"class":366},[360,1307,1308],{"class":415},"3",[360,1310,419],{"class":366},[360,1312,473],{"class":370},[360,1314,390],{"class":366},[221,1316,1317],{},"If slide names are not available, use position and set size.",[350,1319,1322],{"className":352,"code":1320,"filename":1321,"language":355,"meta":356,"style":356},"\u003Cbutton type=\"button\" aria-label=\"Show slide 1 of 5\">1\u003C\u002Fbutton>\n\u003Cbutton type=\"button\" aria-label=\"Show slide 2 of 5\">2\u003C\u002Fbutton>\n","Position-based names",[276,1323,1324,1361],{"__ignoreMap":356},[360,1325,1326,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1349,1351,1353,1355,1357,1359],{"class":362,"line":363},[360,1327,367],{"class":366},[360,1329,473],{"class":370},[360,1331,476],{"class":374},[360,1333,378],{"class":366},[360,1335,381],{"class":366},[360,1337,473],{"class":384},[360,1339,381],{"class":366},[360,1341,453],{"class":374},[360,1343,378],{"class":366},[360,1345,381],{"class":366},[360,1347,1348],{"class":384},"Show slide 1 of 5",[360,1350,381],{"class":366},[360,1352,412],{"class":366},[360,1354,1232],{"class":415},[360,1356,419],{"class":366},[360,1358,473],{"class":370},[360,1360,390],{"class":366},[360,1362,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1386,1388,1390,1392,1394,1396],{"class":362,"line":393},[360,1364,367],{"class":366},[360,1366,473],{"class":370},[360,1368,476],{"class":374},[360,1370,378],{"class":366},[360,1372,381],{"class":366},[360,1374,473],{"class":384},[360,1376,381],{"class":366},[360,1378,453],{"class":374},[360,1380,378],{"class":366},[360,1382,381],{"class":366},[360,1384,1385],{"class":384},"Show slide 2 of 5",[360,1387,381],{"class":366},[360,1389,412],{"class":366},[360,1391,1270],{"class":415},[360,1393,419],{"class":366},[360,1395,473],{"class":370},[360,1397,390],{"class":366},[221,1399,1400],{},"When visible text exists, keep the accessible name aligned with it. This helps speech recognition users activate controls by the words they can see.",[350,1402,1405],{"className":352,"code":1403,"filename":1404,"language":355,"meta":356,"style":356},"\u003Cbutton type=\"button\" aria-label=\"Next products\">Next\u003C\u002Fbutton>\n","Label in name",[276,1406,1407],{"__ignoreMap":356},[360,1408,1409,1411,1413,1415,1417,1419,1421,1423,1425,1427,1429,1432,1434,1436,1438,1440,1442],{"class":362,"line":363},[360,1410,367],{"class":366},[360,1412,473],{"class":370},[360,1414,476],{"class":374},[360,1416,378],{"class":366},[360,1418,381],{"class":366},[360,1420,473],{"class":384},[360,1422,381],{"class":366},[360,1424,453],{"class":374},[360,1426,378],{"class":366},[360,1428,381],{"class":366},[360,1430,1431],{"class":384},"Next products",[360,1433,381],{"class":366},[360,1435,412],{"class":366},[360,1437,539],{"class":415},[360,1439,419],{"class":366},[360,1441,473],{"class":370},[360,1443,390],{"class":366},[221,1445,1446],{},"Icon-only buttons need a name on the button. Hide the icon itself if it is decorative.",[350,1448,1451],{"className":352,"code":1449,"filename":1450,"language":355,"meta":356,"style":356},"\u003Cbutton type=\"button\" aria-label=\"Next product\">\n  \u003Csvg aria-hidden=\"true\" focusable=\"false\">\u003C!-- icon -->\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n","Icon-only carousel button",[276,1452,1453,1481,1522],{"__ignoreMap":356},[360,1454,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479],{"class":362,"line":363},[360,1456,367],{"class":366},[360,1458,473],{"class":370},[360,1460,476],{"class":374},[360,1462,378],{"class":366},[360,1464,381],{"class":366},[360,1466,473],{"class":384},[360,1468,381],{"class":366},[360,1470,453],{"class":374},[360,1472,378],{"class":366},[360,1474,381],{"class":366},[360,1476,972],{"class":384},[360,1478,381],{"class":366},[360,1480,390],{"class":366},[360,1482,1483,1485,1488,1491,1493,1495,1497,1499,1502,1504,1506,1509,1511,1513,1516,1518,1520],{"class":362,"line":393},[360,1484,396],{"class":366},[360,1486,1487],{"class":370},"svg",[360,1489,1490],{"class":374}," aria-hidden",[360,1492,378],{"class":366},[360,1494,381],{"class":366},[360,1496,1109],{"class":384},[360,1498,381],{"class":366},[360,1500,1501],{"class":374}," focusable",[360,1503,378],{"class":366},[360,1505,381],{"class":366},[360,1507,1508],{"class":384},"false",[360,1510,381],{"class":366},[360,1512,412],{"class":366},[360,1514,1515],{"class":865},"\u003C!-- icon -->",[360,1517,419],{"class":366},[360,1519,1487],{"class":370},[360,1521,390],{"class":366},[360,1523,1524,1526,1528],{"class":362,"line":426},[360,1525,419],{"class":366},[360,1527,473],{"class":370},[360,1529,390],{"class":366},[234,1531,1533],{"id":1532},"keep-keyboard-behavior-predictable","Keep keyboard behavior predictable",[221,1535,1536],{},"Keyboard users should be able to reach the carousel, understand the controls, operate them repeatedly, and leave the component without surprise.",[221,1538,1539],{},"Expected behavior:",[578,1541,1542,1552,1561,1564,1567,1570],{},[601,1543,1544,1547,1548,1551],{},[276,1545,1546],{},"Tab"," and ",[276,1549,1550],{},"Shift + Tab"," move through controls and focusable slide content in DOM order.",[601,1553,1554,1547,1557,1560],{},[276,1555,1556],{},"Enter",[276,1558,1559],{},"Space"," activate carousel buttons.",[601,1562,1563],{},"Previous and next buttons do not move focus after activation.",[601,1565,1566],{},"Focus is always visible.",[601,1568,1569],{},"Focus does not land on content that is visually hidden or intentionally unavailable.",[601,1571,1572],{},"Keyboard users can access the same functionality as pointer and touch users.",[221,1574,1575,1576,1578],{},"You usually do not need custom scripting for ",[276,1577,1546],{},". Let the browser handle normal tab order unless you are implementing a real composite widget such as tabs.",[350,1580,1585],{"className":1581,"code":1582,"filename":1583,"language":1584,"meta":356,"style":356},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".carousel :focus-visible,\n.carousel-controls :focus-visible {\n  outline: 3px solid currentColor;\n  outline-offset: 3px;\n}\n","Visible focus","css",[276,1586,1587,1603,1616,1635,1646],{"__ignoreMap":356},[360,1588,1589,1591,1594,1597,1600],{"class":362,"line":363},[360,1590,305],{"class":366},[360,1592,589],{"class":1593},"sBMFI",[360,1595,1596],{"class":366}," :",[360,1598,1599],{"class":374},"focus-visible",[360,1601,1602],{"class":366},",\n",[360,1604,1605,1607,1609,1611,1613],{"class":362,"line":393},[360,1606,305],{"class":366},[360,1608,448],{"class":1593},[360,1610,1596],{"class":366},[360,1612,1599],{"class":374},[360,1614,1615],{"class":366}," {\n",[360,1617,1618,1622,1625,1629,1632],{"class":362,"line":426},[360,1619,1621],{"class":1620},"sqsOY","  outline",[360,1623,1624],{"class":366},":",[360,1626,1628],{"class":1627},"sbssI"," 3px",[360,1630,1631],{"class":415}," solid currentColor",[360,1633,1634],{"class":366},";\n",[360,1636,1637,1640,1642,1644],{"class":362,"line":433},[360,1638,1639],{"class":1620},"  outline-offset",[360,1641,1624],{"class":366},[360,1643,1628],{"class":1627},[360,1645,1634],{"class":366},[360,1647,1648],{"class":362,"line":467},[360,1649,1650],{"class":366},"}\n",[221,1652,1653,1654,1657],{},"Avoid positive ",[276,1655,1656],{},"tabindex"," values. Put controls and slides in the DOM order users should experience.",[234,1659,1661],{"id":1660},"do-not-trap-focus-in-off-screen-slides","Do not trap focus in off-screen slides",[221,1663,1664],{},"Native horizontal scrolling often keeps all slides in the document flow. That is good for simple scrollable lists, but it can be confusing when a carousel presents itself as showing only one slide.",[221,1666,1667],{},"If all slides remain part of the normal content, it is acceptable for keyboard focus to move through them in order. In that case, do not claim the component behaves like tabs or like a single active panel.",[221,1669,1670,1671,320,1674,1677],{},"If only one slide should be available at a time, inactive slides need to be unavailable to both keyboard and assistive technology users. Depending on the implementation, use conditional rendering, ",[276,1672,1673],{},"hidden",[276,1675,1676],{},"inert",", or another approach that removes inactive interactive content from the tab order and accessibility tree.",[350,1679,1682],{"className":352,"code":1680,"filename":1681,"language":355,"meta":356,"style":356},"\u003Cdiv role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 3\">\n  \u003Ch3>Canvas tote\u003C\u002Fh3>\n  \u003Ca href=\"\u002Fproducts\u002Fcanvas-tote\">View product\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Cdiv hidden>\n  \u003Ch3>Wool scarf\u003C\u002Fh3>\n  \u003Ca href=\"\u002Fproducts\u002Fwool-scarf\">View product\u003C\u002Fa>\n\u003C\u002Fdiv>\n","Inactive slide removed",[276,1683,1684,1725,1741,1769,1777,1781,1792,1808,1835],{"__ignoreMap":356},[360,1685,1686,1688,1690,1692,1694,1696,1698,1700,1703,1705,1707,1710,1712,1714,1716,1718,1721,1723],{"class":362,"line":363},[360,1687,367],{"class":366},[360,1689,438],{"class":370},[360,1691,1061],{"class":374},[360,1693,378],{"class":366},[360,1695,381],{"class":366},[360,1697,1068],{"class":384},[360,1699,381],{"class":366},[360,1701,1702],{"class":374}," aria-roledescription",[360,1704,378],{"class":366},[360,1706,381],{"class":366},[360,1708,1709],{"class":384},"slide",[360,1711,381],{"class":366},[360,1713,453],{"class":374},[360,1715,378],{"class":366},[360,1717,381],{"class":366},[360,1719,1720],{"class":384},"1 of 3",[360,1722,381],{"class":366},[360,1724,390],{"class":366},[360,1726,1727,1729,1731,1733,1735,1737,1739],{"class":362,"line":393},[360,1728,396],{"class":366},[360,1730,623],{"class":370},[360,1732,412],{"class":366},[360,1734,1116],{"class":415},[360,1736,419],{"class":366},[360,1738,623],{"class":370},[360,1740,390],{"class":366},[360,1742,1743,1745,1747,1749,1751,1753,1756,1758,1760,1763,1765,1767],{"class":362,"line":426},[360,1744,396],{"class":366},[360,1746,642],{"class":370},[360,1748,645],{"class":374},[360,1750,378],{"class":366},[360,1752,381],{"class":366},[360,1754,1755],{"class":384},"\u002Fproducts\u002Fcanvas-tote",[360,1757,381],{"class":366},[360,1759,412],{"class":366},[360,1761,1762],{"class":415},"View product",[360,1764,419],{"class":366},[360,1766,642],{"class":370},[360,1768,390],{"class":366},[360,1770,1771,1773,1775],{"class":362,"line":433},[360,1772,419],{"class":366},[360,1774,438],{"class":370},[360,1776,390],{"class":366},[360,1778,1779],{"class":362,"line":467},[360,1780,430],{"emptyLinePlaceholder":429},[360,1782,1783,1785,1787,1790],{"class":362,"line":509},[360,1784,367],{"class":366},[360,1786,438],{"class":370},[360,1788,1789],{"class":374}," hidden",[360,1791,390],{"class":366},[360,1793,1794,1796,1798,1800,1802,1804,1806],{"class":362,"line":548},[360,1795,396],{"class":366},[360,1797,623],{"class":370},[360,1799,412],{"class":366},[360,1801,1143],{"class":415},[360,1803,419],{"class":366},[360,1805,623],{"class":370},[360,1807,390],{"class":366},[360,1809,1810,1812,1814,1816,1818,1820,1823,1825,1827,1829,1831,1833],{"class":362,"line":558},[360,1811,396],{"class":366},[360,1813,642],{"class":370},[360,1815,645],{"class":374},[360,1817,378],{"class":366},[360,1819,381],{"class":366},[360,1821,1822],{"class":384},"\u002Fproducts\u002Fwool-scarf",[360,1824,381],{"class":366},[360,1826,412],{"class":366},[360,1828,1762],{"class":415},[360,1830,419],{"class":366},[360,1832,642],{"class":370},[360,1834,390],{"class":366},[360,1836,1837,1839,1841],{"class":362,"line":563},[360,1838,419],{"class":366},[360,1840,438],{"class":370},[360,1842,390],{"class":366},[221,1844,1845,1846,1849],{},"Do not use ",[276,1847,1848],{},"aria-hidden=\"true\""," on a slide that still contains focusable links or buttons. That creates focusable controls that are hidden from assistive technologies.",[234,1851,1853],{"id":1852},"handle-motion-and-auto-rotation","Handle motion and auto-rotation",[221,1855,1856],{},"Auto-rotation is one of the easiest ways to make a carousel inaccessible. It can move content before users finish reading, disorient screen reader users, and distract people with attention or vestibular disabilities.",[221,1858,1859],{},"If a carousel auto-rotates:",[578,1861,1862,1865,1868,1871,1874,1877],{},[601,1863,1864],{},"Provide a pause or stop button.",[601,1866,1867],{},"Put the rotation control before the rotating content in the tab order.",[601,1869,1870],{},"Stop rotation when keyboard focus enters the carousel.",[601,1872,1873],{},"Stop rotation when the pointer hovers over the carousel.",[601,1875,1876],{},"Do not restart rotation unless the user explicitly asks for it.",[601,1878,1879],{},"Keep the control label action-based, such as \"Pause featured articles\" and \"Play featured articles\".",[350,1881,1884],{"className":352,"code":1882,"filename":1883,"language":355,"meta":356,"style":356},"\u003Cbutton type=\"button\" aria-label=\"Pause featured articles\">Pause\u003C\u002Fbutton>\n","Rotation control",[276,1885,1886],{"__ignoreMap":356},[360,1887,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1911,1913,1915,1918,1920,1922],{"class":362,"line":363},[360,1889,367],{"class":366},[360,1891,473],{"class":370},[360,1893,476],{"class":374},[360,1895,378],{"class":366},[360,1897,381],{"class":366},[360,1899,473],{"class":384},[360,1901,381],{"class":366},[360,1903,453],{"class":374},[360,1905,378],{"class":366},[360,1907,381],{"class":366},[360,1909,1910],{"class":384},"Pause featured articles",[360,1912,381],{"class":366},[360,1914,412],{"class":366},[360,1916,1917],{"class":415},"Pause",[360,1919,419],{"class":366},[360,1921,473],{"class":370},[360,1923,390],{"class":366},[221,1925,1926],{},"Respect reduced motion preferences for scripted animation, transitions, and smooth scrolling.",[350,1928,1931],{"className":1581,"code":1929,"filename":1930,"language":1584,"meta":356,"style":356},"@media (prefers-reduced-motion: reduce) {\n  .carousel {\n    scroll-behavior: auto;\n  }\n\n  .carousel *,\n  .carousel *::before,\n  .carousel *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n","Reduced motion",[276,1932,1933,1955,1964,1976,1981,1985,1996,2012,2027,2042,2056,2069,2073],{"__ignoreMap":356},[360,1934,1935,1939,1942,1945,1947,1950,1953],{"class":362,"line":363},[360,1936,1938],{"class":1937},"s7zQu","@media",[360,1940,1941],{"class":366}," (",[360,1943,1944],{"class":415},"prefers-reduced-motion",[360,1946,1624],{"class":366},[360,1948,1949],{"class":415}," reduce",[360,1951,1952],{"class":366},")",[360,1954,1615],{"class":366},[360,1956,1957,1960,1962],{"class":362,"line":393},[360,1958,1959],{"class":366},"  .",[360,1961,589],{"class":1593},[360,1963,1615],{"class":366},[360,1965,1966,1969,1971,1974],{"class":362,"line":426},[360,1967,1968],{"class":1620},"    scroll-behavior",[360,1970,1624],{"class":366},[360,1972,1973],{"class":415}," auto",[360,1975,1634],{"class":366},[360,1977,1978],{"class":362,"line":433},[360,1979,1980],{"class":366},"  }\n",[360,1982,1983],{"class":362,"line":467},[360,1984,430],{"emptyLinePlaceholder":429},[360,1986,1987,1989,1991,1994],{"class":362,"line":509},[360,1988,1959],{"class":366},[360,1990,589],{"class":1593},[360,1992,1993],{"class":1593}," *",[360,1995,1602],{"class":366},[360,1997,1998,2000,2002,2004,2007,2010],{"class":362,"line":548},[360,1999,1959],{"class":366},[360,2001,589],{"class":1593},[360,2003,1993],{"class":1593},[360,2005,2006],{"class":366},"::",[360,2008,2009],{"class":374},"before",[360,2011,1602],{"class":366},[360,2013,2014,2016,2018,2020,2022,2025],{"class":362,"line":558},[360,2015,1959],{"class":366},[360,2017,589],{"class":1593},[360,2019,1993],{"class":1593},[360,2021,2006],{"class":366},[360,2023,2024],{"class":374},"after",[360,2026,1615],{"class":366},[360,2028,2029,2032,2034,2037,2040],{"class":362,"line":563},[360,2030,2031],{"class":1620},"    animation-duration",[360,2033,1624],{"class":366},[360,2035,2036],{"class":1627}," 0.01ms",[360,2038,2039],{"class":1627}," !important",[360,2041,1634],{"class":366},[360,2043,2044,2047,2049,2052,2054],{"class":362,"line":596},[360,2045,2046],{"class":1620},"    animation-iteration-count",[360,2048,1624],{"class":366},[360,2050,2051],{"class":1627}," 1",[360,2053,2039],{"class":1627},[360,2055,1634],{"class":366},[360,2057,2058,2061,2063,2065,2067],{"class":362,"line":606},[360,2059,2060],{"class":1620},"    transition-duration",[360,2062,1624],{"class":366},[360,2064,2036],{"class":1627},[360,2066,2039],{"class":1627},[360,2068,1634],{"class":366},[360,2070,2071],{"class":362,"line":617},[360,2072,1980],{"class":366},[360,2074,2075],{"class":362,"line":637},[360,2076,1650],{"class":366},[234,2078,2080],{"id":2079},"announce-changes-with-care","Announce changes with care",[221,2082,2083],{},"Not every carousel movement needs a live region. Over-announcing slide changes can be as disruptive as not announcing them.",[221,2085,2086],{},"Use these defaults:",[578,2088,2089,2096,2102,2105],{},[601,2090,2091,2092,2095],{},"Use ",[276,2093,2094],{},"aria-live=\"off\""," while a carousel is auto-rotating.",[601,2097,2091,2098,2101],{},[276,2099,2100],{},"aria-live=\"polite\""," for user-initiated slide changes when the changed content is not otherwise obvious to assistive technologies.",[601,2103,2104],{},"Do not move focus just to announce a slide change.",[601,2106,2107],{},"Keep announcements short, such as \"Slide 2 of 5\" or the slide title.",[350,2109,2112],{"className":352,"code":2110,"filename":2111,"language":355,"meta":356,"style":356},"\u003Cp class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  Showing wool scarf, slide 2 of 5\n\u003C\u002Fp>\n","Slide status",[276,2113,2114,2156,2161],{"__ignoreMap":356},[360,2115,2116,2118,2120,2122,2124,2126,2129,2131,2134,2136,2138,2141,2143,2146,2148,2150,2152,2154],{"class":362,"line":363},[360,2117,367],{"class":366},[360,2119,221],{"class":370},[360,2121,441],{"class":374},[360,2123,378],{"class":366},[360,2125,381],{"class":366},[360,2127,2128],{"class":384},"visually-hidden",[360,2130,381],{"class":366},[360,2132,2133],{"class":374}," aria-live",[360,2135,378],{"class":366},[360,2137,381],{"class":366},[360,2139,2140],{"class":384},"polite",[360,2142,381],{"class":366},[360,2144,2145],{"class":374}," aria-atomic",[360,2147,378],{"class":366},[360,2149,381],{"class":366},[360,2151,1109],{"class":384},[360,2153,381],{"class":366},[360,2155,390],{"class":366},[360,2157,2158],{"class":362,"line":393},[360,2159,2160],{"class":415},"  Showing wool scarf, slide 2 of 5\n",[360,2162,2163,2165,2167],{"class":362,"line":426},[360,2164,419],{"class":366},[360,2166,221],{"class":370},[360,2168,390],{"class":366},[221,2170,2171],{},"If focus moves to the newly shown slide content as part of a deliberate workflow, an additional live region may be redundant.",[234,2173,2175],{"id":2174},"choose-picker-semantics-carefully","Choose picker semantics carefully",[221,2177,2178],{},"Slide pickers can be buttons or tabs. The choice matters.",[221,2180,2181],{},"Use buttons when:",[578,2183,2184,2187,2190,2193],{},[601,2185,2186],{},"Multiple slides can be visible at once.",[601,2188,2189],{},"Slides are part of a scrollable list.",[601,2191,2192],{},"Picker controls jump the scroll position but do not hide every other slide.",[601,2194,2195,2196,2198],{},"You want simple ",[276,2197,1546],{}," navigation through each picker.",[221,2200,2201],{},"Use tabs only when:",[578,2203,2204,2207,2215,2218,2221],{},[601,2205,2206],{},"One panel is presented at a time.",[601,2208,2209,2210,2212,2213,305],{},"Each ",[276,2211,323],{}," has a corresponding ",[276,2214,327],{},[601,2216,2217],{},"The selected tab state is always correct.",[601,2219,2220],{},"Inactive tabpanels are hidden from users.",[601,2222,2223],{},"Arrow key behavior follows the tabs pattern.",[350,2225,2228],{"className":352,"code":2226,"filename":2227,"language":355,"meta":356,"style":356},"\u003Cdiv aria-label=\"Featured products\" aria-roledescription=\"carousel\">\n  \u003Cdiv role=\"tablist\" aria-label=\"Choose product\">\n    \u003Cbutton\n      role=\"tab\"\n      aria-selected=\"true\"\n      aria-controls=\"panel-tote\"\n      id=\"tab-tote\"\n    >\n      Canvas tote\n    \u003C\u002Fbutton>\n    \u003Cbutton\n      role=\"tab\"\n      aria-selected=\"false\"\n      aria-controls=\"panel-scarf\"\n      id=\"tab-scarf\"\n    >\n      Wool scarf\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv role=\"tabpanel\" id=\"panel-tote\" aria-labelledby=\"tab-tote\">\n    \u003Ch3>Canvas tote\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv role=\"tabpanel\" id=\"panel-scarf\" aria-labelledby=\"tab-scarf\" hidden>\n    \u003Ch3>Wool scarf\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","Tabbed carousel shape",[276,2229,2230,2259,2287,2294,2307,2320,2334,2348,2353,2358,2366,2372,2384,2396,2409,2422,2426,2431,2439,2447,2451,2489,2505,2513,2518,2559,2576,2585],{"__ignoreMap":356},[360,2231,2232,2234,2236,2238,2240,2242,2245,2247,2249,2251,2253,2255,2257],{"class":362,"line":363},[360,2233,367],{"class":366},[360,2235,438],{"class":370},[360,2237,453],{"class":374},[360,2239,378],{"class":366},[360,2241,381],{"class":366},[360,2243,2244],{"class":384},"Featured products",[360,2246,381],{"class":366},[360,2248,1702],{"class":374},[360,2250,378],{"class":366},[360,2252,381],{"class":366},[360,2254,589],{"class":384},[360,2256,381],{"class":366},[360,2258,390],{"class":366},[360,2260,2261,2263,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285],{"class":362,"line":393},[360,2262,396],{"class":366},[360,2264,438],{"class":370},[360,2266,1061],{"class":374},[360,2268,378],{"class":366},[360,2270,381],{"class":366},[360,2272,319],{"class":384},[360,2274,381],{"class":366},[360,2276,453],{"class":374},[360,2278,378],{"class":366},[360,2280,381],{"class":366},[360,2282,1079],{"class":384},[360,2284,381],{"class":366},[360,2286,390],{"class":366},[360,2288,2289,2291],{"class":362,"line":426},[360,2290,470],{"class":366},[360,2292,2293],{"class":370},"button\n",[360,2295,2296,2299,2301,2303,2305],{"class":362,"line":433},[360,2297,2298],{"class":374},"      role",[360,2300,378],{"class":366},[360,2302,381],{"class":366},[360,2304,323],{"class":384},[360,2306,816],{"class":366},[360,2308,2309,2312,2314,2316,2318],{"class":362,"line":467},[360,2310,2311],{"class":374},"      aria-selected",[360,2313,378],{"class":366},[360,2315,381],{"class":366},[360,2317,1109],{"class":384},[360,2319,816],{"class":366},[360,2321,2322,2325,2327,2329,2332],{"class":362,"line":509},[360,2323,2324],{"class":374},"      aria-controls",[360,2326,378],{"class":366},[360,2328,381],{"class":366},[360,2330,2331],{"class":384},"panel-tote",[360,2333,816],{"class":366},[360,2335,2336,2339,2341,2343,2346],{"class":362,"line":548},[360,2337,2338],{"class":374},"      id",[360,2340,378],{"class":366},[360,2342,381],{"class":366},[360,2344,2345],{"class":384},"tab-tote",[360,2347,816],{"class":366},[360,2349,2350],{"class":362,"line":558},[360,2351,2352],{"class":366},"    >\n",[360,2354,2355],{"class":362,"line":563},[360,2356,2357],{"class":415},"      Canvas tote\n",[360,2359,2360,2362,2364],{"class":362,"line":596},[360,2361,681],{"class":366},[360,2363,473],{"class":370},[360,2365,390],{"class":366},[360,2367,2368,2370],{"class":362,"line":606},[360,2369,470],{"class":366},[360,2371,2293],{"class":370},[360,2373,2374,2376,2378,2380,2382],{"class":362,"line":617},[360,2375,2298],{"class":374},[360,2377,378],{"class":366},[360,2379,381],{"class":366},[360,2381,323],{"class":384},[360,2383,816],{"class":366},[360,2385,2386,2388,2390,2392,2394],{"class":362,"line":637},[360,2387,2311],{"class":374},[360,2389,378],{"class":366},[360,2391,381],{"class":366},[360,2393,1508],{"class":384},[360,2395,816],{"class":366},[360,2397,2398,2400,2402,2404,2407],{"class":362,"line":668},[360,2399,2324],{"class":374},[360,2401,378],{"class":366},[360,2403,381],{"class":366},[360,2405,2406],{"class":384},"panel-scarf",[360,2408,816],{"class":366},[360,2410,2411,2413,2415,2417,2420],{"class":362,"line":678},[360,2412,2338],{"class":374},[360,2414,378],{"class":366},[360,2416,381],{"class":366},[360,2418,2419],{"class":384},"tab-scarf",[360,2421,816],{"class":366},[360,2423,2424],{"class":362,"line":688},[360,2425,2352],{"class":366},[360,2427,2428],{"class":362,"line":697},[360,2429,2430],{"class":415},"      Wool scarf\n",[360,2432,2433,2435,2437],{"class":362,"line":706},[360,2434,681],{"class":366},[360,2436,473],{"class":370},[360,2438,390],{"class":366},[360,2440,2441,2443,2445],{"class":362,"line":724},[360,2442,551],{"class":366},[360,2444,438],{"class":370},[360,2446,390],{"class":366},[360,2448,2449],{"class":362,"line":752},[360,2450,430],{"emptyLinePlaceholder":429},[360,2452,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487],{"class":362,"line":761},[360,2454,396],{"class":366},[360,2456,438],{"class":370},[360,2458,1061],{"class":374},[360,2460,378],{"class":366},[360,2462,381],{"class":366},[360,2464,327],{"class":384},[360,2466,381],{"class":366},[360,2468,401],{"class":374},[360,2470,378],{"class":366},[360,2472,381],{"class":366},[360,2474,2331],{"class":384},[360,2476,381],{"class":366},[360,2478,375],{"class":374},[360,2480,378],{"class":366},[360,2482,381],{"class":366},[360,2484,2345],{"class":384},[360,2486,381],{"class":366},[360,2488,390],{"class":366},[360,2490,2491,2493,2495,2497,2499,2501,2503],{"class":362,"line":770},[360,2492,470],{"class":366},[360,2494,623],{"class":370},[360,2496,412],{"class":366},[360,2498,1116],{"class":415},[360,2500,419],{"class":366},[360,2502,623],{"class":370},[360,2504,390],{"class":366},[360,2506,2507,2509,2511],{"class":362,"line":779},[360,2508,551],{"class":366},[360,2510,438],{"class":370},[360,2512,390],{"class":366},[360,2514,2516],{"class":362,"line":2515},24,[360,2517,430],{"emptyLinePlaceholder":429},[360,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541,2543,2545,2547,2549,2551,2553,2555,2557],{"class":362,"line":2520},25,[360,2522,396],{"class":366},[360,2524,438],{"class":370},[360,2526,1061],{"class":374},[360,2528,378],{"class":366},[360,2530,381],{"class":366},[360,2532,327],{"class":384},[360,2534,381],{"class":366},[360,2536,401],{"class":374},[360,2538,378],{"class":366},[360,2540,381],{"class":366},[360,2542,2406],{"class":384},[360,2544,381],{"class":366},[360,2546,375],{"class":374},[360,2548,378],{"class":366},[360,2550,381],{"class":366},[360,2552,2419],{"class":384},[360,2554,381],{"class":366},[360,2556,1789],{"class":374},[360,2558,390],{"class":366},[360,2560,2562,2564,2566,2568,2570,2572,2574],{"class":362,"line":2561},26,[360,2563,470],{"class":366},[360,2565,623],{"class":370},[360,2567,412],{"class":366},[360,2569,1143],{"class":415},[360,2571,419],{"class":366},[360,2573,623],{"class":370},[360,2575,390],{"class":366},[360,2577,2579,2581,2583],{"class":362,"line":2578},27,[360,2580,551],{"class":366},[360,2582,438],{"class":370},[360,2584,390],{"class":366},[360,2586,2588,2590,2592],{"class":362,"line":2587},28,[360,2589,419],{"class":366},[360,2591,438],{"class":370},[360,2593,390],{"class":366},[221,2595,2596],{},"A scroller that merely moves content left and right is usually not a tabs widget.",[234,2598,2600],{"id":2599},"keep-visual-states-perceivable","Keep visual states perceivable",[221,2602,2603],{},"Carousel state should not depend on color alone.",[578,2605,2606,2609,2612,2615,2618],{},[601,2607,2608],{},"Give active slide pickers a visible shape, outline, underline, icon, or text change in addition to color.",[601,2610,2611],{},"Ensure focus indicators have at least 3:1 contrast against adjacent colors.",[601,2613,2614],{},"Ensure icon buttons and disabled states remain understandable in forced colors mode.",[601,2616,2617],{},"Do not hide scrollbars unless an equally clear affordance and keyboard path remain.",[601,2619,2620],{},"Make touch targets at least 24 by 24 CSS pixels, and aim for 44 by 44 CSS pixels when space allows.",[350,2622,2625],{"className":1581,"code":2623,"filename":2624,"language":1584,"meta":356,"style":356},".carousel-picker[aria-current=\"true\"],\n.carousel-picker[aria-disabled=\"true\"] {\n  outline: 2px solid currentColor;\n}\n\n@media (forced-colors: active) {\n  .carousel-picker[aria-current=\"true\"],\n  .carousel-picker[aria-disabled=\"true\"] {\n    outline-color: Highlight;\n  }\n}\n","Forced colors-friendly states",[276,2626,2627,2651,2675,2688,2692,2696,2714,2734,2756,2768,2772],{"__ignoreMap":356},[360,2628,2629,2631,2634,2637,2640,2642,2644,2646,2648],{"class":362,"line":363},[360,2630,305],{"class":366},[360,2632,2633],{"class":1593},"carousel-picker",[360,2635,2636],{"class":366},"[",[360,2638,2639],{"class":374},"aria-current",[360,2641,378],{"class":366},[360,2643,381],{"class":366},[360,2645,1109],{"class":384},[360,2647,381],{"class":366},[360,2649,2650],{"class":366},"],\n",[360,2652,2653,2655,2657,2659,2662,2664,2666,2668,2670,2673],{"class":362,"line":393},[360,2654,305],{"class":366},[360,2656,2633],{"class":1593},[360,2658,2636],{"class":366},[360,2660,2661],{"class":374},"aria-disabled",[360,2663,378],{"class":366},[360,2665,381],{"class":366},[360,2667,1109],{"class":384},[360,2669,381],{"class":366},[360,2671,2672],{"class":366},"]",[360,2674,1615],{"class":366},[360,2676,2677,2679,2681,2684,2686],{"class":362,"line":426},[360,2678,1621],{"class":1620},[360,2680,1624],{"class":366},[360,2682,2683],{"class":1627}," 2px",[360,2685,1631],{"class":415},[360,2687,1634],{"class":366},[360,2689,2690],{"class":362,"line":433},[360,2691,1650],{"class":366},[360,2693,2694],{"class":362,"line":467},[360,2695,430],{"emptyLinePlaceholder":429},[360,2697,2698,2700,2702,2705,2707,2710,2712],{"class":362,"line":509},[360,2699,1938],{"class":1937},[360,2701,1941],{"class":366},[360,2703,2704],{"class":415},"forced-colors",[360,2706,1624],{"class":366},[360,2708,2709],{"class":415}," active",[360,2711,1952],{"class":366},[360,2713,1615],{"class":366},[360,2715,2716,2718,2720,2722,2724,2726,2728,2730,2732],{"class":362,"line":548},[360,2717,1959],{"class":366},[360,2719,2633],{"class":1593},[360,2721,2636],{"class":366},[360,2723,2639],{"class":374},[360,2725,378],{"class":366},[360,2727,381],{"class":366},[360,2729,1109],{"class":384},[360,2731,381],{"class":366},[360,2733,2650],{"class":366},[360,2735,2736,2738,2740,2742,2744,2746,2748,2750,2752,2754],{"class":362,"line":558},[360,2737,1959],{"class":366},[360,2739,2633],{"class":1593},[360,2741,2636],{"class":366},[360,2743,2661],{"class":374},[360,2745,378],{"class":366},[360,2747,381],{"class":366},[360,2749,1109],{"class":384},[360,2751,381],{"class":366},[360,2753,2672],{"class":366},[360,2755,1615],{"class":366},[360,2757,2758,2761,2763,2766],{"class":362,"line":563},[360,2759,2760],{"class":1620},"    outline-color",[360,2762,1624],{"class":366},[360,2764,2765],{"class":415}," Highlight",[360,2767,1634],{"class":366},[360,2769,2770],{"class":362,"line":596},[360,2771,1980],{"class":366},[360,2773,2774],{"class":362,"line":606},[360,2775,1650],{"class":366},[234,2777,2779],{"id":2778},"test-the-carousel-as-a-component","Test the carousel as a component",[221,2781,2782],{},"Automated checks are useful, but carousel accessibility depends heavily on behavior. Manual testing is essential.",[221,2784,2785],{},"Carousel test checklist:",[578,2787,2788,2791,2794,2797,2800,2805,2808,2811,2814,2817,2820,2823,2826,2829,2832,2835],{},[601,2789,2790],{},"The carousel has a clear accessible name when it is exposed as a region or group.",[601,2792,2793],{},"Previous, next, pause, play, and picker controls are real buttons or fully implement button behavior.",[601,2795,2796],{},"Every control has a unique accessible name.",[601,2798,2799],{},"All pointer and drag functionality has a keyboard alternative.",[601,2801,2802,2804],{},[276,2803,1546],{}," order follows the visual and reading order.",[601,2806,2807],{},"Focus remains visible and is not hidden by sticky controls or clipped slide containers.",[601,2809,2810],{},"Previous and next controls can be activated repeatedly without focus moving unexpectedly.",[601,2812,2813],{},"Disabled or unavailable controls expose the correct disabled state.",[601,2815,2816],{},"Auto-rotation pauses on focus and hover.",[601,2818,2819],{},"Auto-rotation does not restart without user action.",[601,2821,2822],{},"Reduced motion preferences are respected.",[601,2824,2825],{},"Screen reader output matches the visible component: roles, names, selected states, and announcements are not misleading.",[601,2827,2828],{},"Off-screen or inactive slides do not create unexpected tab stops for the chosen pattern.",[601,2830,2831],{},"Slide picker semantics match the behavior: buttons for simple picker controls, tabs only for real tabbed panels.",[601,2833,2834],{},"The component works at 200 percent zoom and narrow viewport sizes.",[601,2836,2837],{},"Active, focus, disabled, and selected states remain visible in forced colors mode.",[234,2839,2841],{"id":2840},"carousel-wcag-map","Carousel WCAG map",[221,2843,2844],{},"The most relevant WCAG success criteria for carousels are usually these:",[242,2846,2847,2857],{},[245,2848,2849],{},[248,2850,2851,2854],{},[251,2852,2853],{},"Criteria",[251,2855,2856],{},"Carousel check",[261,2858,2859,2867,2875,2883,2891,2899,2907,2915,2923,2931,2939,2947,2955,2963,2971,2979,2987,2995,3003],{},[248,2860,2861,2864],{},[266,2862,2863],{},"1.1.1 Non-text Content",[266,2865,2866],{},"Images, icon buttons, and thumbnails have appropriate text alternatives or accessible names.",[248,2868,2869,2872],{},[266,2870,2871],{},"1.3.1 Info and Relationships",[266,2873,2874],{},"Slide structure, control groups, labels, and selected states are programmatically exposed.",[248,2876,2877,2880],{},[266,2878,2879],{},"1.3.2 Meaningful Sequence",[266,2881,2882],{},"DOM order matches the reading and keyboard order.",[248,2884,2885,2888],{},[266,2886,2887],{},"1.4.1 Use of Color",[266,2889,2890],{},"Active, selected, disabled, and error states are not conveyed by color alone.",[248,2892,2893,2896],{},[266,2894,2895],{},"1.4.3 Contrast Minimum",[266,2897,2898],{},"Text inside slides and controls meets contrast requirements.",[248,2900,2901,2904],{},[266,2902,2903],{},"1.4.10 Reflow",[266,2905,2906],{},"The carousel works when zoomed or viewed in narrow layouts.",[248,2908,2909,2912],{},[266,2910,2911],{},"1.4.11 Non-text Contrast",[266,2913,2914],{},"Buttons, focus indicators, and active picker states have sufficient contrast.",[248,2916,2917,2920],{},[266,2918,2919],{},"2.1.1 Keyboard",[266,2921,2922],{},"All carousel functionality works with a keyboard.",[248,2924,2925,2928],{},[266,2926,2927],{},"2.1.2 No Keyboard Trap",[266,2929,2930],{},"Users can leave the carousel with normal keyboard navigation.",[248,2932,2933,2936],{},[266,2934,2935],{},"2.2.2 Pause, Stop, Hide",[266,2937,2938],{},"Auto-rotating or moving content can be paused, stopped, or hidden.",[248,2940,2941,2944],{},[266,2942,2943],{},"2.4.3 Focus Order",[266,2945,2946],{},"Focus moves through controls and slide content in a meaningful order.",[248,2948,2949,2952],{},[266,2950,2951],{},"2.4.7 Focus Visible",[266,2953,2954],{},"Keyboard focus is always visible.",[248,2956,2957,2960],{},[266,2958,2959],{},"2.4.11 Focus Not Obscured",[266,2961,2962],{},"Focused controls and slide links are not hidden by overlays or clipping.",[248,2964,2965,2968],{},[266,2966,2967],{},"2.5.3 Label in Name",[266,2969,2970],{},"Visible control text is included in the accessible name.",[248,2972,2973,2976],{},[266,2974,2975],{},"2.5.7 Dragging Movements",[266,2977,2978],{},"Dragging has a non-drag alternative.",[248,2980,2981,2984],{},[266,2982,2983],{},"2.5.8 Target Size Minimum",[266,2985,2986],{},"Controls and picker targets are large enough to operate.",[248,2988,2989,2992],{},[266,2990,2991],{},"3.2.1 On Focus",[266,2993,2994],{},"Focusing a control does not unexpectedly change context.",[248,2996,2997,3000],{},[266,2998,2999],{},"4.1.2 Name, Role, Value",[266,3001,3002],{},"Custom controls expose correct names, roles, values, and states.",[248,3004,3005,3008],{},[266,3006,3007],{},"4.1.3 Status Messages",[266,3009,3010],{},"Slide changes are announced when appropriate without moving focus.",[234,3012,3014],{"id":3013},"useful-resources","Useful resources",[578,3016,3017,3026,3034,3042],{},[601,3018,3019,3025],{},[642,3020,3024],{"href":3021,"rel":3022},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ftutorials\u002Fcarousels\u002F",[3023],"nofollow","WAI Carousels Tutorial"," - accessible carousel structure, functionality, animation, and styling guidance.",[601,3027,3028,3033],{},[642,3029,3032],{"href":3030,"rel":3031},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Fcarousel\u002F",[3023],"ARIA Authoring Practices Guide: Carousel Pattern"," - expected carousel roles, states, properties, and keyboard behavior.",[601,3035,3036,3041],{},[642,3037,3040],{"href":3038,"rel":3039},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Ftabs\u002F",[3023],"ARIA Authoring Practices Guide: Tabs Pattern"," - use this when slide pickers are truly tabs.",[601,3043,3044,3049],{},[642,3045,3048],{"href":3046,"rel":3047},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002Fquickref\u002F",[3023],"WCAG 2.2 Quick Reference"," - success criteria, techniques, and filters.",[3051,3052,3053],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":356,"searchDepth":393,"depth":393,"links":3055},[3056,3057,3058,3059,3060,3061,3062,3063,3064,3065,3066,3067,3068],{"id":236,"depth":393,"text":237},{"id":344,"depth":393,"text":345},{"id":883,"depth":393,"text":884},{"id":1187,"depth":393,"text":1188},{"id":1532,"depth":393,"text":1533},{"id":1660,"depth":393,"text":1661},{"id":1852,"depth":393,"text":1853},{"id":2079,"depth":393,"text":2080},{"id":2174,"depth":393,"text":2175},{"id":2599,"depth":393,"text":2600},{"id":2778,"depth":393,"text":2779},{"id":2840,"depth":393,"text":2841},{"id":3013,"depth":393,"text":3014},"Build accessible carousels with semantic structure, clear controls, keyboard support, motion controls, and tested ARIA patterns.","md",null,{},{"icon":174},{"title":3075,"description":3076},"Carousel accessibility best practices guide","A practical guide to accessible carousel markup, controls, keyboard support, motion, ARIA patterns, and WCAG checks.","ERW4z2pnpCXRGzG6ed8yIVUFs3g_7AzxgCSKFbKNeSw",[3079,3081],{"title":161,"path":162,"stem":163,"description":3080,"icon":164,"children":-1},"Use CSS animation-trigger to animate slides based on their scroll state.",{"title":181,"path":182,"stem":183,"description":3082,"icon":184,"children":-1},"Use Blossom Carousel Agent Skills to guide AI coding assistants.",1780251481875]