Return to previous page

WCAG Compiliance problems. - by tasospk - on WordPress WooCommerce support

This topic has 12 replies, 2 voices, and was last updated 3 years, 1 months ago ago by Olga Barlow

tasospk

Participant

September 22, 2021 at 10:15

So following up my previous question which I solved alone by inspecting code and css I would like to ask you.
I’ve seen that the Xstore theme is Marketed as WCAG Compiliant and so because I Have worked with it before we decided to get it for our current project.
Thing is that i’m getting errors on Wave validator which are not show up(gonna inspect further on that subject)
and I get a 39 errors on W3 validator, removing the alternate text error which is easy fixable (and will be fixed since the pictures are gonna replaced) all the others are have to do with the code and the way its generated.
Is there any way you can help me with those?
I can provide all the required fixes from the errors that we can’t fix ourselfs.
Our project requires to have 0 errors on both validators.
Thanks

Please, contact administrator
for this information.

#303073 Copied Theme version: 4.0.6 WooCommerce version: 5.6.0

11 Answers

Olga Barlow

Support staff

September 22, 2021 at 12:44

Hello,

Provide us with FTP access and links to validators you use. We’ll try to help you.

Regards

#303104 Copied

tasospk

Participant

September 23, 2021 at 10:47

Hello Again.
Please take a look at the hidden content.
Validators in which our site requires 0 errors are the following two.
https://wave.webaim.org/
https://validator.w3.org/nu/

In most cases I’m able to fix the errors on wave.webaim.org but I get some contrast errors which are not displayed and I’m unable to find them.

On w3 validator on the other hand I’m getting more than 30 errors that are code.

Please note, I’m still working on that website so it still has a lot of demo content.
We’re not looking at errors like alternate text missing which is gonna fixed when I’ll upload our pictures with the correct alt tags etc.
We care about the errors that coming directly from the code.

Let me know if I can do anything else to help and Thank you again.

Edit : After heavy inspecting I was able to solve most errors on wave validator. There are 3 errors on shop page regarding option value but I wasn’t able to solve those by changing the colors on css.

On W3 validator the most errors are related to css parse errors or from color variables.

Please contact administrator
for this information.

#303216 Copied

Olga Barlow

Support staff

September 24, 2021 at 10:09

Hello,

Thank you.
We have checked issues related to theme settings.
Low contrast error you get at the slider slide https://prnt.sc/1tfvgif
Validator w3 CSS errors related to Elementor plugin styles https://prnt.sc/1tfv49g So, contact Elementor plugin to find out if they could fix them.
To fix duplicate ID error go to Appearance > Menus > create separate menu for the mobile and then go to Theme Options > Header builder > Mobile menu > choose newly created menu there. Save settings, check the site again.

Regards
Padding can’t be negative, be attentive https://prnt.sc/1tfug7m

#303340 Copied

tasospk

Participant

September 24, 2021 at 10:55

Thank you Olga for defining those for me.
I was aware about low contrast issues on slider and those are gonna be fixed easily.
As the negative padding which was something experimental.
Thanks for taking time and editing some things.
~~I’ll contact the elementor team to see if they can help with the errors coming from their builder.~~

Edit: elementor is pushing an experimental setting which can be found on Elementor —> Settings —-> Expirements with the name Accessibility Improvements after changing that from Default to Active errors that came from elementor gone away. I’m informing you just in case you may need to know that for future references.
Edit 2: Elementor related errors remained on homepage but dissapeared from home page.

I’m attaching a screenshot about those option style issues which I’m unable to fix by css and are everywhere in the shop pages.
https://i.imgur.com/xwTWv0H.png

~~Are those also coming off elementor?~~
Those errors are not coming from elementor, they still exist after fixing elementor errors with the
Accessibility settings.

Thanks again for your time and work.

#303346 Copied

Olga Barlow

Support staff

September 24, 2021 at 17:23

Hello,

Seems that this is search form https://prnt.sc/1th7r3l
You can manage color of the input text from Theme Options > Header builder > Search.

Regards

#303398 Copied

tasospk

Participant

September 28, 2021 at 11:00

Hey Olga, Thanks again for trying to help.
The problem you highlighted on your previous reply got fixed without me taking any action for it, could be the search as you said but not sure.
The two other errors are related to the “Sorting” menu bar above the products as you can see in the first picture.
Also I Noticed that those errors are not present while using Wave validator to scan from Google chrome, they are present on firefox only.
Would like to fix them on firefox too, because I don’t know which browser is gonna be used to validate the website.
Any ideas?

Pictures album here
https://imgur.com/a/cDfiAj3

Thanks again.

#303736 Copied

Olga Barlow

Support staff

September 28, 2021 at 17:27

Hello,

At this moment your select has the black color of text on the white bg. I don’t know what could be more contrast than that. I think that that issue with the FF is some kind of glitch. Truly saying don’t have ideas on how to fix that for you.
Besides I don’t see the mentioned error while testing using FF https://prnt.sc/1tytiwy

Regards

#303782 Copied

tasospk

Participant

September 28, 2021 at 21:26

I suspected that it was somehow the border of the selection since its the only thing I wasn’t able to change the color with css.
I did scan again from home this time both with Chrome and with Firefox and I still get them on Firefox could be some firefox glitching but its somekind weird that occurs into the validator.
It’s even weirder that you dont see the mentioned errors even with firefox.
Hopefully nobody will use the validator on firefox.

#303834 Copied

Olga Barlow

Support staff

September 29, 2021 at 09:59

Hello,

Shop page does not have errors, I checked a few times. Border can’t cause the contrast error.
I see that errors on the home page come from the Revolution slider layer https://prnt.sc/1u2dx8a Do you plan to change the slider and its layers?

Regards

#303866 Copied

tasospk

Participant

September 29, 2021 at 12:33

Hello,
Today I fixed the errors on the revolution slider,so also homepage is error free.
Shop is fixed on Chrome but i still get those 3 errors on Firefox. Hopefully it’s not a problem since It’s probably a FF bug.

There’s only a minor thing that gives me an error.
That error appears only if a product is assigned on more than one category.(picture)
When The product displays only one category there’s no error as you witnessed.

So I believe that the suspect here is the Comma between the categories names.
It’s the only contrast errors I get and besides the demo pictures the only error I get at all.

Edit: I was able to change comma color via css and the errors got away. Just letting you know for future reference since you may need it.

I also getting 3 errors on the Wishlist page, but I guess I have to contact YITH about that matter?
Or you can help with those also?

Thanks again Olga for your help.

Edit2: Honestly it start to get too confusing. I’m now getting a new error related to screen readers both on chrome and on firefox and without making any changes at all.(picture2)

Please contact administrator
for this information.

#303926 Copied

Olga Barlow

Support staff

September 30, 2021 at 16:06

Hello,

1) yes, you need to contact YITH Wishlist plugin support about errors on the Wishlist page.
2) I don’t have any errors on the home page https://prnt.sc/1u8h4u4
So, I don’t know why it gives you errors there again.

Regards

#304038 Copied
Tagged: accessibility, compiliance, templates, wcag, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)