FaQ challenge html Css

Community feedback

• 

  P

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @efs0-cod3 👋🏻

  I have some quick tips to help you fix the HTML issues and some accessibility suggestions.

  • First things first, as the error says you cannot have <div> inside <label>., but you can have the opposite. However, in this case since you're putting text inside those <div>s, I suggest replacing them with <p> tags.
  • Next, instead of using <hr>, I'd suggest using border-bottom like this:

  .collapsible {
      display: block;
      margin-bottom: 1rem;
      border-bottom: 1px solid gray;
  }
  

  those will fix the HTML issues, just don't forget to generate a new report once you fix them.

  • What comes to accessibility, these two images should have aria-hidden="true"

  <img class="il-box-mobile" src="images/illustration-woman-online-mobile.svg" aria-hidden="true">
  <img class="il-box" src="images/illustration-box-desktop.svg" aria-hidden="true">
  

  You can read more about aria-hidden here.

  I hope this was helpful 👨🏻‍💻 overall, you did a great job. Nice touch on the animations, well done. Cheers 👾

  12

  Marked as helpful