Hello
To make this fully accessible you need to
- change the sr-only text to say the name of the site and the link destination. Like “Typemaster - Home”. It would be best to keep the sr only method and not use aria-label as aria label is not translatable. It’s also worth noting never write the word “link” as label text inside a link element as it is already announced as a link.
- you should really remove that tabindex. Take a look in devtools while tabbing in Firefox to try to work out why it’s not showing up without tabindex. It could be a conflict somewhere else that needs fixing, or you might just need outline offset or another css property.
- change those buttons to anchor tags. Pre-order now wouldn’t perform an action, it would take people to a form to order
- remove some of the alt descriptions. On mobile my phone read out 3 descriptions of images that were quite tedious and one of the images was barely in view and had an orange overlay. That’s decorative imo
All that said, you’ve done a great job on this by the looks of it, well done 👍
Marked as helpful
@sirriah
Posted
@grace-snow Hello, I know, that is a long time, but I found the answer about the tabbing in Firefox now. It happened, because I didn't have the right setting in the System preferences on my Mac. I had the default setting :(. You can read about this on StackOverflow.
@sirriah thanks for the link. Once again, mac makes it harder for assistive tech users 🤦🏻♀️
I'm glad you got it sorted! I don't remember having to turn tab focus on my mac, but have done it as soon as I got it and just forgotten. I know in safari you have to intentionally turn it on, and even then behaviour is strange sometimes.
I'm glad you got to the bottom of it, well done!
