1

It is considered best-practice for label elements in HTML to use the for attribute to bind to an input element:

<div>
  <label for="myinput">My Input Label</label>
  <input id="myinput" type="text" />
</div>

Instead of

<label>
  My input Label
  <input type="text" />
</label

Due to accessibility & screen readers understanding the prior example better

Relevant 1

Relevant 2

However, Ids must (should) be unique for the entire document in html specification Relevant

Lets assume I want to make a form render on two different parts of my website. This means I cannot use the for attribute on the label because it requires an id to work correctly. How should I structure a form so that it can be duplicated in the document and still be understood by accessibility readers?

I am aware I could process the Ids on the label/input to guarantee they are unique. I am wondering if there is a solution that:

  1. Plays nice with screen readers
  2. Does not require for attribute on the label
Community
  • 1
  • 1
Nathan Lafferty
  • 1,988
  • 1
  • 15
  • 17
  • This isn't just relevant for `label` and accessibility readers, but anything with an id. Javascript assumes ID to be unique for example. Not that I know anything about your form, but I'd be questioning the need to duplicate it from a UX perspective. Are you going code the duplicate or is it going to be duplicated programmatically either server or client side. I'm assuming this is all on the one page or that it is a single page app. – Jon P Mar 29 '17 at 00:50
  • Right -- I understand Ids should be unique. The form in question, let's say its a "Contact Me" form where one is in a modal and one is on the footer of a landing page. I could programatically define the Ids (preprocessed on the server or during a rendering step on the client itself). My question, I suppose, is asking how I might avoid doing just that, and if there are any alternatives that play nice with accessibility readers. – Nathan Lafferty Mar 29 '17 at 01:01
  • This is not an accessibility issue, at least not at first. It is a parsing issue. You need unique `id` attributes, no matter what. If you define / generate the `id` values on the fly then just apply the same code to define / generate the `for` attribute for the corresponding ` – aardrian Mar 29 '17 at 01:11

1 Answers1

2

Unless you are supporting older screen reader / browser combinations you can wrap the label text and the field in one <label>. The examples referenced in the WCAG document you linked are 10 versions or more old, and the IE bug that did not honor wrapped <label>s went away in IE7 (I think, maybe earlier).

Be aware that there are potential styling differences depending on how you write your CSS as well as potential event bubbling issues depending on how you write your JS. But for pure HTML this is fine.

Remember that screen readers are not the only tools the benefit from the <label> element. Users with motor impairments benefit from the larger overall hit area. Users with low vision or cognitive impairments can benefit from browser default focus styles. On top of this, not all screen reader users are blind, so you want to make sure the experience for sighted users is analogous for those using screen readers.

So these should work for you (without knowing anything about the technology profile of your users):

<label>
 First Name:
 <input type="text">
</label>

and

<label>
 <input type="checkbox">
 Yes, please spam me.
</label>
aardrian
  • 8,581
  • 30
  • 40