Typemaster landing page / SASS, BEM, Mobile First

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted about 3 years ago

  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

  0

  ---

  

  Tereza•605

  @sirriahPosted about 3 years ago

  @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.

  0

  

  T

  Grace•30,990

  @grace-snowPosted about 3 years ago

  @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!

  0
• 

  T

  Mike Hayden•1,005

  @mickygingerPosted about 3 years ago

  Hi Tereza, this looks great! 😀

  You can test accessibility by turning on your screen reader (most likely your operating system has one, for MacOS it's called VoiceOver, which you can activate in the system preferences).

  Currently you can focus on the logo link using tab, and the screen reader will say something along the lines of "visited, link, home link" which I think is probably reasonable. You don't need to set tabIndex because the link will accept focus via the tab key by default.

  An alternative option would be to use the aria-label attribute on the link, which would mean you could get rid of the span.sr-only.

  Hopefully that's helpful!

  Marked as helpful

  0

  ---

  

  Tereza•605

  @sirriahPosted about 3 years ago

  @mickyginger I added the tabindex, because I couldn't see the focus on the logo in Firefox. But later I saw that it is visible in Chrome. I don't know why it doesn't work in Firefox :(

  0