{"id":114,"date":"2022-05-10T17:24:17","date_gmt":"2022-05-10T17:24:17","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/web-design-system-documentation\/?page_id=48"},"modified":"2022-05-10T18:02:36","modified_gmt":"2022-05-10T18:02:36","slug":"carousels-sliders-rotators","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/","title":{"rendered":"Carousels, sliders, rotators"},"content":{"rendered":"\n<p class=\"is-style-lead\">Avoid carousels, sliders and rotators.<\/p>\n\n\n\n<p>A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user.<\/p>\n\n\n\n<p>Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit international or low-literacy users from having enough time to read the message.<\/p>\n\n\n\n<p>Messages that are not always displayed on the page may not deliver the appropriate message to appropriate users if the message happens not to be showing when the user is looking.<\/p>\n\n\n\n<p><strong>Data from higher education websites shows that carousels are ineffective.<\/strong><br>The web team at ND.edu (Notre Dame) has shared&nbsp;<a href=\"https:\/\/erikrunyon.com\/2013\/01\/carousel-interaction-stats\/\">data on the rates of interaction with the carousel on the ND.edu homepage<\/a>. In January through June 2013, only 1.08% of users clicked on a carousel feature; of this 1.08% of users, 89.1% of the clicks were on the first message in the carousel. See&nbsp;<a href=\"http:\/\/www.uofadmissionsmarketing.com\/2013\/02\/using-carousels-in-higher-education.html\">additional information about higher education websites from U of Admissions Marketing<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avoid carousels, sliders and rotators. A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user. Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":105,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Carousels, sliders, rotators - Equity<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carousels, sliders, rotators - Equity\" \/>\n<meta property=\"og:description\" content=\"Avoid carousels, sliders and rotators. A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user. Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/\" \/>\n<meta property=\"og:site_name\" content=\"Equity\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-10T18:02:36+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/\",\"name\":\"Carousels, sliders, rotators - Equity\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website\"},\"datePublished\":\"2022-05-10T17:24:17+00:00\",\"dateModified\":\"2022-05-10T18:02:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Practices &#038; Guidelines\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Carousels, sliders, rotators\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/\",\"name\":\"Equity\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Carousels, sliders, rotators - Equity","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Carousels, sliders, rotators - Equity","og_description":"Avoid carousels, sliders and rotators. A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user. Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit [&hellip;]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/","og_site_name":"Equity","article_modified_time":"2022-05-10T18:02:36+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/","url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/","name":"Carousels, sliders, rotators - Equity","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website"},"datePublished":"2022-05-10T17:24:17+00:00","dateModified":"2022-05-10T18:02:36+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/equity\/"},{"@type":"ListItem","position":2,"name":"Best Practices &#038; Guidelines","item":"https:\/\/digitaldocumentation.wustl.edu\/equity\/web-best-practices-guidelines\/"},{"@type":"ListItem","position":3,"name":"Carousels, sliders, rotators"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/","name":"Equity","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/equity\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Equity","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/equity","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/114"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":2,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/114\/revisions\/150"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/105"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/media?parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}