Accessibility Tools

Kara
Kara Vanilla Ice Cream
edited November 2022 in Talk Community #1

Howdy! Just sharing these accessibility tools from "that guy" on our team that does this for our website, etc. in case they're helpful for any of you who are in the same boat trying to apply this stuff to your communities!

Color Contrast Guidelines

Color Contrast Checker

Hover Accessibility Tips:

  • Make sure hover links appear for keyboard users.
  • Don't use hover effects to hide links.
  • Don't use color alone to identify hyperlinks.
  • Write descriptive hyperlink text.

With our testing in staging so far, and unless we're missing something which is entirely possible, it appears Vanilla's new Foundation theme does NOT have link hover underlining built-in (just highlighting/color change and cursor/pointer change from arrow to hand). It's something we may have to have our web design consultant try to add. I'll submit that as a feature request too. (Go like it!)

Cheers to accessibility!

Comments

  • BrendanP
    BrendanP HLV Staff
    #2

    I am no accessibility expert but just to be sure, are you not referring to this setting in the style guide?

    Screen Shot 2022-11-29 at 6.56.34 PM.png

    Link decoration = always so that links are underlined.

    Screen Shot 2022-11-29 at 6.58.04 PM.png


  • Kara
    Kara Vanilla Ice Cream
    #3

    @BrendanP - It's close, but the feature I'm requesting would only underline a hyperlink when hovered-over, not "always".

    Having every single hyperlink underlined all the time includes all shortcuts, leaderboard names, header links....looks very messy.

  • Val
    Val HLV Staff
    #4

    @Kara Our default behaviour is to have links a different colour, and when you hover, the link is underlined.

    Screen Shot 2022-12-06 at 12.18.49.png

    In this example, though my cursor isn't shown, I am hovering over the first link, so it is underlined.

  • Kara
    Kara Vanilla Ice Cream
    edited December 2022 #5

    Hi @Val - I must be missing something. In our staging site where we have the Foundation theme applied, I'm not having this experience. When I hover over a link (discussions, bookmarks, any member names, discussion titles, etc), the text changes color and the cursor changes from an arrow to a hand, but there is no underline.

  • Val
    Val HLV Staff
    edited December 2022 #6

    Oh, I see what you mean!

    Ok, so we've got the behaviour you're looking for in posts, however the links we have in our UI menus don't have the underlining on hover. We'll review that.

    e.g.

    Screen Shot 2022-12-06 at 16.25.16.png
    Screen Shot 2022-12-06 at 16.25.56.png


    Screen Shot 2022-12-06 at 16.12.36.png


Categories