website
website copied to clipboard
tdwg
Accessibility
One thing we have perhaps ignored in the past is the accessibility of our website. https://fae.disability.illinois.edu/ or similar tools should be used sooner than later in some of our design choices (e.g., accessibility of tables vs. cards; alt text for images). We have been aware of the color contrast issues, but more easily forget the inclusion of those needing screen readers or other accommodations to navigate our website.
Use the tool to evaluate https://tdwg.github.io/website-jekyll/community/ (proposed new page) vs. existing page https://www.tdwg.org/community/ --for me, the existing page would not even process.
TL;DR
The University of Illinois has had a long history in advocating for accessibility since the inception of the web and on campus accommodations to enable access to physical facilities. The tool above is one of the products of this ongoing work. Further resources are found https://www.dhs.state.il.us/page.aspx?item=36441.
I'll run a couple tests by weeks end and post a to-do list if I find anything.
Test Results using WAVE (https://webaim.org/)
Global The HTML tag needs a lang attribute. h3 subheaders More stylistic than accessible, but I suggest adding additional vertical spacing between p and h3 tags (margin-top: 2rem to h3 or p + h3
Footer (Global) The social links at the bottom don't contain any text, just font awesome icons.
Standards Page The image attribution link fails all contrast tests.
Community Its hard to test this, but I have a hard time reading the subheader with the image background. If you use a less 'noisy' background image, that should fix it.
Conference Peter, check out this gradient for the header.bg-image:before linear-gradient(#043b58, rgba(0,0,0,0.6)); I think it keeps the gradient overlay while making it easier to read the text. (Nice work on the linear gradient with the before pseudo-class. Now you've really made me feel a bit silly regarding my previous comments!)
https://tdwg.github.io/website-jekyll/conferences/2022/local-info/ Inconsistent usage of normal and bold font weights for links
All text, except for those referenced above, passes accessibility testing.
Ok, starting a todo list:
- [ ] The HTML tag needs a lang attribute. Fix in petridish
- [ ] Adding more vertical spacing between p and h3 tags. Fix in petridish, controversial, because affecting multiple sites
- [ ] Add text to Font Awesome icons. Fix in petridish
- [x] Change color of attribution link. ~~Fix in petridish, but keep muted to not draw too much attention.~~ Fixed by next item. Not needed to fix in Petridish because gradients are reversed there (darker below)
- [x] Try gradient
linear-gradient(#043b58, rgba(0,0,0,0.6));on background image. Fix in TDWG theme See https://github.com/tdwg/petridish/commit/f57beceddfe90a2a81860056af658f0efdb6d9be
https://tdwg.github.io/website-jekyll/news/ Missing Alt text for second and third news images
@ben-norton I'm not sure what to set as alt text for the images, since the images are chosen by the user. Something generic like background-image seems rather pointless.
Can you require that they enter something or can you populate it with the title?
Title is not always related to the image (and it is listed right below it on the card anyway). Some backgrounds have the creator, but again, not required. Can't force to populate this with something meaningful. It mainly serves as a background image.
It's required to pass accessibility testing. You're right, it doesn't make any sense in this context. I'm usually in a situation where a site must pass accessibility tests or we risk being sued. The decision making process changes. Here, given the limitations, I think we're good.
@ben-norton and @peterdesmet the background photos should always give credit and source--most of what we use is from unsplash.com. It is easy enough to say something like "background image depicting closeup of elephant's eye; image has no inherent meaning to content." People using screen readers mainly want to know what's there and if it is something they need to know.
@ben-norton you mention that the links https://tdwg.github.io/website-jekyll/conferences/2022/local-info/ are inconsistently bolded. Is this an accessibility issue? I see one section (Sightseeing) where the links after the bullets are not in bold, where perhaps they should have been to be consistent with place names elsewhere. I can correct this, but was it flagged? There were reasons that some things were bolded and others not as links, but this section clearly could have been.
background photos should always give credit and source
Not "always", not if not required by the license. For Unsplash photos it is "appreciated" (see license) and the TDWG theme allows to do so, so that is covered.
background image depicting closeup of elephant's eye; image has no inherent meaning to content.
The "closeup of elephant's eye" part then requires creators of pages to provide that information. That seems overkill and we can't guarantee they will do it or that it remains in sync if it changes. I therefore suggest to use the fixed value Background image.
Background alt fixed in https://github.com/peterdesmet/petridish/commit/39ee711527274aaa69c338068c46c2e4cba8fba3