Insure Landing Page with CSS Flexbox and CSS Grid

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Stefan,

  First of all, Congratulation on completing this challenge and awesome work on this one. I have few suggestions regarding your solution:

  Navigation:

  • Don't capitalize in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalized text as they will often read them letter by letter thinking they are acronyms.

  • Element div not allowed as child of element ul in this context.

  • The element button must not appear as a descendant of the a element.

  • It’s not recommended to add event listener on non-interactive elements close and open menu. You can use a <button> with type=”button”.

  • The button needs to have an aria-label attributeor an sr-only text that describes the button purpose. For example, you can have: aria-label='Mobile Navigation Trigger' or 'Open Menu.’

  • Adding aria-expanded that, the user will be able to know that the button content is expanded or collapsed. 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.

  • The toggle element is added outside the nav, it would be better to be placed within the <nav> element. As it is, assistive technology user won’t announce the button related to the <nav>. And this is confusing and not good for the user.

  Ensures landmarks are unique

  • 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. The nav 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 thearia-labelfor a nav element if you are using the nav more than once on the page. This will make it unique.you can read more in MDN

  • The social links wrapping the svgs must have aria-label or sr-only text indicate where the link will take the user. Then you set aria-hidden =”true” and focusable=”false” to the svgs to be ignored by assistive technology.

  <svg aria-hidden="true" focusable="false">
  ...
  </svg>
  

  • Never use <div> and <span>alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. By adding semantic tags to your document, you provide additional information about the document, which aids in communication.

  You can use a header for class="footer-grid-item-heading" instead of <span>.

  hopefully this feedback helps.

  0