Project Preview

Community feedback

• 

  Blueberry Turtle•80

  @AbraCadabstraxPosted over 1 year ago

  Hello, there is a broken link to the code source for your project. Now, this may be my issue as a user or you may have done something like delete the repository or change its name. Either way it makes it hard to provide useful feedback.

  That said, the preview looked pretty good. So, if anything, the end result is ok.

  Marked as helpful

  0

  ---

  

  iamis15•70

  @iamis15Posted over 1 year ago

  @AbraCadabstrax I just realised the repo was set to private. Hopefully it works now. Thanks for the heads up

  0

  

  Blueberry Turtle•80

  @AbraCadabstraxPosted over 1 year ago

  @iamis15 It works!

  0
• 

  Liam Tanfield•260

  @TanDevvPosted over 1 year ago

  Hello, iamis15. Great work on this one! Let's talk about a few things in the accessibility report. :)

  📝HTML:

  • Document should have one main landmark | All page content should be contained by landmarks

  After your body tag, consider adding landmarks such as, <nav>, <main> and <footer> as a parent to the corresponding content (such as your div with the id=root) where it makes sense. This helps keep your HTML organized and accessible for users using screen-readers, so a win-win for everybody.

  (For more information on what is semantic markup, you can read this article by MDN)

  • Heading levels should only increase by one

  Ensure all your headings <h1> to <h6> are in a logical order. Try to always start from <h1>, followed by <h2> and so on.

  This is good practice for not only general organization of your page but importantly for users of screen reading software as they may want to jump from different headings to quickly determine the content of the page.

  Not doing so may create confusion, as the user navigating this way may be left wondering where the missing heading is!

  (For more information regarding Headings and how to write them, you can read this article also by MDN)

  • Images must have alternate text

  Ensure all your <img> elements have short, descriptive alternate text such as, <alt="drawing of a cat"> as it is incredibly useful for accessibility; screen readers will read your alt description out to their users so they know what the image means.

  Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking or links expiring.

  For other elements such as icons or images that are purely decorative that hold no meaningful content, you can give it an empty <alt> description so screen-readers will ignore it!

  (For more information regarding <alt>, you can read this article also by MDN)

  PS: Your repository link seems to be coming up as Page Not Found, is your repository set as public? :)

  I hope you find this information helpful. Above all, your solution is great, well done! 😄

  0
• 

  Finney•3,030

  @Finney06Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  Here are some suggestions regarding your code that may be of interest to you.

  HTML 🏷️:

  To clear the Accessibility report:

  • Images should have alternate text. <img src="images/icon-memory.svg" alt="memory icon"> this provides alternative text descriptions of images for people who are visually impaired and rely on screen readers to navigate the web. Screen readers can read the alt text aloud, enabling these users to understand what the image represents and how it relates to the content on the page. Overall, including alt text in HTML is an important best practice for creating accessible and user-friendly web content.
  • Wrap the page's whole main content in the <main> tag.
  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

  I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

  0