Good accessibility usually starts with clear words and the right HTML elements, not a large amount of extra code.
What You Need to Know
Two fields with the same announced name can be hard to distinguish. Include the nearby question or group name, and inspect which source is winning when labels and ARIA both exist.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<label for="student-name">Student name</label>
<input id="student-name" name="student-name">
<label for="club-name">Club name</label>
<input id="club-name" name="club-name">
<p>Each label points to one unique ID.</p>Let’s Read the Code
- name: The name is the key used for the submitted value.
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- <input>: The input is a control. Its type changes the way people enter information.
- for: For connects a label or output with a control by ID.
What the example shows: Unique IDs make label relationships predictable; duplicate labels or conflicting ARIA names can confuse users.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Give both inputs the same ID and inspect which field the labels focus, then fix the problem.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Two controls should not accidentally share the same id.
Key Takeaways
- Two fields with the same announced name can be hard to distinguish.
- name: The name is the key used for the submitted value.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.