Accessibility about vueper-slides HOT 6 CLOSED

Version 1.6.0 is now equipped with a load of accessibility attributes.

• aria-label="Slideshow" on slideshow container
• aria-live="polite" on slides container
• aria-hidden true/false on each slide
• aria-label previous/next on arrows
• role="tablist" aria-label="Slideshow navigation" on bullets container

Caution:
From version 1.6.0 the styles must be imported from an external file. Refer to the installation part in the documentation.

from vueper-slides.

Yes, it will be in the next release coming soon.
I will add aria-label on arrows, role="tablist" on bullets wrapper and role="presentation" on each bullet.
Is it what you suggested?

from vueper-slides.

The same is happening me, until the first click is done in some arrow or bullet, or you drag to the any side image with mouse, keyboard arrows won't work. In the project codepen the issue is also present to me.

Click on the image didn't work also, thanks in advance.

from vueper-slides.

Hi @guirisan, This is the normal behavior.
You need to first have the focus on a button of the slideshow to be able to navigate with arrows.
This is can also be done with the tab key - as a normal accessible app.

If you want to be able to navigate through the slideshow with arrows from the beginning you can set the focus on one of the slideshow button from the ready event. But this is not something that should be done from the vueper-slides library as this is your decision to put the slideshow on focus on page load.
But I don't recommend doing so neither - imo, for accessibility, the focus should stay at the first focusable element of the page. Then the user can tab to wherever they want.

Hope it clarifies a bit.

from vueper-slides.

from vueper-slides.

Thanks @guirisan for the feedback and yes then it makes sense.
So from the ready event, trigger the focus on the first slide bullet:

<vueper-slides @ready="focusFirstBullet()">
  <vueper-slide v-for="i in 5" :key="i" :title="i.toString()"></vueper-slide>
</vueper-slides>

// In your component methods.
focusFirstBullet () {
    // Give it time to be in the DOM.
    setTimeout(() => {
        document.querySelector('.vueperslides__bullets button:first-child').focus()
    }, 200)
}

Here is a demo: https://codepen.io/antoniandre/full/mddaWze, and editable here: https://codepen.io/antoniandre/pen/mddaWze.

from vueper-slides.