[Feat]: Better accessibility in documented examples

[DiveServiceAS]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

The current docs are all focused on attaining functionality, but there has been no examples on how to achieve accessibility with this tool. For example, I wish to see how I can return information about which slide is currently being shown so I can give that information to the screen readers.

For a comprehensive list about how to make carousels more accessible and screen reader friendly, see A Step-By-Step Guide To Building Accessible Carousels

Additional Context

No response

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[davidjerleke]

Hi @DiveServiceAS and thanks for your feature request,

This is already on the roadmap:

But the problems I have is that one, I'm flooded with questions all the time and I'm only one person working for free on my very limited spare time, two, this project lacks decent sponsorships/funding so I could free up time for requests like this. In theory this is a great request and I would like to implement it, in reality, I can't tell when or if it will happen.

Best,
David

[leevi978]

Hi @davidjerleke , I have switched users to my personal account, so that I get notifications about this discussion. I hope you don't mind.

Sorry, I must have missed it on the roadmap. It's good to hear that it's on your radar, and I'm sorry you're overwhelmed by requests.

I am currently working on accessibility of my own implementation of the Embla carousel on the @DiveServiceAS website, and I would be happy to create examples for the current Embla documentation, and propose them through pull-requests. However, I often find that the API does not intuitively expose all the functionality required to achieve the accessibility I'm aiming for. For example, I do not know how to move the screen reader focus to a given slide, or how to navigate using a keyboard.

If I were to create examples for you that does not involve using the API, would you consider complimenting these examples with the ones that do, if I provide a list of which specific examples are missing? Or, if we were to keep this discussion open, I could ask you directly how to achieve specific functionality and add it to the examples I'm writing?

So far I love the Embla carousel library, but as it stands now I would never use it if I had a government-affiliated client, as I simply would not be able to ensure the legal accessibility requirements are met.

[davidjerleke]

However, I often find that the API does not intuitively expose all the functionality required to achieve the accessibility I'm aiming for. For example, I do not know how to move the screen reader focus to a given slide, or how to navigate using a keyboard.

@DiveServiceAS the tab key will navigate the carousel if slides contain focusable elements, just like the native browser does. Check this sandbox out and this comment out. Other than that, Embla doesn't attach any key listeners so you're free to use the API to do that. If you're having trouble, try to be specific and maybe I can help out. Embla is a DIY library but very extensible so it should expose all the things you need to create an accessible carousel based on A Step-By-Step Guide To Building Accessible Carousels.

Or, if we were to keep this discussion open, I could ask you directly how to achieve specific functionality and add it to the examples I'm writing?

Please do. I'll answer as soon as I get the chance.

[leevi978]

@davidjerleke Great! I will start working on some examples then.

My first question for you relates to a step of the guide titled Semantic markup of the active control. In order to do this, I must programmatically retrieve the index of the current displayed slide from the API, so that I can mark the correct dot-button element with aria-current="true". I unfortunately, I have not been able find out how to do this through the documentation or by looking at the source code.

[davidjerleke]

@leevi978,

If I'm not misunderstanding you, any example on the examples page with dot navigation has the selected dot highlighted, see the default example:

So you should be able to use the same approach, no? It's achieved with emblaApi.selectedScrollSnap():

emblaApi.on('select', (emblaApi) => {
  console.log(`changed active scroll snap to: ${emblaApi.selectedScrollSnap()}`)
})

console.log(`Initial active scroll snap is: ${emblaApi.selectedScrollSnap()}`)

[leevi978]

You are correct, upon looking further at the default example code I see that selectedScrollSnap does in fact do exactly this. I'm sorry for asking questions about something that was already explained in the documentation, however by looking at the API reference I was unable to understand from the naming that this is in fact the functionality I was looking for. I blame it on the language barrier 😅

Thank you for explaining it to me!

[davidjerleke]

@DiveServiceAS no worries. Let me know if you have more questions. If you create one example that's fully accessible, that would be enough I think. I can add the accessibility to the generator then. And all Basic examples:

Use the carousel generator under the hood so that would both make the generator examples accessible and all basic which is a good start.

[leevi978]

@davidjerleke Will do. Do you have a preference for the format of the example? In other words, is it easier for you to add it to the generator if it is written in vanilla JS, CSS and HTML? Or does it not matter?

[davidjerleke]

@leevi978 easiest would be if you forked one of the examples on the documentation and modified that. Thanks.