Carousel accessibility

[accessibledev]

In order for a carousel to be fully accessible, it needs controls to start/stop the rotation. Is this an option you have available to implement. Here is an example of a fully accessible slideshow: https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html We are hoping to keep using Flickity but have to be accessible. Are there plans to make the carousel accessible with the functionality in the example? I'd love to have an accessible slideshow I can recommend to other clients also!!

Thanks so much!

[accessibledev]

tag @metafizzy

[resqonline]

Having the same issue as @accessibledev with a client site - they reported to me that the arrow navigation is "in the wrong place" meaning the back button should be before and the next button after the slideshow, but right now both are after. @metafizzy can you please comment on accessibility and how best to use flickity in these cases?

[accessibledev]

I reached out to @desandro on Twitter and received a response that although they would like to implement accessibility, it's not in development plans at this time so Flickity is not an app that I can recommend to use if your client's website needs to be accessible. I'm hoping to get around to developing one to share, but I haven't had the time. :(

[christianmagill]

@accessibledev Couldn't something like this be used? Are there other concerns to be addressed...

https://flickity.metafizzy.co/api.html#player

[accessibledev]

It looks pretty good. There is still an issue with not knowing what happens after activating a previous/next button. If you listen to this one https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html with a screen reader, after you select the previous/next buttons, it reads the content of that slide. I think if this could be added to flickity, it would be a good option.

On Wed, Oct 28, 2020 at 7:16 PM christianmagill notifications@github.com wrote:

@accessibledev https://github.com/accessibledev Couldn't something like this be used? Are there other concerns to be addressed...

https://flickity.metafizzy.co/api.html#player

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/metafizzy/flickity/issues/1096#issuecomment-718315535, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANOFKCVMN4DE4BUE6O4PQKDSNDGBLANCNFSM4QDOGMZQ .

[christianmagill]

So would that just be setting up the area as a live region with something like [aria-live="assertive"]?

[accessibledev]

So sorry for the delayed reply. I didn’t get to respond right away and it got buried. That could possibly be it. I’ll try to take a closer look this week and let you know what I think. If you’ve already applied that, send me a link and I will test it.

On Oct 29, 2020, at 10:18 AM, christianmagill notifications@github.com wrote:

 So would that just be setting up the area as a live region with something like [aria-live="assertive"]?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[christianmagill]

@accessibledev .. Thanks, I don't have an active project at the moment, but I'm interested to see what you find.

[accessibledev]

Ahh...sorry...I haven't had a chance to look it at yet. I'll try to look at it by next week!! Sorry!!

On Thu, Nov 12, 2020 at 11:10 AM christianmagill notifications@github.com wrote:

@accessibledev https://github.com/accessibledev .. Thanks, I don't have an active project at the moment, but I'm interested to see what you find.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/metafizzy/flickity/issues/1096#issuecomment-726280317, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANOFKCTWAS2NJ5QCCRUCYXTSPQXJZANCNFSM4QDOGMZQ .

[accessibledev]

I'm testing another site that uses Flickity. The biggest issue I see is still with the content not being presented after using the previous/next buttons. Once a user selects next/previous, focus should be set to the active slide so that the content in view is presented to a screen reader. The slide in focus already has the class "is-selected" so you can set focus to the slide that has this class. Again, w3c already has code for an accessibility carousel https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html so if Flickity is not able to update, I suggest following these guidelines instead of reinventing the wheel.

On Thu, Nov 12, 2020 at 3:31 PM Kelly Childs kellykchilds@gmail.com wrote:

Ahh...sorry...I haven't had a chance to look it at yet. I'll try to look at it by next week!! Sorry!!

On Thu, Nov 12, 2020 at 11:10 AM christianmagill notifications@github.com wrote:

@accessibledev https://github.com/accessibledev .. Thanks, I don't have an active project at the moment, but I'm interested to see what you find.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/metafizzy/flickity/issues/1096#issuecomment-726280317, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANOFKCTWAS2NJ5QCCRUCYXTSPQXJZANCNFSM4QDOGMZQ .

[christianmagill]

Hi @accessibledev I ran into this and remembered this conversation. I thought it might be of interest to you.

https://accessible360.github.io/accessible-slick/

[accessibledev]

Yes, this one is great to work with and I have recommended it to clients. :)

On Oct 20, 2021, at 7:27 AM, christianmagill @.***> wrote:

 Hi @accessibledev I ran into this and remembered this conversation. I thought it might be of interest to you.

https://accessible360.github.io/accessible-slick/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[christianmagill]

Sweet! If you'd be up for talking shop sometime feel free to reach out cmagill@influencedesign.net

[desandro]

To-dos for me

• Add role="group" to cells
• Add aria-label="cell 1 of 6" to cells
• Add aria-live="polite" to the slider element
• set aria-live="off" when autoPlay is playing

[chrisheuberger]

Has this been implemented yet? I have a Flickity carousel but screenreaders do not announce each slide when navigated to.

Here is the markup from page source:

<div class="QuoteCarousel-items flickity-enabled is-draggable" tabindex="0">
  <div class="flickity-viewport" style="height: 116.094px;">
    <div class="flickity-slider" style="transform: translateX(0%);">
      <div class="QuoteCarousel-item flickity-cell is-selected" tabindex="-1" style="transform: translateX(0%);">
        <p class="QuoteCarousel-content mb-2">Quote Text One</p>
        <cite class="QuoteCarousel-attribution mb-1">Demo Name 1</cite>
      </div>
      <div class="QuoteCarousel-item flickity-cell" tabindex="-1" style="transform: translateX(100%);" aria-hidden="true">
        <p class="QuoteCarousel-content mb-2">Quote Text Two</p>
        <cite class="QuoteCarousel-attribution mb-1">Demo Name 2</cite>
      </div>
      <div class="QuoteCarousel-item flickity-cell" tabindex="-1" style="transform: translateX(200%);" aria-hidden="true">
        <p class="QuoteCarousel-content mb-2">Quote Text Three</p>
        <cite class="QuoteCarousel-attribution mb-1">Demo Name 3</cite>
      </div>
    </div>
  </div>

  <button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous">Previous</button>
  <button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next">Next</button>
</div>

I Imagine it's those tabindex attributes but how can Flickity be configured to apply them properly?

[tmchow]

I'm also interested in this, in particular what @desandro mentioned here: https://github.com/metafizzy/flickity/issues/1096#issuecomment-1396387214