Learn Accessibility by Building a Quiz - Step 41

Hi,
I was just wondering why the code has 2 different elements having the same iD.
It’s not relevant to my progression, however was just wondering. The first line has “h2” with the id of “css-questions”. Also “textarea” element near the end also has id set as “css-questions.”

      <h2 id="css-questions">CSS</h2>
      <div class="formrow">
        <div class="question-block">
          <label for="customer">Are you a frontend developer?</label>
        </div>
        <div class="answer">
          <select name="customer" id="customer" required>
            <option value="">Select an option</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
          </select>
        </div>
        <div class="question-block">
          <label for="css-questions">Do you have any questions:</label>
        </div>
        <div class="answer">
          <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
        </div>
      </div>
    </section>

  </form>

Go

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 41

Link to the challenge:

Does seem a little odd :confused:

I cant find the ID ‘css-questions’ being used in the CSS.
However targeting the ID with a red background does target both.

well spotted :smiley:

1 Like

Duplicate id attribute: The <h2 tag has an id attribute with the value “css-questions”, and later, a <label element also has a for attribute with the same value (“css-questions”). The id and for values must be unique in the HTML document. Make sure the values are unique or change one of them to avoid conflicts.

2 Likes

@tashinmolla2014 This is a good catch. Sometimes duplicate ids don’t have any impact on accessibility and can basically be ignored. But in this case, since the label for the textarea has a for attribute set to css-questions then there is an ambiguity as to which element it is providing the label for since two elements have this id. This will affect assistive tech such as screen readers. And I have confirmed that both the NVDA and JAWS screen readers do not announce the label for the textarea because of this issue.

Do you feel comfortable opening a github issue for this?

1 Like

Thanks for the clarification, appreciate it.
I have never opened a github issue post but this looks like a great time to learn how to. Will try to! :smiley:

3 Likes

@tashinmolla2014 Just a quick update on this.

I forgot that I already opened a github issue on this just over a year ago. Unfortunately, it just hasn’t been fixed yet. Maybe I’ll make the time to do that.

1 Like

Hey no worries, I was completely caught between working/coding that I didn’t have the time to do it myself yet. Thanks for the update tough !:smiley:

1 Like