Homepage Design with Grid

Community feedback

• 

  T

  Grace•31,030

  @grace-snowPosted about 1 month ago

  So the biggest part of this challenge is all around accessibility. Really that means the html needs to be right. This needs some more work I'm afraid.

  Note I am away from Computer so all feedback is based off reading the code (I've not been able to test as thoroughly as usual).

  • the header is not treated as a landmark if its placed inside another (main). It needs to be outside of that.
  • is this site called "logo"? Because that's what you've called it with the logo alt.
  • you can't have a click listener on a div. Not ever ever ever! It must be a button in this case.
  • usually a mobile nav toggle would need to be the first element inside a nav landmark. Think about the focus order. As soon as that list is revealed the next tab needs to move into the nav list. You shouldn't have to tab backwards to reach it which is what I expect happens now.
  • unless you're treating the nav as a modal dialog I would expect the button to need an aria-expanded as with any disclosure pattern.
  • this mobile nav should also close on click of escape.
  • look up how and when to write alt text on images. There are some great posts about this in the resources channel on discord. Alt text must never say "image" as its already on an element with an image role.
  • think about the structure of the content on the page. This page needs a visually-hidden (sr-only) h1. The featured article title is definitely not the main heading for all content on this page so makes no sense as a h1. In fact I'd expect all article titles on this design to be h3s, each with a h2 above them for the section. For example the h1 might be "all news home", then the h2s might be "featured article", "New" and "Most popular", then the h3s are the article names.
  • read more would navigate to the article so should be a link and not a button.
  • how would anyone access any of the other articles when you've not included links inside the headings??
  • use grid for the main layout (once you've moved the header outside of main). The featured article and new section don't make any sense as one section element in code.
  • using h4 and h5 for the popular articles doesn't make sense. Those heading levels mean they all belong to the h3 that's above them, which they don't. The numbers indicate these articles should be listed inside an ordered list. The numbers aren't headings. If anything, they should be aria-hidden paragraphs. As with the other articles the names of them should be headings with links inside.

  Overall just try to go through this really carefully with a keyboard and screenreader, consider how the content needs to be structured.

  1