Skilled E-learning Landing Page

Community feedback

• 

  T

  Grace•31,530

  @grace-snowPosted 6 days ago

  Nice solution!

  A few things I spotted that should be fixed though:

  • The logo image alt says "Logo Skilled, to homepage" which doesn't make sense. It should just say "Skilled" or "Skilled (logo)". It's not a link, it's just an image of a logo and must begin with the text shown / name of site.
  • The hover styles on the buttons are failing minimum contrast ratios. They need to remain readable (4:5 colour contrast ratio).
  • I don't think that hero image is decorative. It looks like important content, especially as it includes some relevant text. Update the alt.
  • The repeating "Get started" links need more context for screen reader users. They would currently fail WCAG 2.2.4 Link purpose (in context), level A, because they don't describe their destination when someone browses links on the page. To fix, add in relevant sr-only (visually hidden) text inside the link. For example: <a href="#">Get started<span class="sr-only"> - Animation</span></a>.

  Marked as helpful

  1

  ---

  

  P

  Øystein Håberg•11,380

  @Islandstone89Posted 5 days ago

  @grace-snow Thanks for the feedback, much appreciated!

  • The reason I had "Logo Skilled, to homepage" was that I just read this article from a web accessibility specialist . You're right that it's just a logo, so I changed the alt text to "Skilled(logo)".

  • I did wonder about the hover styles having poor contrast. I dislike when the challenges have poor contrast in their design! I had to change the color of "Get Started" in the cards because it had poor contrast. I have adjusted the opacity, and made the saturated blue applied on hovering the header button slightly darker. DevTools says it has a ratio of 6.98, so at least that one should be good to go!

  • I missed the text in the hero image, alt text is added.

  • Great point about "Get Started" being vague - I have added additional text, wrapped in a visually-hidden utility class.

  1