Select elements must have an accessible name

Critical4.1.21.3.1AXE · select-nameDocs

Pages 6on W3C BAD Demo

Elements 7

Open 158d 23hsince 24.04.26

First seen 24.04.26

Last seen 08.09.26

Every <select> element must have an associated label.

Scanner evidence

Engine: axeRule: select-nameWCAG: 4.1.2, 1.3.1

Ensure select element has an accessible name

How to fix

Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

Affected pages (6)

Affected elements (7)

https://www.w3.org/WAI/demos/bad/before/survey.html2

```
<select onchange="location.href = this.value;">
```
select[onchange="location.href = this.value;"]
on https://www.w3.org/WAI/demos/bad/before/survey.html
```
<select name="cc">
```
select[name="cc"]
on https://www.w3.org/WAI/demos/bad/before/survey.html

https://www.w3.org/WAI/demos/bad/before/news.html1

```
<select onchange="location.href = this.value;">
```
select
on https://www.w3.org/WAI/demos/bad/before/news.html

https://www.w3.org/WAI/demos/bad/before/annotated/home.html1

```
<select onchange="location.href = this.value;">
```
select
on https://www.w3.org/WAI/demos/bad/before/annotated/home.html

https://www.w3.org/WAI/demos/bad/before/tickets.html1

```
<select onchange="location.href = this.value;">
```
select
on https://www.w3.org/WAI/demos/bad/before/tickets.html

https://www.w3.org/WAI/demos/bad/before/template.html1

```
<select onchange="location.href = this.value;">
```
select
on https://www.w3.org/WAI/demos/bad/before/template.html

https://www.w3.org/WAI/demos/bad/before/home.html1

```
<select onchange="location.href = this.value;">
```
select
on https://www.w3.org/WAI/demos/bad/before/home.html

Why this matters

Every <select> needs an associated <label> or aria-label.

WCAG Technique H44

AI guidance

Remediation suggestions generated by AI. Review before applying.

Why this matters: Screen reader users cannot identify the purpose of the select element without an accessible name, preventing them from understanding what choice they're making.

Before

<select>
  <option>Choose an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

After

<label for="my-select">Select a category:</label>
<select id="my-select">
  <option>Choose an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Notes: The <label> element with a for attribute that matches the select's id is the most semantic and robust solution. This associates the label programmatically and also expands the clickable area for mouse users. If a visible label isn't possible, use aria-label="Select a category" as an alternative (WCAG 4.1.2 Accessible Name, Computation and Properties).

Activity (0)

No activity yet.