CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1741627416749276515"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1741627416749276515"> <title> Functionality | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Functionality" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/carousels/functionality/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/carousels/functionality/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Functionality" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Functionality","url":"https://www.w3.org/WAI/tutorials/carousels/functionality/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-functionality "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tutorials/"><span>Tutorials</span></a></li><li><a lang="en" href="/WAI/tutorials/carousels/"><span>Carousels</span></a></li><li><a lang="en" href="/WAI/tutorials/carousels/functionality/" aria-current="page"><span>Functionality</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" aria-current="location" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li> <li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" aria-current="page" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Functionality </h1><p>in <a lang="en" href="/WAI/tutorials/carousels/"><span>Carousels Tutorial</span></a></p></header> <p>Provide functionality to select carousel items and to inform users about the change of carousel items.</p> <h2 id="add-previous-and-next-buttons">Add previous and next buttons</h2> <p>Provide buttons to allow users to switch back and forth between items. Use <code class="language-plaintext highlighter-rouge"><button></code> elements to provide semantic meaning, support for assistive technologies, and consistent keyboard behavior. Create and add the buttons using JavaScript, as they only work when JavaScript is available anyway.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code: JavaScript</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">ctrls</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">ul</span><span class="dl">'</span><span class="p">);</span> <span class="nx">ctrls</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">controls</span><span class="dl">'</span><span class="p">;</span> <span class="nx">ctrls</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1"><li></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"><button type="button" class="btn-prev"></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"><img src="img/chevron-left.png" alt="Previous Item"></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"></button></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"></li></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"><li></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"><button type="button" class="btn-next"></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"><img src="img/chevron-right.png" alt="Next Item"></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"></button></span><span class="dl">'</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"></li></span><span class="dl">'</span><span class="p">;</span> <span class="nx">ctrls</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.btn-prev</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="nf">prevSlide</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span> <span class="p">});</span> <span class="nx">ctrls</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.btn-next</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="nf">nextSlide</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span> <span class="p">});</span> <span class="nx">carousel</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">ctrls</span><span class="p">);</span> </code></pre></div></div> </div></aside> <p>A <a href="/WAI/tutorials/carousels/working-example/">working demo example</a> for this code is available.</p> <h3 id="announce-the-current-item">Announce the current item</h3> <p>Use a <a href="https://www.w3.org/TR/wai-aria-1.1/#live_region_roles">WAI-ARIA live region</a> to inform screen reader users what item is currently shown. In this example, a visually hidden, “polite” live region is used and added to the carousel when the carousel is loaded. Then, when clicking the previous or next buttons, the text “Item x of y” (with <var>x</var> for current item number and <var>y</var> for the number of items) is set to this live region. Capable screen readers will announce this text.</p> <p>Allow the user to maintain control of the keyboard focus. When the carousel advances automatically, users should not be drawn away from their current place in the page. Also, do not move keyboard focus when the previous or next buttons are used; moving the focus makes it harder for users to browse back and forth between the slides.</p> <p>Find more information about WAI-ARIA in the <a href="/WAI/standards-guidelines/aria/">WAI-ARIA Overview</a>, the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a> and the <a href="https://www.w3.org/TR/wai-aria-1.1/">Specification</a>.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code: Add a live region to the carousel</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">liveregion</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span> <span class="nx">liveregion</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">aria-live</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">polite</span><span class="dl">'</span><span class="p">);</span> <span class="nx">liveregion</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">aria-atomic</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">true</span><span class="dl">'</span><span class="p">);</span> <span class="nx">liveregion</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">class</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">liveregion visuallyhidden</span><span class="dl">'</span><span class="p">);</span> <span class="nx">carousel</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">liveregion</span><span class="p">);</span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: Change text in the liveregion to have that text announced</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">if </span><span class="p">(</span><span class="nx">announceItem</span><span class="p">)</span> <span class="p">{</span> <span class="nx">carousel</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.liveregion</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Item </span><span class="dl">'</span> <span class="o">+</span> <span class="p">(</span><span class="nx">new_current</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> of </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">slides</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> </div></aside> <h2 class="newex" id="add-navigation-buttons">Add navigation buttons</h2> <p>Display buttons for each item in the carousel and highlight the current item. This allows users to get an overview of the carousel content, where they are in the sequence and will enable them to navigate directly to any item.</p> <p>The list with buttons in the example below is added using JavaScript, with a number on the button that corresponds to the carousel item. The buttons are numbered matching the corresponding carousel items. The button for the active carousel item is highlighted both visually, and by using text that is visually hidden (for screen readers).</p> <p>See the <a href="/WAI/tutorials/carousels/styling/">carousel styling</a> page for more information on how to highlight the active carousel item in an accessible way.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code: </header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"slidenav"</span><span class="nt">></span> <span class="nt"><li></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"current"</span> <span class="na">data-slide=</span><span class="s">"0"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>News<span class="nt"></span></span> 1 <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>(Current Slide)<span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></li></span> <span class="nt"><li></span> <span class="nt"><button</span> <span class="na">data-slide=</span><span class="s">"1"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>News<span class="nt"></span></span> 2 <span class="nt"></button></span> <span class="nt"></li></span> <span class="nt"><li></span> <span class="nt"><button</span> <span class="na">data-slide=</span><span class="s">"2"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>News<span class="nt"></span></span> 3 <span class="nt"></button></span> <span class="nt"></li></span> <span class="nt"></ul></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <style> .slidenav li { display: inline-block; } .slidenav button { border: 2px solid #036; background-color: #036; line-height: 1em; height: 2em; width: 2em; font-weight: bold; color: #fff; } .slidenav button.current { border-radius: .5em; background-color: #fff; color: #333; } .slidenav button:hover, .slidenav button:focus { border: 2px dashed #fff; } .slidenav button.current:hover, .slidenav button.current:focus { border: 2px dashed #036; } </style> <ul class="slidenav as-sample"> <li> <button class="current" data-slide="0" type="button"> <span class="visuallyhidden">News</span> 1 <span class="visuallyhidden">(Current Slide)</span> </button> </li> <li> <button data-slide="1" type="button"> <span class="visuallyhidden">News</span> 2 </button> </li> <li> <button data-slide="2" type="button"> <span class="visuallyhidden">News</span> 3 </button> </li> </ul> <style> .slidenav.as-sample { position: static; } </style> </div></aside> <h3 id="focus-the-selected-carousel-item">Focus the selected carousel item</h3> <p>When users select an item with those navigation buttons, the focus should be set on the selected item. In this case, the focus needs to be set to the <code class="language-plaintext highlighter-rouge"><li></code> element that has the class <code class="language-plaintext highlighter-rouge">current</code> set, after the change or transition. This makes interaction easier for keyboard and assistive technology users.</p> <p>By default, <code class="language-plaintext highlighter-rouge"><li></code> elements cannot receive focus. By setting its <code class="language-plaintext highlighter-rouge">tabindex</code> attribute to <code class="language-plaintext highlighter-rouge">-1</code>, the element is enabled to receive focus through JavaScript.</p> <aside class="box box-large box-icon" id="related"><header class="box-h box-h-large box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-default "><use xlink:href="/WAI/assets/images/icons.svg#icon-default"></use></svg> Related WCAG resources</header><div class="box-i"> <p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:</p> <p><strong>Success Criteria:</strong></p> <ul><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic"><strong>1.3.1</strong> Info and Relationships:</a> Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)</li><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-keyboard-operation-keyboard-operable"><strong>2.1.1</strong> Keyboard:</a> All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)</li><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-ensure-compat-rsv"><strong>4.1.2</strong> Name, Role, Value:</a> For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)</li></ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href=""> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target"></span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/carousels/animations/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Animations</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/carousels/functionality.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/carousels/functionality/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div><strong>Status:</strong> Updated 13 April 2017 (first published May 2015) </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.</p> </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/sponsoring/">Sponsors and Funders</a></li> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1741627416749276515"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1741627416749276515"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>