Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] text-decoration: none Accessibility Problems

Home Forums Support text-decoration: none Accessibility Problems

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #491764
    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!

    GP Premium 1.5.6
    #491818
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #495577
    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

    #495810
    Tom
    Lead Developer
    Lead Developer

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

    Thanks!

    #497731
    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!

    #497858
    Tom
    Lead Developer
    Lead Developer

    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.

    #502402
    William

    Much thanks for your detailed response Tom.

    #502487
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.