Increase link visibility and clickability

[johnjung]

Increase link visibility and clickability

[kzadrozny]

Styling recommendations for visual users as well as ADA compliance:

a {
    color: #2A5DB0;
    outline: 0;
    text-decoration: underline;
}

and

a:hover, a:focus {
    color: #487286;
    outline-offset: 1px;
    text-decoration: underline;
    text-decoration-style: dotted;
}

[johnjung]

Review #14 and #20 after addressing this issue.

[MomoMoses]

For reference here is the Finding Aid mock

[johnjung]

Ok, thanks very much to both of you. I'm going to add these rules, along with a comment so I can return to this when we combine the two sites- I'll want to look at how links behave on bmrc.lib and on the portal because we may want to get the two styles to match at that stage.

[johnjung]

This is now fixed in 6a28cd1 and live on the server. I'm going to close this issue out, please feel free to re-open if necessary.

[MomoMoses]

Existing color of non-clicked links on the BMRC site is: #224e64 which is a very dark blue.
Hover color is currently #777441 which is that olive color.

Sidebar link color is currently: #3d3d3d

New portal link color as suggested by KZ, a bright royal blue: #2A5DB0
Possible color to try that is more related to the lighter accent green on the site: #5c60a5

Could we try this one and test for accessibility? happy to try it without implementing if there is a handy way to do so.

[MomoMoses]

I'd like to re-open and try either the existing matching dark blue that's on the BMRC site (#224e64), OR the lighter blue I found (need to check accessibility contrast level with background) #5c60a5

PS I'm not able to open or close issues.

[johnjung]

Please let me know which you'd like to try first.

[MomoMoses]

let's try the existing BMRC blue

…

On Thu, Dec 2, 2021 at 1:32 PM John Jung ***@***.***> wrote: Please let me know which you'd like to try first. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA263WX4NZIVN5INOCD7WD3UO7CUTANCNFSM5DTGGE5A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[johnjung]

This is now changed in acaf6a5 and live on the site.

Since I'm going to need to re-evaluate link colors as a whole when the portal is integrated into the BMRC Wagtail site, my preference is to let this one be unless the change I just made for you is really egregious.

[MomoMoses]

This change seems more similar to the Wagtail BMRC site. Closing now -- will re-visit after migration to integrate into the existing site.

[MomoMoses]

Styling recommendations for visual users as well as ADA compliance:

a {
    color: #2A5DB0;
    outline: 0;
    text-decoration: underline;
}

and

a:hover, a:focus {
    color: #487286;
    outline-offset: 1px;
    text-decoration: underline;
    text-decoration-style: dotted;
}

I'm not all that keen on this color combination. It may have to do with the green in our BMRC color palette being problematic for visual impairments/non-standard perception of color. I haven't double-checked in the code, but it looks like it's the same as the interlibrary loan page example

[MomoMoses]

Can we try this one instead? the lighter blue I found (need to check accessibility contrast level with background) #5c60a5
sorry for the waffling... it does bug me though. if you like I can spend some quality time with the colors first, using developer tools and try to determine. I can enter it into a contrast checker tool also for a given color combination to make sure it doesn't mess up the accessibility!!!

[MomoMoses]

Here's my determination, though there are so many situations for links, I'll want to make sure this works for all of them!

• Underline links
• Link underline changes to dotted line on hover
• Normal weight (not bold)
• Use blue text color (lighter than current blue = #337494)
• Text changes to green on hover (#676438 - existing dark green)

[johnjung]

I have a version of this change in place on https://bmrc-test.lib.uchicago.edu/. Please take a look when you have a chance and let me know if this change works, or if there are any tweaks I can make.

[MomoMoses]

Color looks good!
Couple issues with consistency. We may need to think about/get feedback/discuss the issues on the SERP page.

1. Home page -- the center content blocks use a blue underline on the title of the element displayed. It does not turn green. At least I don't think so -- the line itself is almost imperceptible. If possible, it should not have a line at all, as a clickable image. As long as the link will be read out in a screen reader, that is. The leftmost content block (curated topic) does NOT have a line.and that seems fine I didn't think we had an underline on these content blocks, because it is so narrow.
2. Browse by facet links do not change to green on hover. They do change to dots, so that's good.
3. On the SERP, the sorting choice still has a "selected" blue rectangle around it in what I believe is the darker blue. Should we make this match?
4. Also on the SERP, the sorting choices text appears in the darker color. They do not change to green on hover, but they do change to dots.
5. Also on the SERP, the pagination numbers appear in the darker color. However, they DO turn to green, and they are dotted. The "Next Page" text is in the darker color as well.

[johnjung]

Hi Laurie,

I updated bmrc-test.lib to reflect these changes- please take a look. One thing you may want to consider is using the new link color for links in the content area of pages or finding aids only, and leaving the finding aid search interface as-is. I do think the main problem with clickability is for content area links, and not necessarily for links like those in the portal search interface.

Please let me know what you think- if you like the new link colors the way they are it's not a problem to push this to production. We can also have a zoom meeting if you want to talk through this a bit.

[MomoMoses]

I left a comment, but don't see it here ... Anyway, what I think you're saying is to just leave points 3, 4, and 5 as is in the darker color. I'm good with that, since it's a very specific function and it looks visually clear with the darker blue and the white contrast. It's also OK because it's not trying to stand out from a dense text block, as are the other links.

I think the link colors look good now!

To confirm, can you please verify that the clickable images in the center of the home page meet our accessibility guidelines? thanks

[johnjung]

I don't see any issues with those clickable images. I updated the other things in the CSS- please take a look when you can and let me know if this works.