Html5, Css3, Flexbox, Media.

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi @Gushigustavo,

  Congratulation on completing this challenge Excellent work! I have some suggestions regarding your solution if you don’t mind:

  • You can use the website's name as an alternate text. You may set alt=”Sunnyside" , it’s better to place it in the <nav> as it does navigate the user. The same for the footer’s logo.

  • It’s not recommended to add event listener on non interactive elements.

  • As the button has no discernible name, put an aria-label on your trigger to describe its purpose. For example, you can have: aria-label='Mobile Navigation Trigger' or 'Open Menu.’

  • Add and toggle an aria-expanded attribute to your button letting the user know if the content the button controls is expanded or not. At first, it has the “false” as a value then you use JavaScript to change the value.

  • You should use aria-controls attribute on the toggle element, it should reference the id value of the <ul> element.

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content for example icon-arrowFor decorative images, you set an empty alt to it with an aria-hidden=”true” to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images.

  • Use the<nav > landmark to wrap the footer navigation with aria-label=”secondary “ or aria-label=”footer”. A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. Thenav element in the header could use an aria-label="primary" or aria-label=”main” attribute on it. The reason for this is that, You should add the aria-label for a nav element if you are using the nav more than once on the pag..you can read more in MDN

  • you may use semantic an unordered list <ul>to wrap the social links you put your links within an unordered list structure so that a screen reader will read out how many things are in the list to give visually impaired users the most information possible about the contents of the navigation.

  • The links wrapping the social images must have aria-label or sr-only text indicate where the link will take the user. Then add aria-hidden=”true” to the images that make them be ignored by screen readers to avoid redundancy and repetition.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  Aside these, Great job on this one. Hopefully this feedback helps.

  0