Interactive rating component

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted almost 2 years ago

  Hi.

  Nice try on this one.

  You're getting warnings in the accessibility report because your solution lacks semantic elements.

  These help screen readers know more about what each part of the page is about.

  One thing you could do is use a <header> tag here inside of a <div>.

  Your code:

  <div class="header">
          <div class="icon__star">
            <svg
              class="icon"
              width="17"
              height="16"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
                fill="#FC7614"
              />
            </svg>
          </div>
          <h1 class="heading-primary">How did we do?</h1>
  </div>
  

  Code using the <header> semantic element:

  <header class="header"> // <- Replaced div with header tag
          <div class="icon__star">
            <svg
              class="icon"
              width="17"
              height="16"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
                fill="#FC7614"
              />
            </svg>
          </div>
          <h1 class="heading-primary">How did we do?</h1>
  </header>
  

  There are a couple of other semantic elements you could use, so be sure to check out the link at the top of this comment for more information.

  Hope this helps.

  Good luck with your other solutions.

  Marked as helpful

  0