♿ 🐞 Accordion and Toggle have broken accessibility

[clmnsm]

Prerequisites

• [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [X] The issue still exists against the latest stable version of Elementor.

Description

Both toggle and accordion (non-container variant) use aria-attributes like -expanded and -controls, which is great.

Unfortunately, they also misuse tabindex which make those attributes invisible to users that rely on keyboard navigation.

Steps to reproduce

❌ Opened items have both the "elementor-tab-title" and the "elementor-accordion-title/elementor-toggle-title" at tabindex 0. ✔️ Only "elementor-tab-title" should be at tabindex 0, "elementor-accordion-title/elementor-toggle-title" should be at -1 because it doesn't provide meaningful aria info – it's just an empty link.

❌ Closed items have only "elementor-accordion-title/elementor-toggle-title" at tabindex 0. The "elementor-tab-title" is at -1 and therefore not focusable. ✔️ Instead, the "elementor-tab-title" should be at 0, because it provides meaningful information like aria-expanded="false".

In summary: only the element that has the aria-expanded and aria-controls attributes should have a tabindex of 0. The empty link inside this element should be at -1 (or should not be a link at all?)

Isolating the problem

• [X] This bug happens with only Elementor plugin active (and Elementor Pro).
• [X] This bug happens with a Blank WordPress theme active (Hello theme).
• [X] I can reproduce this bug consistently following the steps above.

System Info

Click to reveal

``` == Server Environment == Operating System: Linux Software: Apache MySQL version: Ubuntu 20.04 v10.3.38 PHP Version: 8.1.21 PHP Memory Limit: 256M PHP Max Input Vars: 9999 PHP Max Post Size: 12M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 6.2.2 Site URL: Home URL: WP Multisite: No Max Upload Size: 8 MB Memory limit: 40M Max Memory limit: 256M Permalink Structure: Plain Language: de-DE Timezone: Europe/Berlin Admin Email: Debug Mode: Inactive == Theme == Name: Hello Elementor Version: 2.7.1 Author: Elementor Team Child Theme: No == User == Role: administrator WP Profile lang: de_DE User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 == Active Plugins == Elementor Version: 3.15.1 Author: Elementor.com Elementor Pro Version: 3.15.0 Author: Elementor.com == Eigenschaften == Custom Fonts: 0 Custom Icons: 0 == Integrations == == Elementor-Experimente == Optimierte DOM Ausgabe: Standardmäßig aktiviert Verbessertes Laden von Assets: Standardmäßig aktiviert Verbessertes Laden von CSS: Standardmäßig aktiviert Inline-Schriftarten-Symbole: Standardmäßig deaktiviert Zusätzliche benutzerdefinierte Breakpoints: Standardmäßig aktiviert admin_menu_rearrangement: Standardmäßig deaktiviert Flexbox Container: Aktiv Upgrade Swiper Library: Standardmäßig aktiviert Grid Container: Aktiv Default to New Theme Builder: Standardmäßig aktiviert Hello Theme Header & Footer: Standardmäßig aktiviert Editor Top Bar: Standardmäßig deaktiviert Startseiten: Standardmäßig aktiviert Nested Elements: Aktiv Hintergrundbilder nachladen: Standardmäßig deaktiviert Global Style Guide: Standardmäßig aktiviert Page Transitions: Standardmäßig aktiviert Notes: Standardmäßig aktiviert Loop: Standardmäßig aktiviert Form Submissions: Standardmäßig aktiviert Scroll Snap: Standardmäßig aktiviert Menü: Standardmäßig deaktiviert Taxonomy Filter: Standardmäßig deaktiviert == Protokoll == == Elementor - Compatibility Tag == Elementor Pro: Kompatibel == Elementor Pro - Compatibility Tag == ```

[nicholaszein]

Hi again, @clmnsm!

Thank you for submitting your issue! 🙏

Please allow us some time to investigate it, and get back to you with our findings. 🧐

Best regards

[hein-obox]

@nicholaszein Accessibility still needs to be implemented for the new widget.

[clmnsm]

The new nested accordion seems to be fine, actually. It's using html native summary/details which at least ChromeVox interprets correctly.

If only there was a conversion button... Manual copying of accordions with dozens of entries is a real chore.

[renzat]

On my site the Elementor toggle module wouldn't open on windows without a WordPress admin bar at the top. Switching from Hello theme to GeneratePress theme fixed the issue.

Hello Theme / Elementor / Elementor Pro no WordPress admin bar (toggle does not open):

Hello Theme / Elementor / Elementor Pro WITH WordPress admin bar (toggle opens):

GeneratePress / Elementor Elementor Pro WITHOUT WordPress admin bar (toggle opens):

mateuswetah commented 8 months ago

Not sure if related, but the <a class="elementor-accordion-title" definitely needs a role="button". This is also causing SEO issues on the Google Lighthouse Report.

manishagarwal-tech commented 7 months ago

Also using elementor accordion it breaks the accessibility, as it generates aria-selected and aria-expnaded to true on active accordion.

Generated DOM:

Issue: ARIA attribute is not allowed: aria-selected="true" How can we remove or disallow aria-selected should not rendered. Any suggestion on it?

hein-obox commented 7 months ago

@nicholaszein I believe we should redo the accessibility implementation of the Nested Accordion and the Nested Tabs, to remove the keyboard navigation and to replace it with the tab navigation, as we have for the Mega Menu. I have opened a task for that.

In the implementation we should add Lighthouse tests inside our Playwright tests, to make sure we comply with all Lighthouse guidelines.

@manishagarwal-tech I am not sure what you mean by 'ARIA attribute is not allowed: aria-selected="true"'. What do you mean by that? Is there a Lighthouse violation? Or what makes you say that the aria attribute isn't allowed here?

manishagarwal-tech commented 7 months ago

Hey @hein-obox We have used the elementor accordion on our website to display some FAQs, when we run the accessibility test on that page, we are getting warning about the accordion DOM (generated by elementor itself), We are using axeDevTools chrome addon to check the accessibility improvements.

I am not sure this issue is not being recreated on the lighthouse. can you guide me why I am getting that issue while using elementor.

DOM Generated by Elementor:

Warning (by: axeDevTools): ARIA attribute is not allowed: aria-selected="true" It says about more information you may check https://dequeuniversity.com/rules/axe/4.8/aria-allowed-attr?application=AxeChrome It is something need to be fix at elementor end or my end, please suggest.

manishagarwal-tech commented 7 months ago

DOM Generated by Elementor:

<div id="elementor-tab-title-7471" class="elementor-tab-title elementor-active" data-tab="1" role="button" aria-controls="elementor-tab-content-7471" aria-expanded="true" tabindex="0" aria-selected="true">

manishagarwal-tech commented 7 months ago

DOM Generated by Elementor:

<div id="elementor-tab-title-7471" class="elementor-tab-title elementor-active" data-tab="1" role="button" aria-controls="elementor-tab-content-7471" aria-expanded="true" tabindex="0" aria-selected="true">

and for non-active accordion both aria-selected and aria-expanded set to false

hein-obox commented 7 months ago

Thank you, @manishagarwal-tech for your feedback.

@doronwolf We need to prioritise the Nested Accordion task, because there seems to a problem currently.

ranjeetananda commented 7 months ago

@hein-obox for the issue reported by @manishagarwal-tech - do you have an eta on the fix on the elementor side? This is causing accessibility test to fail on some of our client pages too where accordion is used.

hein-obox commented 7 months ago

@ranjeetananda @manishagarwal-tech From what I can see this is an issue inside the old Accordion widget. The quickest solution might be to start using the new nested widget, available under the Nested Elements experiment. See https://elementor.com/help/accordion-widget/#:~:text=If%20you%20are%20using%20the,and%20buttons%20to%20your%20Accordions (bottom of the page).

@nicholaszein @rami-elementor Can this be solved in the existing Accordion widget as well?

ranjeetananda commented 6 months ago

Is there a way to fix this in existing Accordion Widget. Recreating the pages with new nested accordions is going to be a lot of work for us. @hein-obox @rami-elementor @nicholaszein

KennethErvinYoung commented 5 months ago

Toggle Element Page Speed Insights SEO Bug

I verified that the DaveDen2 code resolves the problem on the Toggle Element. I tried the PHP code from sebsonic2o, but it did NOT work on the Toggle element. It's been ten months. Perhaps Elementor changed something that broke his code. I will modify the DaveDen2 code to try to fix the Accordion element, which is failing Google PSI for "aria—* attributes do not match their roles." This may be the same issue or a similar one. Please share if anyone has successfully implemented a PHP code snippet for the Accordion element.

<?php

add_filter( 'elementor/frontend/the_content', 'add_role_attribute_to_elementor_links', 10, 2 );

function add_role_attribute_to_elementor_links( $content ) { $dom = new DOMDocument(); $dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) ); $xpath = new DOMXPath( $dom ); $elements = $xpath->query( "//a[contains(concat(' ', normalize-space(@class), ' '), ' elementor-accordion-title ') or contains(concat(' ', normalize-space(@class), ' '), ' elementor-toggle-title ')]" ); if ( $elements->length > 0 ) { foreach ( $elements as $element ) { $element->setAttribute( 'role', 'presentation' ); } $content = $dom->saveHTML(); } return $content; }

Accordion Bug - Page Speed Insights Accessibility Bug:

These guys claim they have verified the code identifying the Elementor Accordion coding error, and it only needs a simple one-line fix. I haven't tried it yet, but I'm going to.

https://www.testpros.com/accessibility/making-elementor-essential-addons-accordion-accessible/

Trott commented 1 month ago

I'm pretty sure the problem is this code which sets aria-selected regardless of whether the tab title has role=button or not. (This is in activateTab(). There is a similar issue in deactivateTab().)

https://github.com/elementor/elementor/blob/c4a9dc5fd2d452c7e7eac1eecb9683e9bd397e52/assets/dev/js/frontend/handlers/base-tabs.js#L132-L136

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[mateuswetah]

Not sure if related, but the <a class="elementor-accordion-title" definitely needs a role="button". This is also causing SEO issues on the Google Lighthouse Report.

[manishagarwal-tech]

Also using elementor accordion it breaks the accessibility, as it generates aria-selected and aria-expnaded to true on active accordion.

Generated DOM:

Issue: ARIA attribute is not allowed: aria-selected="true" How can we remove or disallow aria-selected should not rendered. Any suggestion on it?

[hein-obox]

@nicholaszein I believe we should redo the accessibility implementation of the Nested Accordion and the Nested Tabs, to remove the keyboard navigation and to replace it with the tab navigation, as we have for the Mega Menu. I have opened a task for that.

In the implementation we should add Lighthouse tests inside our Playwright tests, to make sure we comply with all Lighthouse guidelines.

@manishagarwal-tech I am not sure what you mean by 'ARIA attribute is not allowed: aria-selected="true"'. What do you mean by that? Is there a Lighthouse violation? Or what makes you say that the aria attribute isn't allowed here?

[manishagarwal-tech]

Hey @hein-obox We have used the elementor accordion on our website to display some FAQs, when we run the accessibility test on that page, we are getting warning about the accordion DOM (generated by elementor itself), We are using axeDevTools chrome addon to check the accessibility improvements.

I am not sure this issue is not being recreated on the lighthouse. can you guide me why I am getting that issue while using elementor.

DOM Generated by Elementor:

Warning (by: axeDevTools): ARIA attribute is not allowed: aria-selected="true" It says about more information you may check https://dequeuniversity.com/rules/axe/4.8/aria-allowed-attr?application=AxeChrome It is something need to be fix at elementor end or my end, please suggest.

[manishagarwal-tech]

DOM Generated by Elementor:

<div id="elementor-tab-title-7471" class="elementor-tab-title elementor-active" data-tab="1" role="button" aria-controls="elementor-tab-content-7471" aria-expanded="true" tabindex="0" aria-selected="true">

[manishagarwal-tech]

DOM Generated by Elementor:

<div id="elementor-tab-title-7471" class="elementor-tab-title elementor-active" data-tab="1" role="button" aria-controls="elementor-tab-content-7471" aria-expanded="true" tabindex="0" aria-selected="true">

and for non-active accordion both aria-selected and aria-expanded set to false

[hein-obox]

Thank you, @manishagarwal-tech for your feedback.

@doronwolf We need to prioritise the Nested Accordion task, because there seems to a problem currently.

[ranjeetananda]

@hein-obox for the issue reported by @manishagarwal-tech - do you have an eta on the fix on the elementor side? This is causing accessibility test to fail on some of our client pages too where accordion is used.

[hein-obox]

@ranjeetananda @manishagarwal-tech From what I can see this is an issue inside the old Accordion widget. The quickest solution might be to start using the new nested widget, available under the Nested Elements experiment. See https://elementor.com/help/accordion-widget/#:~:text=If%20you%20are%20using%20the,and%20buttons%20to%20your%20Accordions (bottom of the page).

@nicholaszein @rami-elementor Can this be solved in the existing Accordion widget as well?

[ranjeetananda]

Is there a way to fix this in existing Accordion Widget. Recreating the pages with new nested accordions is going to be a lot of work for us. @hein-obox @rami-elementor @nicholaszein

[KennethErvinYoung]

Toggle Element Page Speed Insights SEO Bug

I verified that the DaveDen2 code resolves the problem on the Toggle Element. I tried the PHP code from sebsonic2o, but it did NOT work on the Toggle element. It's been ten months. Perhaps Elementor changed something that broke his code. I will modify the DaveDen2 code to try to fix the Accordion element, which is failing Google PSI for "aria—* attributes do not match their roles." This may be the same issue or a similar one. Please share if anyone has successfully implemented a PHP code snippet for the Accordion element.

<?php

add_filter( 'elementor/frontend/the_content', 'add_role_attribute_to_elementor_links', 10, 2 );

function add_role_attribute_to_elementor_links( $content ) { $dom = new DOMDocument(); $dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) ); $xpath = new DOMXPath( $dom ); $elements = $xpath->query( "//a[contains(concat(' ', normalize-space(@class), ' '), ' elementor-accordion-title ') or contains(concat(' ', normalize-space(@class), ' '), ' elementor-toggle-title ')]" ); if ( $elements->length > 0 ) { foreach ( $elements as $element ) { $element->setAttribute( 'role', 'presentation' ); } $content = $dom->saveHTML(); } return $content; }

Accordion Bug - Page Speed Insights Accessibility Bug:

These guys claim they have verified the code identifying the Elementor Accordion coding error, and it only needs a simple one-line fix. I haven't tried it yet, but I'm going to.

https://www.testpros.com/accessibility/making-elementor-essential-addons-accordion-accessible/

[Trott]

I'm pretty sure the problem is this code which sets aria-selected regardless of whether the tab title has role=button or not. (This is in activateTab(). There is a similar issue in deactivateTab().)

https://github.com/elementor/elementor/blob/c4a9dc5fd2d452c7e7eac1eecb9683e9bd397e52/assets/dev/js/frontend/handlers/base-tabs.js#L132-L136