alvarlagerlof/neurodiversity

Card links are not accessible

alvarlagerlof opened this issue · 4 comments

alvarlagerlof commented

So I've recently read that if a link does not immediately have a text tag inside of it it's not going to sound right in screen readers.

Currently, the links on the start page pointing to subpages using LinkGrid.Item contain a h3 and a p.

The a should probably be inside the h3 according to this. This presents an issue.

We want the whole card to be clickable, but we want the link around the title. I've read an article saying that the correct way ro approach this to capture clicks on the card, and then trigger a click on the link. Then you solve both issues.

sabinevidal commented

Hi @alvarlagerlof ! I'm happy to have a look at this issue! Have been doing reading on best accessibility practices on the web recently - so quite keen to put that into practice.

alvarlagerlof commented

@sabinevidal I've assigned you to this issue now!

  • 🎉1
sabinevidal commented

@alvarlagerlof
I've come up with 2 solutions, both require JS. I'm not as experienced with frontend implementations, so would be curios to hear your thoughts? Will link the 2 branches here.

Used these sources:
https://inclusive-components.design/cards/
https://codepen.io/joelstrohmeier/pen/bGEMpmz?__cf_chl_captcha_tk__=pmd_38LuynOm4.apQU8E7WXwIrcdCb1FGwZ4B37YquJLEro-1634978047-0-gqNtZGzNAzujcnBszQdR
https://www.webaxe.org/resources-for-developing-accessible-cards-tiles/

alvarlagerlof commented

I ended up fixing this now