Hi, @tarkham !
Thanks for your feedback and I’m sorry for the delay in getting back to you.
I’ve sent your feedback to our developers so they can check them further. We’ll update you once we hear back from them.
Let us know if we can do anything else for you about this.
Regards,
Karla
Hello,
Thank you for the quick response. I request that the developers address this matter promptly as it is currently affecting the accessibility score of my website. I appreciate your attention to this issue.
Hi, @tarkham !
The task has been put to high priority. We do not have an estimated date yet but we’ll update you once this has been included in the next updates.
Let us know if we can do anything else for you about this.
Regards,
Karla
Thanks! Nothing else for now.
@tarkham,
This is Mark with the Kadence development team.
It’s been a minute, but I wanted to say that we’ve got some updates to the aria roles for the tabs block coming in the next update (release date pending). Including what you recommended about tablist and tab roles.
We did not add the setsize or posinset attributes as those are only required when the full data set is not present in the dom, which is not the case with tabs. With the changes to roles screen readers should now be able to appropriately find the size of the set.
Thanks for the feedback,
Mark
Hi ,
Thanks for the update, the tab and accordians in kadence blocks while works with screen reader but the code is not semantic and fails automated accessibility checks. I see that my last bug of nested elements is fixed but the parent and child tab relationship is not provided properly yet.
Here is the current code
<div class=”kt-tabs-wrap kt-tabs-id_fd19fd-62 kt-tabs-has-3-tabs kt-active-tab-3 kt-tabs-layout-tabs kt-tabs-tablet-layout-inherit kt-tabs-mobile-layout-inherit kt-tab-alignment-left ” role=”tablist”><ul class=”kt-tabs-title-list”><li id=”tab-levela” class=”kt-title-item kt-title-item-1 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive”><a href=”#tab-levela” data-tab=”1″ class=”kt-tab-title kt-tab-title-1 ” role=”tab” aria-controls=”tab-levela” aria-selected=”false” tabindex=”-1″><span class=”kt-title-text”>Level A</span></a></li><li id=”tab-levelaa” class=”kt-title-item kt-title-item-2 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive”><a href=”#tab-levelaa” data-tab=”2″ class=”kt-tab-title kt-tab-title-2 ” role=”tab” aria-controls=”tab-levelaa” aria-selected=”false” tabindex=”-1″><span class=”kt-title-text”>Level AA</span></a></li><li id=”tab-strongallstrong” class=”kt-title-item kt-title-item-3 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-active”><a href=”#tab-strongallstrong” data-tab=”3″ class=”kt-tab-title kt-tab-title-3 ” role=”tab” aria-controls=”tab-strongallstrong” aria-selected=”true” tabindex=”0″><span class=”kt-title-text”><strong>All</strong></span></a></li></ul><div class=”kt-tabs-content-wrap”>
The role=tablist is on the parent div and as a result thee parent and child relationship is not being programmatically defined. Please also add this to the fix and I see all the tab elements have the same identifier “ID”
Do something about those duplicate identifiers . this will make the entire tab block accessible and I must say this can be the first tab block that can become fully compliant.
Thank you for the update. I am excited and looking forward.
Hello team,
The new update has completely broken the tab panel and rendered it unusable with screen readers. The tab panel being implemented using <ul> and <li> tags is preventing it from being accessible. Today, my team members and I brainstormed this issue.
The problem lies in having the anchor element inside the <li> tag. The role="presentation" attribute on the anchor element is not functioning as intended.
To address this, we have two options. We can either remove the anchor element from the DOM or modify the code to ensure accessibility in a different way.
Below is a code snippet that is both correct and semantic, utilizing <div> and <span> tags to indicate the structure. Alternatively, we can remove the anchor element from the current implementation of the tab panel.
This accessibility issue is currently a blocking bug.
Thank you.
<div class=”kt-tabs-title-list” role=”tablist”><span id=”tab-levela” class=”kt-title-item kt-title-item-1 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive” aria-selected=”false” tabindex=”-1″><a href=”#tab-levela” data-tab=”1″ class=”kt-tab-title kt-tab-title-1 ” role=”tab”><span class=”kt-title-text”>Level A</span></a></span><span id=”tab-levelaa” class=”kt-title-item kt-title-item-2 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive” aria-selected=”false” tabindex=”-1″><a href=”#tab-levelaa” data-tab=”2″ class=”kt-tab-title kt-tab-title-2 ” role=”tab”><span class=”kt-title-text”>Level AA</span></a></span><span id=”tab-strongallstrong” class=”kt-title-item kt-title-item-3 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-active” aria-selected=”true” tabindex=”0″><a href=”#tab-strongallstrong” data-tab=”3″ class=”kt-tab-title kt-tab-title-3 ” role=”tab”><span class=”kt-title-text”><strong>All</strong></span></a></span></div>
@tarkham
Sorry to hear the update didn’t help. I’m going to focus on your most recent comment because I think the earlier comment was made before this accessibility update came out in blocks 3.0.38.
I read what you’re saying about the anchor tags, but I’m not seeing the issue in my tests.
https://monosnap.com/file/Lc5sDBJNDVnn3VFJ3TPbB7RTQxvT5r
https://monosnap.com/file/5Z1Q0SzkmEhlcuKrtqXBERsZSIbWpC
I don’t use screen readers often so maybe I’m missing something here.
Can you please send us some more information on what screen reader you’re seeing issues in. When you say the tab panel is unusable by screen readers, what is the screen reader showing/reading as it tries to read the tab panel? A video of what you’re seeing would help a lot.
Mark
@woodardmc
Hello team,
I did bit of more study and came with a fix, here is another solution that might be easy to work and implement,
<Ul role=”tablist”>
<li role=”presentation”><a href=”test.com” role=”tab” tabindex=”0″>WCAG</a></li>
<li role=”presentation”><a href=”test.com” role=”tab” tabindex=”0″>ARIA</a></li>
</ul>
Here is a demo page on my site.
http://www.digitala11y.com/demos
When you run axe dev tools the nesting of elements is not there for tabs created by me.
Can we get the update fix for this quickly, this broke accessibility across all my sites. I will create video tomorrow and send it.
@tarkham I think I see what you’re saying.
We updated some elements of this in blocks 3.0.40. I think we’ll be all the way there in 3.0.41 (next release).
3.0.40 has the tab role on the <a> elements like you suggested.
(with the tab index only being 0 for the active tab, not inactive tabs. For better tabbing flow into the active tab content)
But doesn’t have role presentation on the <li> elements. That should be in 3.0.41.
I used the axe dev tools for testing and saw some of the errors you were mentioning before. With these updates it looks like we’ve resolved them.
https://monosnap.com/file/fLaEOfbFujEljeZxXATZPOAJNxb63c
Great job! I am proud of the level of support and proactive approach you have taken regarding accessibility issues. Well done, team! All tab-related issues have been resolved.
