WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible carousel?

for

From: Sandy Feldman
Date: Sep 20, 2021 10:26AM

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>Jon, thanks so much for the links. I'll keep them in my back
pocket!<br>
</p>
<p>We've settled on</p>
<p><a moz-do-not-send="true"
href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html">w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html<br>
</a></p>
<p class="MsoNormal">which my colleague tested using Google Chrome
and JAWS 2021. He wrote:<br>
</p>
<p class="MsoNormal">
<blockquote type="cite">
<p class="MsoNormal">This is a very good carousel for screen
reader users. The braille display responds well for blind-deaf
users, and the slide announcement does not interfere with the
screen reader keyboard navigation.</p>
<p class="MsoNormal">The only concern is that the two elements
within the Group element are identified differently when
pressing arrow keys or pressing the Tab key. The first element
is a &lt;img&gt; wrapped in a &lt;a&gt; tag. The second
element is a &lt;a&gt; wrapped in a &lt;h3&gt;. So, when
pressing the Tab key it appears that there are two different
links.</p>
</blockquote>
best regards,<br>
</p>
<div class="moz-signature">Sandy
<p><a href="https://sandyfeldman.com">sandyfeldman.com</a>
<br>
<a href="https://www.a11yready.com/">a11yready.com</a><a>
</a></p>
<a><br>
<br>
</a></div>
<div class="moz-cite-prefix">On 2021-09-20 10:27 a.m., Jon Gunderson
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:CA+ <EMAIL REMOVED> ">
<pre class="moz-quote-pre" wrap="">Sandy,

If you are still looking for additional carousel guidance and examples, the
ARIA Authoring Practices have some in version 1.2:

Guidance:
<a class="moz-txt-link-freetext" href="https://w3c.github.io/aria-practices/#carousel">https://w3c.github.io/aria-practices/#carousel</a>

Examples:

Auto-Rotating Image Carousel Example with Buttons for Slide Control
<a class="moz-txt-link-freetext" href="https://w3c.github.io/aria-practices/examples/carousel/carousel-1-prev-next.html">https://w3c.github.io/aria-practices/examples/carousel/carousel-1-prev-next.html</a>


Auto-Rotating Image Carousel with Tabs for Slide Control Example
<a class="moz-txt-link-freetext" href="https://w3c.github.io/aria-practices/examples/carousel/carousel-2-tablist.html">https://w3c.github.io/aria-practices/examples/carousel/carousel-2-tablist.html</a>


We would appreciate feedback (by anyone) on these examples, please create a
github issue:
<a class="moz-txt-link-freetext" href="https://github.com/w3c/aria-practices/issues/new">https://github.com/w3c/aria-practices/issues/new</a>

Jon


On Thu, Sep 9, 2021 at 10:33 AM Sandy Feldman <a class="moz-txt-link-rfc2396E" href="mailto: <EMAIL REMOVED> ">&lt; <EMAIL REMOVED> &gt;</a>
wrote:

</pre>
<blockquote type="cite">
<pre class="moz-quote-pre" wrap="">hey all,

Can anyone point me at an example of an accessible carousel?

(yes, I know. I tried. They really want it.)

thanks!
--
Sandy

sandyfeldman.com
a11yready.com <a class="moz-txt-link-rfc2396E" href="https://www.a11yready.com/">&lt;https://www.a11yready.com/&gt;</a>


List archives at <a class="moz-txt-link-freetext" href="http://webaim.org/discussion/archives">http://webaim.org/discussion/archives<;/a>
</pre>
</blockquote>
<pre class="moz-quote-pre" wrap="">List archives at <a class="moz-txt-link-freetext" href="http://webaim.org/discussion/archives">http://webaim.org/discussion/archives<;/a>
</pre>
</blockquote>
</body>
</html>