Comments (19)
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;
}
from bmrcportal.
Review #14 and #20 after addressing this issue.
from bmrcportal.
For reference here is the Finding Aid mock
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
Please let me know which you'd like to try first.
from bmrcportal.
from bmrcportal.
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.
from bmrcportal.
This change seems more similar to the Wagtail BMRC site. Closing now -- will re-visit after migration to integrate into the existing site.
from bmrcportal.
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
from bmrcportal.
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!!!
from bmrcportal.
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)
from bmrcportal.
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.
from bmrcportal.
Color looks good!
Couple issues with consistency. We may need to think about/get feedback/discuss the issues on the SERP page.
- 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.
- Browse by facet links do not change to green on hover. They do change to dots, so that's good.
- 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?
- 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.
- 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.
from bmrcportal.
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.
from bmrcportal.
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
from bmrcportal.
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.
from bmrcportal.
Related Issues (20)
- container inventory: labels displaying on top of other text HOT 4
- Accessibility: clickable logo in header HOT 1
- Accessibility: social icons HOT 5
- Accessibility: search button (magnifier icon) for WEBSITE HOT 1
- Error message for no site search results points to old link HOT 2
- Accessibility: need alt text for iframe HOT 4
- Accessibility: "Skip to" links not visible HOT 5
- Accessibility: two links in same context, different targets HOT 1
- Accessibility: line height too small in footer HOT 1
- Erroneous results in search
- North Park U name showing up in abbreviated form HOT 6
- Subject headings: identical heading with and without white space in dashes HOT 2
- seeing a lot of "Guide to the" in the SERP collection titles HOT 1
- font size seems very small in Edge browser
- Remove periods at end of subject and corpname terms HOT 1
- text is clipped when re-sized
- Accessibility per UC: need a link in the footer
- display of very detailed "extent" from MARCXML conversions is messy
- "Squished" display of multi-line inventory in finding aid view HOT 1
- Add contact info to Archives data page HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bmrcportal.