Improve accessibility

[natestemen]

Google's Lighthouse tool (available in chrome devtools) can perform automated accessibility (a11y) testing. It found two problems with our index.html:	problem	image
"Background and foreground colors do not have a sufficient contrast ratio" in the newsletter signup button
"Links do not have a discernible name" for the icons we use for socials (in both the navigation menu and footer)

Lighthouse also suggests the following ten things to manually check:

• The page has a logical tab order
• Interactive controls are keyboard focusable
• Interactive elements indicate their purpose and state
• The user's focus is directed to new content added to the page
• User focus is not accidentally trapped in a region
• Custom controls have associated labels
• Custom controls have ARIA roles
• Visual order on the page follows DOM order
• Offscreen content is hidden from assistive technology
• HTML5 landmark elements are used to improve navigation

Fixing the two main errors should be straightforward, but will need to be fixed on many pages since code is duplicated across many files. These kind of problems is presumably why @crazy4pi314 started porting the site to 11ty.[^1]

Some of these require a decent understanding of a11y and the ability to use a screen reader. cc @WrathfulSpatula since you may know of other a11y things to check for/improve.

I think this is an important issue as UF's mission is to create an ecosystem that benefits the most people.

[^1]: Is this something we'd still like to do?

[crazy4pi314]

1000% agree this is pretty critical, and was exactly why I ported the site to 11ty. With the exception of a few of the more recent posts, that new backend addresses most of the user/contributor accessibility issues, and thanks for surfacing the a11y and lighthouse issues that should be even higher priority.

[WrathfulSpatula]

Since I was CCed, I'll just say that 11ty sounds like a good idea to me, too, but I don't have anything to add off the top of my head. But, I'm following the issue ticket, and feel free to ask for my help in implementation, if you'd like.

[natestemen]

With the redesign, it looks like there is only thing that lighthouse has flagged:

Links do not have a discernible name

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more.

cc @joshdavenport

[joshdavenport]

Ah, good spot. On it

[joshdavenport]

Should be better now. As an aside to accessibility but related to Lighthouse/PageSpeed Insights, the performance item around short cache times is something you can't change via GitHub pages but you could adjust by putting Cloudflare in front of pages. Seems like there's a reasonable chance of hitting 100 with that addressed which would be very nice.

[natestemen]

Thanks Josh! Could you clarify, as an end user, how would using cloudflare improve the experience? Faster load times?

I'm going to close this issue for now since it seems the most problematic a11y issues are complete!