search

Enclavely / tailor

Build beautiful page layouts quickly and easily using your favourite WordPress theme.
https://www.tailorwp.com
GNU General Public License v3.0
1.05k stars 102 forks source link

Toggles, Tabs, and Carousels are not accessable to screen readers #95

Open kipraske opened 7 years ago

kipraske commented 7 years ago

Basically the tailor elements that have hidden content behind some sort of javascript application are not accessible. I have just tested the Toggles, Tabs, and Carousels, but the issue may be on other elements too.

  1. The content can't be found using the keyboard only. Honestly if we provided this keyboard navigation this would probably take care of the screen reader issue as long as it was clear that when you hit a toggle or a tab you get the content inside (like by focusing the DOM on the inside of the accordion).

  2. The content is not able to be read using a screen reader. The fancy toggles, tabs, and carousels are not too useful for screen reader users. If we could get the screen reader to just read through the content of these sections instead of just ignoring the hidden stuff that would work too.

kipraske commented 7 years ago

I know it is a bit heavier but I see you are using jQuery occasionally in this project. If we used a library that has all these accessibility things worked out already we would be in good shape with less work.

For tabs and accordions jQueryUI is what we usually go with. For our business needs this is likely what we are going to override tailor's functionality with jquery-ui. The slick carousel is probably accessible enough now that I play with it a bit more. I will play around with it more.

andrew-worsfold commented 7 years ago

Hi @kipraske -

Accessibility improvements have been on my list for some time and I welcome any PRs from you or others who have experience in this domain. I will take a closer look at jQuery UI (which I admittedly avoided due to performance concerns) as a potential candidate.