CODEWITHSUNDEEP
htmlcssaccessibility
Cleber F. Sant'ana
Cleber F. Sant'ana

Reputation: 179

Is it ok to use <label> in other nesting level than its <input> control layout?

I want to know if the following HTML/CSS is wrong by any means, mainly from accessibility point of view.

I have two set of instructions A and B. The user only sees one of them at a time. When the user sees instructions A, there should be a link to B, and vice-versa. I thought on using <radio> buttons and their :checked state to control the visibility of the content, and then the <label> could be inside that content, acting as the link. Since labels can be clicked to activate its corresponding radio button, I setup the code like this:

label {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.a,.b {
  display:none;
}

#a:checked ~ .content .a,
#b:checked ~ .content .b {
  display: block;
}
<input type="radio" name="options" value="a" id="a" checked>
<input type="radio" name="options" value="b" id="b">

<div class="content">
  <div class="a">
    Some text and <label for="b">Check out B</label>
  </div>
  <div class="b">
    Some other text and <label for="a">Check out A</label>
  </div>
</div>

Since this seems very hackish, I thought you could point out any potential problems this code could lead into.

Upvotes: 5

Views: 86

Answers (2)

Adam
Adam

Reputation: 18807

This is not accessible as it would require to click an item in order to view its description.

This won't work with a screenreader.

The screenreader will want to find the text alternative for both elements at the same time, and the description being invisible, one will always be without a text alternative.

Upvotes: 1

reginald
reginald

Reputation: 341

I didn't find any particular constraint concerning the HTML label tag, that would prevent you to do what you have done. The only constraint that is stated on W3S HTML label tag page is that its « for attribute must be equal to the id attribute of the related element to bind them together. »

And you observed it. So there should not be any problem.

Upvotes: 1

Related Questions