Huddle landing page with features block using html and css

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted about 1 month ago

  Hello, I've got a few accessibility notes for you. I hope they're helpful!

  1. The home link wrapping the logo currently has an accessible name of "Image, Huddle logo" which means it is a 2.4.4 Link Purpose (in context) level A failure. To fix that, just make sure the accessible name for the link includes the destination. You can use the image alt for that or add an aria-label saying "Huddle - Home page".
  2. There are various contrast failures in this, but that's the design's fault not yours! In a real job you'd be raising this with the designer and they would need to provide updated colours. But if you did want to correct colours yourself on practice projects, I recommend this tool which allows you to generate colours close to the original that would pass minimum contrast requirements: https://app.contrast-finder.org/?lang=en
  3. I would expect the phone number and email content in the footer to be coded as links. Again, this is really a design issue as they should look like links with an underline. So, this one isn't a failure, it's more of a recommendation to deviate from the design slightly and add those in as underlined links. Optional, of course.
  4. The icons next to the footer contact info definitely do present accessibility problems at the moment. The address and email ones should both have alt, and this alt text should not include the word "icon". The phone one though should be treated as decorative and have empty alt because the word "phone" is already included as visible text next to the icon.
  5. Those footer lists of links should be in a nav element.
  6. Those footer lists of links should be one list, not two. On larger screens you can use CSS column properties to split them over two columns.
  7. On the hero image "illustration image" is not good alt text. That needs rewriting to actually describe the illustration (briefly) and not include the word "image" because it's already an image role.

  0