[Resolved] Screen reader contrast navigation issues

[John]

Hello again,
Apologies to keep asking for help regarding these accessibility issues, but a lot of our clients need this now.

On the following site: wordpress-553330-1778166.cloudwaysapps.com
I am testing on https://wave.webaim.org

You will see there are issues relating to the Nav text displaying on a white background when seen in readers.
How can I fix this?

I have a few different Header elements on this site so ideally this could be something which overrides all the regular site styles etc.

Thanks again for continued great support.
Cheers!
John

[Elvin]

Hi there,

The issue seems to be solely when the nav is in sticky mode.

We can try turning the text color of the nav menu items to black when it’s sticky so there’s contrast on the light backgrounds.

Can you try adding this CSS?

nav#sticky-navigation .main-nav li a {
    color: black;
}

Ideally, it’d be nice to implement something like this – https://css-tricks.com/methods-contrasting-text-backgrounds/ – but it’s not exactly conducive for your site. And attempting to implement is may need JS w/c is out of our scope.

[John]

Hi Elvin,
Thanks for the input.
I have added the css to the site and does not seem to affect the result for readers.
ANy ideas why that may be?
I have this css in there already:
#sticky-navigation{
background-color: white!important;
color: black!important;
}
But that doesn’t seem to work either.

And I agree that the blog you linked to looks awesome but probably not right for this project.
Thanks again!

[Elvin]

That CSS you’ve added has the same idea as mine.

And it actually reduced the number of elements flagged. Initially it was 7 elements that were flagged with low contrast issues. Now its 6 and most of them are your menu items when the nav is NOT sticky.

We can try doing a workaround so WAVE sees a contrast. We can try adding text shadow to it.

Try this CSS:

nav#site-navigation .main-nav li a {
    text-shadow: 4px 4px 5px black;
}

It’s an attempt, but I’m not really sure if WAVE takes this well.

[John]

Hi again,

I did try that and it does seem to see it, but it is not strong enough to be compliant.
I did play with the blur etc to see if it would have more impact but didnt.
It also looks crap on the main nav so that is not really something we could use.

Any other ideas?
Cheers!
John

[Elvin]

You can try making the background image of the first section a bit darker than it currently is so it’s more contrasting against the text’s font color as we can’t make the font any lighter than white. 😀

[John]

I dont think that is the issue.

I think that when an image is not there(which happens when screen readers seem to remove certain elements), it displays on a white Screen reader background.
And because this is a GP Header element, I cannot target the background like I can on other pages – and make it a darker color.

Other pages use a different header so I can set their background to be different.

So is there a way you can think of to target that and not worry about the font?

[Elvin]

You can try to add a rgba background to the header as an attempt to add contrast.

header#masthead {
    background-color: rgba(0,0,0,0.25);
    box-shadow: 0 33px 20px 20px rgb(0 0 0 / 25%);
}

But I’m not sure if the look is tolerable.

Here’s how it’ll look like. https://share.getcloudapp.com/jkuLQ81K

[John]

Yeah, I don’t think that will work unless there is a way to make it not display on the regular view.
Is there a way to apply that to the screen reader view only somehow?

[David]

Hi there,

the issue i see is the Wave Webaim test is NOT loading your stylesheets. Which is the cause of the majority of those contrast errors.
If you test the GeneratePress site URL for example you will see it displays (almost) the same as what you see in your web browser.

Theres a Chrome Extension for Wave Webaim:
https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Which is working correctly with your site and only reports 1 contrast error.

[John]

Hi David,

Sorry for the slow reply. Have too many things going on.

I am still struggling with these issues – when some readers don’t load all the style sheets then this is what loads.
Is there a way to target this NAV font so it is a different colour for ARIA readers?
Or to add a background that does show, but only on the readers?

Thanks again.

[David]

I just checked the site again and its now loading the stylesheets – which is nice…. the problem i now see is the contrast between the nav elements and the background image.

The issue here is design over compliance… if the accesibility compliance is more important then maybe a merged header is not the solution. Or a darker background image would be better placed.

[John]

OK fair enough – thanks for your support.

[John]

Or a darker background image would be better placed.

Just on this – can you explain how I can do this?

As I see it, the only time this shows as a contrast error is when you turn off the stylesheets – which is what certain readers do.
Generally with beaver builder page modules I can set the column background to be a dark color, but not to show on the front of the site for the regular user – I use a module/row color as what loads – this allows for white text to show on a background.

There must be some way of doing this within the Generate Press Element that I amusing for this header.
Is there a way to set a dark background image/colour in the way you mention above?

[David]

The issue i see is the Menu Links are sitting over an Image – and presumably the contrast check is the white menu text over the image.

I am not sure how it is possible to add a solid background image to those elements without it being displayed on the front end…. but it may be possible to ‘fool’ the system by giving the bb container that has the image being merged with the GP header a solid background color – this will sit behind the image… not sure if that would work and it kinda defeats the purpose of accessibility if its just fooling the system.

[Author]

Posts