WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: accessible carousel?

for

Number of posts in this thread: 4 (In chronological order)

From: Sandy Feldman
Date: Thu, Sep 09 2021 9:33AM
Subject: accessible carousel?
No previous message | Next message →

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p>hey all,</p>
<p>Can anyone point me at an example of an accessible carousel?</p>
<p>(yes, I know. I tried. They really want it.)</p>
<p>thanks!<br>
</p>
<div class="moz-signature">-- <br>
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>
</body>
</html>

From: glen walker
Date: Thu, Sep 09 2021 11:13AM
Subject: Re: accessible carousel?
← Previous message | Next message →

https://www.w3.org/WAI/tutorials/carousels/

From: Jon Gunderson
Date: Mon, Sep 20 2021 8:27AM
Subject: Re: accessible carousel?
← Previous message | Next message →

Sandy,

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

Guidance:
https://w3c.github.io/aria-practices/#carousel

Examples:

Auto-Rotating Image Carousel Example with Buttons for Slide Control
https://w3c.github.io/aria-practices/examples/carousel/carousel-1-prev-next.html


Auto-Rotating Image Carousel with Tabs for Slide Control Example
https://w3c.github.io/aria-practices/examples/carousel/carousel-2-tablist.html


We would appreciate feedback (by anyone) on these examples, please create a
github issue:
https://github.com/w3c/aria-practices/issues/new

Jon


On Thu, Sep 9, 2021 at 10:33 AM Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:

> 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 <https://www.a11yready.com/>
>
>
> > > > >

From: Sandy Feldman
Date: Mon, Sep 20 2021 10:26AM
Subject: Re: accessible carousel?
← Previous message | No next message

<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 ADDRESS 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 ADDRESS REMOVED = ">&lt; = EMAIL ADDRESS 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>