ARIA IDs are Not Unique - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

ARIA IDs are Not Unique

M

Marco

Helix Framework 3 months ago

Hello,

I ran some tests, this is about accessibility, and got the following error messages: ARIA IDs are not unique - for example, for this code:

<input type="text" name="q" id="mod-finder-searchword0" class="js-finder-search-query form-control" value="" placeholder="Suche …" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-owns="awesomplete_list_1" role="combobox">

and [id] attributes for active, focusable elements are not unique - for this code:

<a id="offcanvas-toggler" aria-label="Menu" class="offcanvas-toggler-right d-flex d-lg-none" href="#">

What can I do in these two cases to solve the problems?

Regards - Marco

0
11 Answers
Order by
Oldest Newest Votes
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 months ago #197826

Hi there,

Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. I will share your issue to our developer team. I will get back to you soon once i have got a response from our team.

Best regards,

Toufiqur Rahman (Team Lead, Support)

0
M
Marco
Accepted Answer
3 months ago #197827

thank you Toufiq

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 months ago #197843

You are most welcome & Thanks

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197863

Marco, If I may ask:

  • What template name do you have, raw Helix Ultimate or Template based on it?
  • Do you have enabled Search module/field also in Mobile Menu ?

I think I know what is wrong with 2nd issue, look @Toufiq

info_3001_2025.png

I think there should be rule "IF" with "ELSE" and only one displayed in HTML code.

0
M
Marco
Accepted Answer
3 months ago #197872

Hi Paul,

I am using raw Helix Ultimate and yes, the search field is also enabled in the Offcanvas-Menu.

Regards - Marco

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197895

so probably 1st issue if becuase of that, I mean that same search module is used twice, you see it only ones, but Accessibility tool scan HTML code and see 2x and the same ID name etc.

In normal "Blind" Person test it will be OK (Pass), but Tool is just a Tool.

0
M
Marco
Accepted Answer
3 months ago #197915

yes, of course the tool reads the HTML code - just like screen readers do, which extract ARIA attributes or semantic HTML tags from the HTML code

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197955

But Humans don't do that ;p

Yes, I asked our developer to take a look into.

Q: How urgent & important those issues are for you?

About 1st "Search", I am not sure if we can help, Joomla loads module code twice, becuase of your choice. ALternative way would be to - disable Search input field from Mobile Menu, and put only Search link to Search component view. Then only one ID will be in HTML code. For users, it will be only one click more to make research.

About 2nd "Offanvas" - small php customization is needed.

0
M
Marco
Accepted Answer
3 months ago #197967

Of course Joomla loads the search module twice because of my settings Paul - since this possibility exists and it makes sense to make the search available on the desktop and in the mobile view - don't you think? Maybe I'll have a look at how other websites that make the search available in both views have solved the problem. It's not urgent at all - I ran the test and came across the problem. The test also says that my site is 90% accessible - I wanted to let you know anyway - if you want to fix it, that's fine, if not, then not ;) Some things cannot be assessed by the test itself, manual work is required here.

Regards - Marco

0
M
Marco
Accepted Answer
3 months ago #197971

that would still have to be checked

  • The page has a logical tab order
  • Interactive controls are keyboard focusable
  • Interactive elements indicate their purpose and state
  • The user's focus is directed to new content added to the page
  • User focus is not accidentally trapped in a region
  • Custom controls have associated labels
  • Custom controls have ARIA roles
  • Visual order on the page follows DOM order
  • Offscreen content is hidden from assistive technology
  • HTML5 landmark elements are used to improve navigation
0
M
Marco
Accepted Answer
3 months ago #197972

these tests were successful

  • [aria-] attributes correspond to their roles
  • [aria-hidden="true"] does not exist in the document <body>
  • [aria-hidden="true"]-elements do not contain focusable sub-elements
  • [role]-elements have all required [aria-*] attributes
  • The elements with an ARIA [role], whose subordinate elements must contain a specific [role], have all required subordinate elements.
  • [role] elements are subordinate to their respective required parent elements
  • [role] values are valid
  • [aria-*] attributes have valid values
  • [aria-*] attributes are valid and spelled correctly
  • The names of the buttons are accessible to screen readers
  • The page contains a heading, a skip link or a landmark area
  • Document contains a <title> element
  • ARIA IDs are unique
  • Heading elements are displayed in consecutive descending order
  • <html> element has a [lang] attribute
  • The <html> element has a valid value for its [lang] attribute
  • Image elements have [alt] attributes
  • Form elements are linked to labels
  • Links have an easily recognizable name
  • Lists only contain <li> elements and elements for script support (<script> and <template>).
  • List elements (<li>) are located in parent <ul> or <ol> elements
  • [user-scalable="no"] is not used in the <meta name="viewport"> element and the
  • [maximum-scale] attribute is not smaller than 5.
  • Cells in a "<table>" element that contain the "[headers]" attribute refer to cells in the same table.
0