I've just tested a new webpage on a dev site I'm working on in Page Speed Insights and one of the failing items is in the Accessibility section. It highlights an issue with the standard Joomla menu module.
Currently I only have 4 level 1 menu items, with a single level 2 menu item from one of the level 1 menu items. This single level 2 menu item is the one that generates the error.
If I test on the parent menu item of the failing level 2 menu item page, I get the same error in PSI.
It would appear that the aria-hidden ="true" attribute is being added by JS at some point as if I check the Source of the page with dev tool this attribute is missing from the HTML
But if checked with 'Inspect' the failing code is present.
It states:
[aria-hidden="true"] elements contain focusable descendents
Focusable descendents within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how aria-hidden affects focusable elements.
Failing Elements
Find Your Distributor
<ul class="mod-menu__sub list-unstyled small" aria-hidden="true">
Find Your Distributor
<a href="/distributor/find-your-distributor" aria-current="page">
None, It happens right away
Not sure, but certainly no errors should be recorded in page Speed Insights
What version of Joomla were you using?
5.0.1
What device were you using? (eg, phone, laptop)
Laptop
What web browser were you using? (eg, Chrome, Safari)
Chrome
If you were using assistive technology, please let us know the device or software you were using (eg VoiceOver, JAWS, sip-and-puff device, etc)
None
If you know which WCAG or ATAG criteria this violates, please indicate it here:
https://dequeuniversity.com/rules/axe/4.7/aria-hidden-focus
Standard(s)
WCAG 2.1 (A)
WCAG 2.0 (A)
Trusted Tester
WCAG Success Criteria [WCAG 2.1 (A)]
4.1.2: MUST: Name, Role, Value
WCAG Success Criteria [WCAG 2.0 (A)]
4.1.2: MUST: Name, Role, Value
Trusted Tester Guidelines
6.A: MUST: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.
[aria-hidden="true"] elements contain focusable descendents
Focusable descendents within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how aria-hidden affects focusable elements.
Failing Elements
Find Your Forte Distributor
<ul class="mod-menu__sub list-unstyled small" aria-hidden="true">
Find Your Distributor
<a href="/distributor/find-your-distributor" aria-current="page">
Labels |
Added:
No Code Attached Yet
a11y
|
Update:
I've just tested a different page on the website with a second menu module used. This second menu module only has level 1 items. In PSI there are no additional errors recorded. So, it would seem the issue is only present if menu sublevels are used.
can you try this please.
Copy all the files in templates\cassiopeia\html\mod_menu
to
templates\area65\html\mod_menu
and then in the menu module advanced tab set the layout to collapsible dropdown
ok, hold on, I'll do it now
thats just a missing language string. select the highlighted on in your screenshot
ok done.
I also tested the 'collapsible default menu' option from the module. Which works as expected and did not return an error in PSI. So, maybe it's just an issue in the base default menu option.
@dgrammatiko would you re-open your PR? please :)
Labels |
Added:
bug
|
can you share a link to the site please