Workit landing page

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  ANCHOR ELEMENT 🔴:

  • The <a> elements lacks aria-label attribute which is way more important for social links in an <a> tag can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.

  ---

  • When a screen reader encounters an anchor tag with a social link, it may announce the link's text content, such as "Facebook" or "Twitter," by including an aria-label attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.

  ---

  • By providing this additional information, you can help users with visual impairments to better understand the purpose and value of social links, and encourage them to engage with your content. This can ultimately improve the user experience on your website, and make it more accessible and inclusive for all users.

  ---

  • Example:

  <a href="#" aria-label="Facebook profile of Workit">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">   
     </svg>
  </a>
  

  ---

  • If you have any questions or need further clarification, you can always check out my submission for another challenge and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 1 year ago

  Hi

  Really focus in on HTML. Its extremely important to think through element choice and structure very carefully. The content should make sense just reading the markup

  1. Unless this site is called "logo" and that's the text of that image, you can't have that as alt text
  2. This has ONE h1, not two
  3. Is the phone image meaningful content? That description certainly doesn't make me picture it in my head or think it is important content so it should probably be treated as decorative and have an empty alt value
  4. Clicking "learn more" would navigate somewhere. That means it needs to be an anchor element. Buttons are not for navigation
  5. Sections must have headings at the start. They act just like divs unless labelled but even if not labelled they should only be used to wrap a distinct chunk of content that would have a heading eg h2
  6. Headings must go in order. If you added a visually hidden heading to the features section your other headings below it could stay as h3s. But without that visually hidden heading above, they would need to be h2s
  7. Text should never be in divs or spans alone - even those numbers. I would be tempted to use an ordered list for those 3 numbered items so that I could use the counter of the listitem. Or just place the numbers in paragraph elements
  8. Only use a picture element when you need to change the source for different screen sizes/resolutions. Otherwise an img element can be on its own
  9. Alt text should never include words like "image" or "picture". It's already an image element! Alt should describe the image, at least with the person's name but preferably a richer description of what he looks like
  10. Again, "apply for access" would not be a button. It would trigger navigation
  11. If you are going to inline an svg logo like that you must make sure it has an accessible name. That's quite hard to do reliably with an svg but you could read more about it on Smashing Magazine
  12. Usually logos are also wrapped in anchor elements that go to the home page, so that is worth considering. If you do that, you would usually aria-hide the svg and add visually hidden text inside the anchor as well eg "name of site/logo-text - Home"
  13. This is the same method you must use for those social links. At the moment they are totally inaccessible as you have not included an accessible name in those links. That is a major problem.

  0

  ---

  

  Ossy•250

  @ossycodePosted over 1 year ago

  @grace-snow Thanks for the feedback, I have implemented most of them. The number 12 and 13 are a bit unclear. Thanks for your time!

  0