add aria-label to the footer link for GI for screen readers

GenderedIntelligence / the-trans-dimension

The Trans Dimension is an online community hub connecting trans communities in London.

http://transdimension.uk

Other

3 stars 1 forks source link

add aria-label to the footer link for GI for screen readers #341

Closed aaaaargZombies closed 1 year ago

aaaaargZombies commented 1 year ago

Fixes #340

Description

add text content to the a tag as it only has a background image set.
the text is set to be transparent so as not to create visual regression, I hope this is sufficient.

for the confusing diffs I'm exporting transparent on Global.elm:1 and rgba on Global.elm:4

cloudflare-pages[bot] commented 1 year ago

Deploying with Cloudflare Pages

Latest commit:	`872ccf5`
Status:	✅ Deploy successful!
Preview URL:	https://0c46a8d2.transdimension.pages.dev
Branch Preview URL:	https://340-gi-logo-link-text.transdimension.pages.dev

View logs

ivan-kocienski-gfsc commented 1 year ago

Hmm could this be done by putting the text into a span tag and setting display: none? i think that is the done thing in these situations. According to this random blog i found we should be using aria labels, so that may be worth trying out. (i think we use aria stuff elsewhere in the code that may provide a template solution)

aaaaargZombies commented 1 year ago

playing around with the accessibility dev tools and reading that article it seems that for links at least aria-label is the way to go

I also found this which is a good example of it in action https://daverupert.com/2021/01/art-direction-for-static-sites/

katjam commented 1 year ago

Absolute position off-screen https://webaim.org/techniques/css/invisiblecontent/#techniques

aria-label https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

depending on your use case.