-
Posts
-
Hi,
I’ve did test on my website and ended with following critical issue there:Certain ARIA Roles Must Be Contained By Particular Parents
Fix any of the following: Required ARIA parents role not present: menu, menubar, group<li role="menuitem" id="menu-item-2052" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2011 current_page_item menu-item-top-level menu-item-top-level-1"> Fix any of the following: Required ARIA parents role not present: menu, menubar, group<li role="menuitem" id="menu-item-759" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-2"> Fix any of the following: Required ARIA parents role not present: menu, menubar, group<li role="menuitem" id="menu-item-760" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-3"> Fix any of the following: Required ARIA parents role not present: menu, menubar, group<li role="menuitem" id="menu-item-761" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-4"> Fix any of the following: Required ARIA parents role not present: menu, menubar, group<li role="menuitem" id="menu-item-762" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-5"> Fix any of the following: Required ARIA parents role not present: menu, menubar, group<li role="menuitem" id="menu-item-763" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-6">Id Attribute Value Must Be Unique
Fix any of the following: Document has multiple static elements with the same id attribute: menu-item-2052<li role="menuitem" id="menu-item-2052" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home page_item page-item-2011 current_page_item menu-item-top-level menu-item-top-level-1 current-menu-item"> Fix any of the following: Document has multiple static elements with the same id attribute: menu-item-759<li role="menuitem" id="menu-item-759" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-2"> Fix any of the following: Document has multiple static elements with the same id attribute: menu-item-760<li role="menuitem" id="menu-item-760" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-3"> Fix any of the following: Document has multiple static elements with the same id attribute: menu-item-761<li role="menuitem" id="menu-item-761" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-4"> Fix any of the following: Document has multiple static elements with the same id attribute: menu-item-762<li role="menuitem" id="menu-item-762" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-5"> Fix any of the following: Document has multiple static elements with the same id attribute: menu-item-763<li role="menuitem" id="menu-item-763" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-6">Ul And Ol Must Only Directly Contain Li Script Or Template Elements
Fix all of the following: List element has direct children with a role that is not allowed: menuitem<ul id="menu-hlavne-menu" class="av-subnav-menu">Elements Must Have Sufficient Color Contrast
Fix any of the following: Element has insufficient color contrast of 3.15 (foreground color: #919191, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1<p class="uk-margin-remove uk-text-large"> Fix any of the following: Element has insufficient color contrast of 1.88 (foreground color: #bdbdbd, background color: #ffffff, font size: 9.0pt (11.96px), font weight: normal). Expected contrast ratio of 4.5:1<input type="button" value="Odoslať" class="button av-verify-recaptcha-0 av-recaptcha-submit avia_button_inactive" data-sending-label="Odosielam" title="Please validate that you are a human first">Any ideas why this is reported and how to fix this?
Hey Jaro,
Thank you for the inquiry.
— Certain ARIA Roles Must Be Contained By Particular Parents
The menu items are already wrapped in a ul element with the role attribute and the value is set to “menu”, so this is a false positive.
— Id Attribute Value Must Be Unique
The id attribute of the menu items are already unique, so once again this report is not accurate.
— Ul And Ol Must Only Directly Contain Li Script Or Template Elements
Not sure what this means but when we checked the menu-hlavne-menu container, it only contains li elements, and nothing else.
— Elements Must Have Sufficient Color Contrast
It seems to be referring to the text block containing the “uk-margin-remove” paragraph. You can adjust the color of the paragraph in the text block’s Styling > Font Colors panel, or manually apply the color as inline css styles. For the menu items, you should be able to adjust the Main Menu Links colors in the Enfold > Advanced Styling panel.
Best regards,
IsmaelThanks Ismael,
Could these false positives be because I have menu on top of page but also in footer? And of these are not proper?
Because the same happens when I run the tests with pagespeed.web.dev. Not sure then if they are false positives. Something must be triggering it.EDIT:
I’ve removed the bottom menu from homepage and re-run tests and the issues seems to be gone. So it seems the issue is with that menu only.
Now I enabled it back and again it reports issues. So something is wrong with that Aria menu.
I’ve put the menu differently on bottom now which seems to solve those 3 errors.Jaro.
I was able to fix all the menu issues now. It seems I still have issue with contrast on my “Contact Form” Send button.
Can you please let me know how to fix that one? I’m not able to find CSS/Options which deal with this button. It is by default little bit “blurry” until I click reCaptcha. Would be good If I can somehow modify colours of both button states.I can see it in documentation https://kriesi.at/documentation/enfold/contact-form/#toggle-id-9. Not required anymore.
Thanks . Feel free to close this oneHi,
Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
- The topic ‘Page tests issues with aria menu + colours’ is closed to new replies.