raghavendra satish peri

Hello,

Here is the explanation for my bug: the GitHub process is too complex for a blind person like me, with too many fields.

1. When there are personally identifiable form controls like name, email, phone, etc., and more, according to WCAG 1.3.5 input purpose, it needs to have a custom auto-complete attribute added to it.

2. Currently, this is not possible in Jetpack forms.

3. These auto-complete attributes help persons with disabilities fill out forms much faster.

4. In Gravity Forms, when a field is added to a form, it provides a feature to add a custom auto-complete attribute to the field. This is not possible in jetpack forms.

6. Steps to test:

   - Download the Chrome extension DigitalA11Y Tublets:  https://chromewebstore.google.com/detail/digitala11y-tublets/ccjeccodophadokglbdcinabgkiiakjh?pli=1

   - Toggle the button autocomplete. If the forms have auto-complete attributes, the bookmarklet will provide the auto-complete attributes for the form controls.

Sample code:

html

<label>Email

&nbsp; <input type="text" auto-complete="email">

</label>

Hello Ben, here is the video. I used JAWS screen reader, it is same behavior with NVDA.

https://www.dropbox.com/scl/fi/r07gctoend4mj92j8lpx2/Kadence-menu-problem.mp4?rlkey=tq64m616jrydx6joh7syqx595&dl=0

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.

@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.

https://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.

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>

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.

Thanks! Nothing else for now.

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 @gikaragia ,
Thanks a lot, this is the guidance is what I am looking for. I also noticed that with screen reader it is not possible for me to achieve this. You might want to check on the accessibility of this procedure.

@dericleeyy
I am using the free version of sensei and while I read documentation, I saw that conditional content is free and block visibility is for pro.
Thank you!

Hello Michael,
Yes, most of the major issues have been resolved. Got few minor one & I will revisit them after March. Ben here is very helpful & prompt with updates. Thanks to him for Kadence being more accessible than other themes.

Good to know that you like my articles on accessibility. This encourages me to keep going.

Thank You!

i believe there is a ticket addressing this. for now i am adding title attribute on iframe manually in the embed code itself. Would appreciate if there is a function to do this.

Agree, if only few videos are there. The site is going to have a lot of videos & i don’t want content authors to worry about tech stuff.

Hello,

Yes, we need aria-hidden, I provide the same fix in my site. I also changed the role=tablist to role=toolbar in carousel & it is working as expected. The carousel is fully accessible with that minor change.

Thanks!

Hello,
Here are the bugs that need fixing for next update,
In the related post carousel the following code got tablist, this need to be toolbar. tablist role is used for tabs & the child roles are missing. Use axe chrome extension to find the accessibility bug.
<div class=”tns-nav” role=”tablist” aria-label=”Carousel Pagination”><button type=”button” data-nav=”0″ aria-controls=”tns1″ style=”” aria-label=”Carousel Page 1″ class=”” tabindex=”-1″></button><button type=”button” data-nav=”1″ tabindex=”-1″ aria-controls=”tns1″ style=”” aria-label=”Carousel Page 2″></button><button type=”button” data-nav=”2″ aria-controls=”tns1″ style=”” aria-label=”Carousel Page 3 (Current Slide)” class=”tns-nav-active”></button><button type=”button” data-nav=”3″ tabindex=”-1″ aria-controls=”tns1″ style=”display:none” aria-label=”Carousel Page 4″></button><button type=”button” data-nav=”4″ tabindex=”-1″ aria-controls=”tns1″ style=”display:none” aria-label=”Carousel Page 5″></button><button type=”button” data-nav=”5″ tabindex=”-1″ aria-controls=”tns1″ style=”display:none” aria-label=”Carousel Page 6″></button></div>

There are two scroll to top elements exposing to screen reader the button tag is in tab navigation & the tag that has tabindex=-1 is coming in readeing order while using arrow keys. The tag need to be removed from DOM & only the button tag should be exposed.

If these are fixed I believe we fixed all failures. There are best practices, I can provide the best practices & developers can fix if they have time.

Hi, Thanks for fixing the accessibility issues. Really appreciate the prompt response,
i see the following failure from Axe chrome extension,

Issue Description
Ensures links have discernible text
Element location
#kt-scroll-up
Element source
<a id="kt-scroll-up" tabindex="-1" href="#wrapper" class="kadence-scroll-to-top scroll-up-wrap scroll-ignore scroll-up-side-right scroll-up-style-outline vs-lg-true vs-md-true vs-sm-false">
To solve this issue, you need to...
Fix at least one (1) of these issues:
? 
Element does not have text that is visible to screen readers
? 
aria-label attribute does not exist or is empty
? 
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
?

i believe there is a Icon or something before the button tag that needs hiding from screen reader. i see the tabindex=-1, we need to provide aria-hidden=true for it. so it will not appear in DOM. currently screen reader identifies this element when using arrow key navigation.