-
Hi
When I create an accordion, each title has a tabindex of 0.
Shouldn’t each tab index be incremented by one in the normal flow of the page?
At the moment, when I tab through my page, the tabs go into each accordion item’s content by default. This creates a weird situation where the tabs seem to disappear until you get to the next accordion item.
I should be able to tab each Accordion Title, and when I press ENTER on the keyboard to open the Accordion Content, only then should I be able to tab the Accordion Content.
Maybe I have set it up incorrectly.
John
-
Hi John,
Shouldn’t each tab index be incremented by one in the normal flow of the page?
When elements have the same tabindex, the focus order is based on the order they appear in the HTML, so no, they don’t need to have different tabindex values.
the tabs go into each accordion item’s content by default
That’s not the case, the tab key looks for interactive elements, when there’re interactive elements in your accordion content, the tab key will go to the content, if there’re no interactive elements, it goes to the next accordion title.
For example, your first accordion content doesn’t have any links, so when tabbing through the accordion, it directly goes to the next accordion title. Hope that makes sense to you 🙂
-
Hi Ying
Thank you for your reply.
It seems weird that a user should have to tab elements they cannot see.
It is also inefficient for a user who needs to navigate by using tabbing. They have to tab through every element on a page of accordions to get to the bottom of the page rather than just tab through the high-level accordion titles.
I thought when they want to enter an accordion tab content, they would tap enter and then have access to the tab-able elements in the tab content.
Is accessibility best practice being followed with this interaction do you know? I’m sure it is!
If it is, I will have to design the page another way.
John
-
Is accessibility best practice being followed with this interaction do you know? I’m sure it is!
We always follow accessibility standards. I just created a page and added the GB accordion, the lighthouse accessibility score of that page is 100, so I assume it passed all the accessibility requirements. 🙂
Achieve what you are looking for requires custom Javascript and PHP development.
- You must be logged in to reply to this topic.