{"id":10859,"date":"2021-02-18T09:21:19","date_gmt":"2021-02-18T14:21:19","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=10859"},"modified":"2026-03-05T14:50:56","modified_gmt":"2026-03-05T19:50:56","slug":"carousels","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/carousels\/","title":{"rendered":"Image Carousels"},"content":{"rendered":"<p>Carousels, also call sliders or rotating banners, are all over the web. Websites often use them to highlight different pieces of content. These carousels are not ideal as they have many usability and accessibility issues.<\/p>\n<p>Before I tell you what issues exist , I&#8217;d like you to look at a slider. Head over to the <a href=\"https:\/\/shouldiuseacarousel.com\/\"><strong>Should I use a Carousel?<\/strong><\/a> website and then come back here.<\/p>\n<ul>\n<li>How was your experience on the Should I Use a Carousel website?<\/li>\n<li>Did you watch the whole thing?<\/li>\n<li>Did you have time to read all the slides?<\/li>\n<li>Was it an enjoyable experience?<\/li>\n<\/ul>\n<p>Most likely you answered no to one, if not all these questions. Don&#8217;t worry, you&#8217;re not alone.<\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Issues With Carousels<\/h2>\n<p>Many of the following issues are adapted from Jakob Nielson\u2019s article \u201c<a href=\"https:\/\/www.nngroup.com\/articles\/auto-forwarding\/\"><em>Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility<\/em><\/a>.\u201d In his article, he explains why carousels are largely ignored and how they can causes usability problems.<\/p>\n<ul>\n<li><strong>Moving UI elements usually reduce\u00a0accessibility<\/strong>, particularly for users with motor skill issues who have difficulty clicking something before it&#8217;s taken away.<\/li>\n<li>For auto-playing carousels, having content automatically disappear\u00a0<strong>can cause loss of focus for screen reader and keyboard users<\/strong>\u00a0that are reading or have keyboard focus on that content when it animates away. This can force the user back to the top of the page.<\/li>\n<li><strong>Low-literacy users\u00a0often don&#8217;t have enough time to read\u00a0<\/strong>the information before it&#8217;s removed.<\/li>\n<li><strong>International users\u00a0also read more slowly<\/strong>\u00a0if your site is not in their native language, and thus they won&#8217;t be able to understand a panel if it&#8217;s displayed only briefly.<\/li>\n<li><strong>Single-item visibility is reduced by having to take turns being on display<\/strong>. The probability that users will spot the item they want is drastically reduced when only one thing is displayed at any given time.<\/li>\n<li><strong>It&#8217;s just plain annoying for users to lose control<\/strong>\u00a0of the user interface when things move around of their own accord.<\/li>\n<li>Because the carousel moves, users automatically <strong>assume that it might be an advertisement<\/strong>, which makes them more likely to ignore it.<\/li>\n<li><strong>Sliders don\u2019t measurably engage<\/strong>. Sliders tend to have very low click-through rates. Many site visitors ignore a slider and scan the content of the page for the information they are looking for.<\/li>\n<li><strong>Site visitors don\u2019t have the time<\/strong>. With the average internet user viewing a website for mere seconds, they don\u2019t spend time to watch a slideshow.<\/li>\n<li>Sliders tend to have <strong>color-contrast issues<\/strong>. The slider controls that overlay the content need to have enough contrast with each image in the slider.<\/li>\n<li>Many carousels contain large images for each slide. Unless optimized properly, the large file sizes can <strong>increase page load times<\/strong>, especially on mobile devices. Don&#8217;t forget, Google incorporates page speeds into search engine rankings, so if your site is slow, your site ranking will go down.<\/li>\n<li>Carousels tend to be virtually <strong>impossible to navigate on a mobile phones<\/strong>.<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2 class=\"p1\">Phasing Out Carousels<\/h2>\n<p>Slideshows are not allowed on School of Medicine websites including those created with the Envira Gallery or Soliloquy plugins.<\/p>\n<ul>\n<li><strong>Envira Gallery<\/strong>\u00a0may continue to be used for static image galleries, but it should not be used to create slideshow-style banners.<\/li>\n<li><strong>Soliloquy<\/strong>\u00a0is being phased out. Sites currently using Soliloquy should redesign their slideshow content without it.<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Related Links<\/h2>\n<ol>\n<li><a href=\"https:\/\/shouldiuseacarousel.com\/\">Should I Use a Carousel?<\/a><\/li>\n<li><a href=\"https:\/\/www.sitepoint.com\/unbearable-accessible-slideshow\/\">The Unbearable Inaccessibility of Slideshows<\/a><\/li>\n<li><a href=\"https:\/\/erikrunyon.com\/2013\/01\/carousel-stats\/\">Carousel Interaction Stats by Erik Runyon<\/a> &#8211; statistics from carousels placed on Notre Dame websites.<\/li>\n<li><a href=\"http:\/\/www.nngroup.com\/articles\/auto-forwarding\/\">Nielsen Norman Group: Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility<\/a><\/li>\n<li><a href=\"https:\/\/www.nngroup.com\/articles\/designing-effective-carousels\/\">Nielsen Norman Group: Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors<\/a><\/li>\n<li><a href=\"https:\/\/www.sitepoint.com\/unbearable-accessible-slideshow\/\">The Unbearable Inaccessibility of Slideshows<\/a><\/li>\n<li><a href=\"http:\/\/beantin.se\/post\/30991868949\/sliding-banner-content-slider-carousel-rotator\">That big sliding banner? Yeah, it\u2019s rubbish: Beantin<\/a><\/li>\n<li><a href=\"https:\/\/www.smileycat.com\/why-you-should-not-use-image-carousels-on-your-website\/\">Why You Should Not Use Image Carousels on Your Website<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Carousels, also call sliders or rotating banners, are all over the web. Websites often use them to highlight different pieces of content. These carousels are not ideal as they have many usability and accessibility issues. Before I tell you what issues exist , I&#8217;d like you to look at a slider. Head over to the &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/carousels\/\" aria-label=\"Read more about Image Carousels\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":9092,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-10859","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=10859"}],"version-history":[{"count":2,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10859\/revisions"}],"predecessor-version":[{"id":15497,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10859\/revisions\/15497"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9092"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=10859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}