[Resolved] text-decoration: none Accessibility Problems

[William]

Aloha from Hawaiʻi,

Loving your theme, just wondering…the following rule in style.min.css kicks up accessibility issues.

.main-navigation a,a,a:focus,a:hover,a:visited,ins,mark {
text-decoration:none;
}

We’ve overridden this rule with our own CSS, but our accessibility checker still picks up the above rule as an issue. We’re in higher education and underlined links are required, so we’re just wondering why this is set as the default rule, and if there’s any way to change it without editing the theme files.

Thanks!

[Tom]

There’s no way to remove it from the theme without editing the core files. If your custom CSS is working and the underline is there, I wouldn’t worry too much about what the checker says.

Underlining links definitely helps point out what is a link or not, but I think color contrast is equally as important when it comes to a11y. In our case having underlines just didn’t fit the style we were going for. I’d like to add an option in the Customizer to at least add them to content links in the near future though.

Let me know if you need more info 🙂

[William]

Aloha Tom …

We have CSS styles in place to bring our site up to the accessibility standards we are governed by in US public higher ed. – both contrast and underlining.

Contrast is already easily handled by your customizer – Customizing ▸ Colors ▸ Body

Being able to turn the a text-decoration:none; rule off (perhaps via a checkbox) in the Customizer would be an awesome addition to your theme.

Totally get the style you are going for.

Mahalo from Hawaiʻi

Bill

[Tom]

Really appreciate the feedback – I hope the rest of the theme is up to standards when it comes to accessibility 🙂

Thanks!

[William]

One more thing for now, we’re wondering why there’s CSS for elements we’re not using in generate-style-inline-css. For example, the accessibility checker is catching that the contrast is not high enough for .top-bar. In order to change the colors, I had to activate the secondary nav, go to customizer, add a widget to the “top bar,” change the colors of the top bar, delete the widget, save, then deactivate the secondary nav. Is there a simpler way to do this?

Thanks!

[Tom]

Since we use CSS caching, we generate all of the CSS once and output it.

A widget can be added to the widget area without flushing the cache, so styling wouldn’t be present, which would cause issues.

We weighed the performance improvements of doing this vs not loading the CSS, and it wasn’t even close.

If it was me, I would just ignore the false positives in the checker and move onto the next thing. It’s great to see the warning, but if it doesn’t apply you shouldn’t have to go through all those steps to fix it.

In the future when WordPress moves everything to the Customizer (no more “Appearance > Widgets”), we’ll be able to flush the cache when widgets are added which will solve this issue.

[William]

Much thanks for your detailed response Tom.

[Tom]

No problem 🙂

[Author]

Posts