plainspace
commented
4 years ago Brand text color is does not pass AA for light theme.
Open avickers opened 4 years ago
plainspace
commented
4 years ago Brand text color is does not pass AA for light theme.
This site is a prime example of why relying on Lighthouse or even Axe is insufficient when it comes to a11y.
Try navigating the page via tab. The only focusable element is the div containing the SVG overlay. Even though the links should be added to the tab order, they're not. This means keyboard only users wouldn't be able to select them. It also makes me concerned that some screen readers wouldn't "see" anything on the page other than that SVG. It is always, always, always a good idea to check tab order and, at least, the built in screen readers for Android and iOS manually after finishing a template because the tooling is unreliable.
One potential solution would be to inline the CSS animation inside the SVG itself and set the image as a background. Background-blend-mode could be used to continue to support the theming.
While one could querySelectorAll("a") and set the tabindex to 0 manually, I would be concerned that issues for screen readers would persist. I think it's worth the slight additional effort to eliminate the SVG overlay entirely. Note that this might actually fail to resolve the issue. The other thing that I saw was that the root html tag was getting about 2 dozen classes applied to it, and the problem could be stemming from that somehow.
It's too close to year end/my holiday travels right now, but I offer this in the hopes that someone takes it up and makes this recruitment site accessible to the designers who would be best suited to providing and enhancing a11y support to Oxide in the long run. Cheers and good luck to all.