Solution for project-tracking-intro-component with css/html/js

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is responsive and the mobile state looks really great.

  The markup looks great as well. Some suggestions would be:

  • Website-logo link should use a proper aria-label. Use a value where the link would take the user like aria-label="homepage" and not describing the img.
  • The website-logo img could use a more suitable alt value since a website logo is a meaningful element, since it is hard to tell on this one the name of the website, you could make use of project tracking for now as a value.
  • There are extra li tag on the list of links, you should not include the small-circle and the horizontal divider, you should have used them as a ::before or ::after because by using li on them, users will be confused because there are extra list item on the ul.
  • When using alt attribute, avoid using words that relates to "graphic" such as "illustration" and others. An img is already an image/graphic so no need to describe it as one. Referring to the hero-section image.
  • Text after the h1 could use just a p tag rather than heading tag.

  MOBILE

  • The hamburger button will be using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • img inside button could use extra aria-hidden="true".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button and vice-versa.
  • There should only be 1 toggle button for the dropdown and not 2 in here, this will just make it confusing since you are not using the previous one to remove the dropdown.

  Aside from those, great work again on this one

  Marked as helpful

  1

  ---

  

  Yousef Khalid•580

  @YousefKhalid-iqPosted about 3 years ago

  @pikamart Thank you so much for this detailed feedback, I'll get on the things you pointed above!

  1
• 

  Zayat•310

  @Z-ayatPosted about 3 years ago

  Can’t find out the web view from mobile but great work ❤️ Keep it going

  1

  ---

  

  Yousef Khalid•580

  @YousefKhalid-iqPosted about 3 years ago

  @Z-ayat Thanks ❤

  0