Accessibility

[50Wliu]

Throwing everything in here for now so we can keep track of it. These work items are generated primarily from Lighthouse.

AA contrast requires a 4.5:1 ratio.

General

• [x] All btn-primary and btn-success buttons fail AA contrast: 3.98; 3.13
• [x] All links fail AA contrast: 3.98
• [x] "Back" and "GitHub" icons need alt descriptions and link names (but hopefully we can just :fire: them)

Navbar

• [x] All the gray links (e.g. Upload, About) fail AA contrast: 4.22
• [x] "Search" button fails AA contrast: 3.67
• [x] "Search" input is missing a label (probably make it screen reader-only?)

Landing

• [x] All hints fail AA contrast: 4.45

About

• [x] All images need alt descriptions

Upload

• [x] "No file is selected" text is cut off (at least when it's in Spanish)

@mengsarah would you mind adding in the stuff you're working on?

[mengsarah]

Excellent, I was wondering where I could dump my progress notes so far lol and that list in the first post is very handy, thank you

Unless otherwise noted, these (as well as some other general UI stuff not listed) are done in the branch currently named UI-improvement (feeling an itch to rename that):

• alt for images, but I haven't run around to all of the pages to add alt="GitHub icon" yet--also, see long addition below
• style.css:
  • updated colors to be at least AA compliant (only looked at the colors used when logged in so far)
  • better link and interactive element discoverability:
  • links (<a>) are now bold
  • added general focus style and, since it doesn't work on the text fields, a style specifically for those
• switched breakpoint in navbar to lg instead of md, partly because of new browse button and partly because there was some horizontal scrolling even without the browse button

---

I've seen a few different things for alt text for headshots on pages like our About page. Based on what I've read, I gather that the following two methods are generally acceptable for profile pics on team pages:

• alt="" because they don't add additional information, assuming the pictures are just your average headshots (source; search "for example, profile"--it's a little more than halfway down the page)
• making the alt text a description of the human (possibly provided by the humans themselves) in order to humanize the team the same way they're humanized for people who can view the images (source with examples)

For now, since it's minor compared to other stuff, I've added some alt text for the anonymous and hamster images and left alt="" for those of us who did add personal images.

[50Wliu]

Re: headshots, alt="" seems like a loophole, while a description seems a little overboard. What if we just used the name of the person as the alt?

[mengsarah]

I feel the same way.

Since our headshots are followed directly by our names, using the name alone would be duplicating information with no additional value. Maybe we can just do alt="Headshot of name"

[50Wliu]

Maybe we can just do alt="Headshot of name"

:+1:

[mengsarah]

Think I just got everything in the first post done!