Activity Dashboard with Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop layout looks really great, the site is responsive as well and I like that layout when you go tablet size, looks really nice to be honest. Mobile state looks great as well.

  Here are some suggestions for the site:

  • For this one, you should replace the article tag into using main tag since a main tag is needed for a page so that it will be easy for user to know the main-content since they could just traverse the landmark.
  • Inside the .grid selector, you could change each section to just div. section tag is not that informative as landmark element unless you use aria-labelledby on it so that screen-reader will read an extra information about the landmark. div would be fine since traversing by the heading tag is the same when you just use a plain section tag.
  • I noticed that each of the .card selector has a small height, you can see that if you hover when inspecting the layout. For this one, the height is not really needed on each .card. What you can do is that, each icon on the top part of the .card could just be used as background-image for each .card selector, this way you could just add a padding-top on it to simulate the dark-ish container below it to be pushed below.
  • If you insist on using img tag, then use alt="" and add aria-hidden="true" on it since it is only a decorative image.
  • Since you used button on the 3 dots, you should have either aria-label attribute or sr-only text inside it which defines what the button does.
  • The 3 dots img is decorative as well, hide it using the method above.
  • Do not remove the outline styling. If you did, always include a visual-indicator on the :focus-visible for those interactive elements like the button a tag and others.
  • Since you are using a button tag on this one, you could use a ul tag to wrap those button since those are "list" of selections.
  • Also, since button alone is not informative specially when a user toggles it using a screen-reader, you should have used either an aria-live element that will announce whether a specific button has been toggled. Another approach would be to use something like aria-pressed on each button, you set the attribute to true if a button is pressed and for others as well.
  • Lastly, the .attribution should be using a footer tag so that it will be its own landmark element.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Dragosh Gheceanu•140

  @dragoshcodePosted almost 3 years ago

  @pikapikamart Thanks a lot, that's kind of a professional feedback!

  1