Relating to this post: Elements with an ARIA - Accordion
I have been adding attributes where I can, and its working, and the root of the problem seams to be in the header of the accordion. The role should be button instead of tab. However, I cant add an attribute to tit…how can I change the code? html, or add css?
I don’t think you can change the attributes of the Accordion header. I’m looking at a possible fix to this right now. From what I can tell, tablist probably shouldn’t be used here for the top level div for the accordion. If you switch the role to button on the header you also have to remove aria-selectedby. I am curious what you found out, let me know if you have any other suggestions and have a great day.
So right now, I have the top part of the accordion, when you click on it, I think its the header…as role= button:
Nothing above that, as I think whats already there as standard is not flagging…
Then in the text, content area I have role=tabpanel.
So if you have a look at the flags in google page speed, its not flagging this particular accordion as much as the others, and the only flag is the one I mentioned above…I cant change the header, and its set to role=tab, when I think it might need to be button?
"button id=“tab-e6630-e167” class=“x-acc-header” role=“tab” type=“button” aria-selected=“false” aria-expanded=“false” aria-controls=“panel-e6630-e167” data-x-toggle=“collapse” data-x-toggleable=“e6630-e167”
Thanks for looking into it.
I just wanted to double check you were seeing the same things as me. Even if you set the role of the header as button that error you see will still be there. I think the main problem is that the whole accordion is setup as a tablist and missing the structure of a real “Tabs” element. Every accordion ARIA examples I saw didn’t use tablist, so I’m just going to change it as a role=“button” for the header and role=“region” for the content for the ARIA setup. This got a passing grade from PageSpeed Insights. Thanks for taking the time, have a great day.
Gotchya, so this will be carried out in the next update?
Yes, it may be added in the next update. We will wait for Charlie’s reply.
The ARIA update is out now
Just saw! awesomenessss! and its not erroring in google anymore. good job as always! thanks.
Hi Oriol,
You are most welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
