Responsive Huddle page using css flex box

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Add the alt attribute alt=" " to the img tag and give it a value to fix the error issue. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  Add aria-label attribute aria-label=" " to the <a> of the social media icons to fix the error and accessibility issue. The value of the aria-label is the description of the image. For more aria-label click here

  The styling you gave to the body is not needed. There is no need to style the main rather give its styling to the body. The is no need to give the body a max-width and height values.

  The footer tag should be out of the main tag, for the left and right sides space of the page either give the main and footer a width of 80vw and margin: 0 auto or give the main and footer a max-width of 1440px, a width of 80% and margin: 0 auto.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  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/illustration-mockups.svg" class="mockup" alt ="mockup image"> 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.

  • The error message "Links must have discernible text" typically appears when a hyperlink is inserted in a web page or document, but the linked text is not descriptive enough. This means that the text used for the hyperlink is not informative and doesn't provide any context to the user about where the link is leading to.

  To fix this error, you can do the following:

  • Use descriptive text for your hyperlink: Instead of using generic text like "click here" or "read more," use text that clearly describes where the link will take the user. For example, instead of "Click here to learn more about our products," you can use "Learn more about our products."

  • Avoid using long URLs as link text: Long URLs can be confusing and overwhelming for users. Instead, use a shorter version of the URL or hyperlink a keyword that is relevant to the linked page.

  • Test your links: Before publishing your content, make sure to test all your links to ensure they are working correctly and leading to the intended page.

  By following these simple steps, you can make your links more accessible and informative to your users, which will ultimately enhance the user experience of your website or document.

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

  0