Comments (25)
How to place navigation and pagination under carousel?
from tiny-slider.
Hello,
Sorry it's been so long! So I had time to check and here is my feeback:
- aria-hidden -> OK.
- aria-controls -> On the carousel pagination, if the number of items is set to more than one, the
aria-controls
value doesn't reflect this setting (it's selecting the next one instead of then + 2
if we setitems
value to2
). - aria-selected -> OK.
- Content order -> From an accessibility stand point, it makes more sense to have navigation and pagination above carousel.
- Limiting tab selection ->
tabindex="-1"
should be added to every inactive slide. - Navigation keyboard control -> Add
tabindex="0"
to the Carousel navigation container andtabindex="-1"
on both carousel navigation buttons. - aria-live -> In my opinion it depends too much on the purpose of the carousel to be implemented in a global solution so don't bother.
For touch screens I'm sorry but my Javascript skills are very limited, I can't help you...
Hope this helps!
from tiny-slider.
Thank you, I know this, but it would be nice to be able to change through the options.
from tiny-slider.
@ganlanyuan @epigeyre Regarding tabindex="0" on the controls container what was the reason behind it? Is that really needed? We use a company to audit our site and they logged this as an issue that tabindex="0" causes and extra tab which is not needed.
from tiny-slider.
Limiting tab selection -> tabindex="-1" should be added to every inactive slide.
Navigation keyboard control -> Add tabindex="0" to the Carousel navigation container and tabindex="-1" on both carousel navigation buttons.
Done
I'm just checking out the sliders on the demo page. I can see that the tabindex is set as described above, but I still can't seem to tab past a carousel without going through each slide. Is some JS that is programmatically focusing the inactive slides on tab?
from tiny-slider.
@ganlanyuan Hmm, I see. I think the content inside the inactive slides really shouldn't be focusable, even if they have links in them.
from tiny-slider.
@ganlanyuan @epigeyre the tabindex= -1 is causing issues if using navigation arrows outside of the nav container (setting custom prevButton and nextButton). Is there a way to only set tabindex= -1 if the nav is set to true?
from tiny-slider.
Will check this, thanks
from tiny-slider.
Tiny-slider is still in progress right now, please give more ideas if possible.
Thanks
from tiny-slider.
This series of articles offer a nice sum up of accessibility best practices for carousels:
I thought this might help make your script even better!
from tiny-slider.
Great, thanks
On Tue, May 10, 2016 at 6:11 AM Etienne Pigeyre [email protected]
wrote:
This series of articles offer a nice sum up of accessibility best
practices for carousels:
- Part 1 http://mmckinnon.com/blog/2015/accessible-carousels-part-1
- Part 2 http://mmckinnon.com/blog/2015/accessible-carousels-part-2
- Part 3 http://mmckinnon.com/blog/2015/accessible-carousels-part-3
I thought this might help your script even better!
—
You are receiving this because you commented.Reply to this email directly or view it on GitHub
#4 (comment)
from tiny-slider.
Hey,
Accessibility features added. Could you check?
Only for touch screen I couldn't figure out how to support. Any idea?
from tiny-slider.
Thanks, I will check as soon as I can and get back to you!
from tiny-slider.
Thanks @epigeyre for your feedback.
I will check these when I have time.
from tiny-slider.
- Content order -> From an accessibility stand point, it makes more sense to have navigation and pagination above carousel.
Will update in next main version, since this will cause a DOM change.
- Limiting tab selection ->
tabindex="-1"
should be added to every inactive slide.- Navigation keyboard control -> Add
tabindex="0"
to the Carousel navigation container andtabindex="-1"
on both carousel navigation buttons.
Done
from tiny-slider.
- aria-controls -> On the carousel pagination, if the number of items is set to more than one, the
aria-controls
value doesn't reflect this setting (it's selecting the next one instead of then + 2
if we setitems
value to2
).
Will work on this maybe this weekend.
Done
from tiny-slider.
- Content order -> From an accessibility stand point, it makes more sense to have navigation and pagination above carousel.
This will be done from v2.0
from tiny-slider.
@Eric-Draven The best way is probably to use position: relative
on your slider's wrapper and position: absolute
on your navigation and pagination elements so that you can place them wherever you want.
from tiny-slider.
@OD-fraja So that it can be focused (instead of prev, next button been focused) and user can control the slider using arrow keys.
from tiny-slider.
@ganlanyuan Aha I see, makes sense. I did not know that you could use arrow keys to control the slider. That makes sense now. Thanks for your prompt reply.
from tiny-slider.
@OD-fraja You're welcome
from tiny-slider.
@missmatsuko Hey, it's because of the <a>
tag in each slide.
from tiny-slider.
You're right.
But it's too much for the slider to check all the possible focusable child elements of inactive slides and make them non-focusable.
I will search for ways which just need to work on the slides themselves.
from tiny-slider.
The problem we're having with this, is that we are lazy loading the images so if we tab through and the images haven't loaded (which a user may do), then it shows an invalid image which is not ideal. I have went ahead and targeted our links and disabled the tab index just so this does not occur. However, I think it would provide a better UX if the tab index was only enabled for elements within the visible slide?
from tiny-slider.
Hi, I think it might be reasonable to check for focusable child elements, and make them tabindex -1. A technique I've seen used is to store the element's previous tabindex value in a data attribute, and "restore" it from that attribute when it's visible again. I'm going to open this up as a separate new issue and attempt to fix on my own fork.
from tiny-slider.
Related Issues (20)
- Local storage and EU compliance HOT 1
- Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed HOT 1
- Slide does not keep state when shown as cloned version when loop: true HOT 1
- Can't import as ES module: `SyntaxError: ambiguous indirect export: tns` HOT 1
- [Feature request] Customizable autoplayButton markup HOT 1
- [aria-*] attributes do not match their roles HOT 2
- Adding slides does not work.
- 'gallery' mode + Delay time between slides
- Is this project still alive? - No Merges (even supply chain)... HOT 3
- Tiny Slider not working well with htmx library.
- Add Export before: var tns =
- Please provide method to refresh edgePadding and gutter or allow clamp values
- edgePadding on vertical axis not working?
- Deprecation Using / for division outside of calc()
- Freezable possible issue
- Rotate the carousel with mouse scroll
- question about navigation or dots HOT 1
- Webpack 5 Compiled with problems
- Pagination/Next Button not behaving like expected
- Dots not showing issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tiny-slider.