E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: accessible carousel?

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>
hey all,
Can anyone point me at an example of an accessible carousel?
(yes, I know. I tried. They really want it.)
thanks! 

<div class="moz-signature">-- 
Sandy
<a href="https://sandyfeldman.com">sandyfeldman.com</a>
 
<a href="https://www.a11yready.com/">a11yready.com</a><a>
</a>
<a> 
 
</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>
Jon, thanks so much for the links. I'll keep them in my back
pocket! 

We've settled on
<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 
</a>
which my colleague tested using Google Chrome
and JAWS 2021. He wrote: 


<blockquote type="cite">
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.
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 <img> wrapped in a <a> tag. The second
element is a <a> wrapped in a <h3>. So, when
pressing the Tab key it appears that there are two different
links.
</blockquote>
best regards, 

<div class="moz-signature">Sandy
<a href="https://sandyfeldman.com">sandyfeldman.com</a>
 
<a href="https://www.a11yready.com/">a11yready.com</a><a>
</a>
<a> 
 
</a></div>
<div class="moz-cite-prefix">On 2021-09-20 10:27 a.m., Jon Gunderson
wrote: 
</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 = ">< = EMAIL ADDRESS REMOVED = ></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/"><https://www.a11yready.com/></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>