Learn accessibility by building a quiz - Lesson 16

[[ SOLVED ]]

The instructions:

Every region role requires a visible label, which should be referenced by the aria-labelledby attribute.

To the section elements, give the following aria-labelledby attributes:

  • student-info
  • html-questions
  • css-questions

Then, within each section element, nest one h2 element with an id matching the corresponding aria-labelledby attribute. Give each h2 suitable text content.

This is crazy. The error thrown is about a line that was correct in the previous lesson (and I didn’t change it):

" You should give the first section element an aria-labelledby attribute of student-info "

My code:

      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
          <section role="region" aria-labeledby="student-info">
              <h2 id="student-info">Student Info</h2>
          </section>
          <section role="region" aria-labeledby="html-questions">
              <h2 id="html-questions">HTML Questions</h2>
          </section>
          <section role="region" aria-labeledby="css-questions">
              <h2 id="css-questions">CSS Questions</h2>
          </section>
      </form>

I can’t see the mistake. Help, please.

Shit, I found the problem: “labeledby” :sweat_smile:

1 Like