Problem with Aria-Labels & Roles in WordPress (accessibility)

Front-end presentational issues are, for the most part, up to your theme…. unless

1) You’re using a 3rd-party page builder plugin to bypass the theme’s front-end templates (eg Elementor), or

2) You’re using a plugin that outputs content on the front end of your site (eg WooCommerce)

To be able to give you an idea of where your accessibility problems may be coming from, we need to examine your page’s code in the Wave accessibility checker you’re using. Screenshots won’t cut it.

So if you need further help, please provide the URL of the page.

Standing by.

Hi George! Thank you for your answer!

Due to security reasons, I’m giving you the address in pieces. So, please write aegeo-sailing and concatenate it with .gr

Please have a look and tell me what’s wrong.

The urgent thing here is the Nr. 1 question of mine, thus how to intervene in the HTML code of each page and how to correct the Contrast Errors!

Sorry, for the late response. Life got in the way ??

Your screenshot shows 46 contrast errors.

A “contrast error” simply means the colours of the text and its background are too close… so it’s difficult to read the text (and for some people, it may be impossible to read).

You should be able to easily change both text and background colours in the Elementor plugin’s editor, where you created the page.

Your screenshots show additional 12 errors, of which:

— 9 are images without alt tags. When you insert an image in your post, you should add descriptive text in the Alt/Alternative text field so this text will be read out by screen readers. Again, you don’t need to code to do this. In the Editor that you used to create the post and insert the images, there should be the option to add Alternative text.

— 2 empty headings: At two different places on your homepage, you inserted a headline block (h5) but didn’t include any text. If you don’t need these headlines, remove them.

— 1 broken “Skip” link: Your site (perhaps from your theme) has a “Skip” link allowing screen readers to skip all the navigational elements at the top of the page to go straight to the main content. But this link isn’t working on your site.

After this, there are several warnings (Alerts) as well. Some of these have to do with skipping headline levels (eg jumping from H2 to H5), missing first-level heading (H1), redundant links, etc.

The important thing is this: you don’t need to access your pages HTML or do any custom coding to fix any of these. And the serious Errors have nothing to do with aria labels or roles. Most of your accessibility issues, at least on your homepage, have to do with errors and omissions you’re making in the editor where you’re building your pages.

Good luck!

I wrote the above post yesterday, but could only post it today (and did so without re-checking your site).

I just checked your site again (after posting my response above), and it seems you’ve fixed most (but not all) of the errors reported by Wave.

Thank you very much George!

No worries, in any case your information is very precious and educational to me!!

As you said, after a lot of digging, I found the Alt texts missing and I added them respectively.

The empty headings were generated by a TripAdvisor plugin (WP TripAdvisor Review Slider). Therefore, I disabled it temporarily until I find a solution on this (which is kind hard to tell the truth!).

The only error now is the 1 broken “Skip” link, which I cannot find it anywhere on the theme settings! Is there a way to search some php/html file of the theme and find it and remove it that way?

Also, another relative issue is a “very low contrast” error on the text “SAVE & ACCEPT” which is not (visually at least) appeared anywhere in my site and there is also not appeared in my Cookie Consent plugin (CookieYes | GDPR Cookie Consent – Free edition) settings!! Similarly, how can I remove this whole <a> tag from code, if I cannot change it anyway?

Eagerly waiting for your input,
George!

??

• This reply was modified 1 year, 8 months ago by George.

Hi George!

I’m sending you to inform you that I’ve found the solution for the “Skip” link! The solution was inside my Accessibility plugin, inside General Settings -> Skip to content link -> Disable. I disabled the Skip link totally.

Also, I resolved all the Errors and Contrast Errors on all of my pages (in Greek and English language), besides the one and only “very low contrast” error on the link’s text “SAVE & ACCEPT” which is there due to my Cookie Consent plugin (CookieYes | GDPR Cookie Consent – Free edition)…

I cannot found where to edit this “SAVE & ACCEPT” link’s style. I have not enabled it anywhere, plus, I cannot enable it in the Free edition (I think). Thus, I cannot found a way to correct this.

I’ll post in the CookieYes support and I will let you know!

Despite this, if you have any ideas, send me!

Relative screenshots:

1) What is really visible in the website

2) What the Wave sees in the code (which never and nowhere appears in the website)

• This reply was modified 1 year, 8 months ago by George. Reason: adding screenshots

Firstly, let me explain what Aria-Labels and Roles are and why they are important for website accessibility.

Aria-Labels and Roles are part of the ARIA (Accessible Rich Internet Applications) specification, which provides a way to make web content and applications more accessible to people with disabilities. Aria-Labels are used to provide a descriptive label for an element on the page, which can be read out by a screen reader for users who are visually impaired. Aria-Roles define the type of user interface element, such as a button, link, or menu, and help screen readers understand how to interact with the element.

Now, coming to the issue you are facing with Aria-Labels and Roles in WordPress. Can you please provide more details on the specific problem you are facing? Are you encountering any errors or issues with the Aria-Labels and Roles implementation on your website?