[Resolved] Screen reader contrast navigation issues

[John]

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 don’t think that is the issue. The contrast is fine on the current image. The issue is that some readers remove this image when the site loads in certain formats.

If you click on the contrast tab or the red button/icon that corresponds to the error you can see the issues is that he text is perceived as white on white:
https://snipboard.io/LcRw3r.jpg

(You can also see this if you turn styles off on the tool)

If, for example, I change the background color of the whole page to black using css:

.page-id-7 {
background-color: black!important;
}

then this error goes away, but other errors further along appear (with black text)

SO would there be a way perhaps of targeting the background colour of the top 20% of the page or something like that?
Forgive me for being convoluted and difficult. We are learning this on the fly and will apply the learnings to our next builds.

[David]

Wonder if this would do the trick then:

.page-id-7 {
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 100%);
    background-repeat: no-repeat;
    background-size: 100% 200px;
}

You can change the 200px to set the height of that background color.

[John]

YES!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Ah – the relief!
Thank you for your patience 🙂
And I really do appreciate the great support you guys offer here.

[David]

Well i learnt something today! Which is always great

Glad to be of help.

[Author]

Posts