I'm learning about accessibility in HTML and I came across an example of a Select dropdown HTML element, this element doesn't have any text label next to it, just the context of a title higher up the page gives an idea to what this element contains e.g. for example a list of countries on a section about countries.

When running an accessibility tool on it, the tool plains that there is no accessible name, I was wondering if there is a way to give this a name for a screen reader without having to add a label if that is not wanted as part of the design?

I'm learning about accessibility in HTML and I came across an example of a Select dropdown HTML element, this element doesn't have any text label next to it, just the context of a title higher up the page gives an idea to what this element contains e.g. for example a list of countries on a section about countries.

When running an accessibility tool on it, the tool plains that there is no accessible name, I was wondering if there is a way to give this a name for a screen reader without having to add a label if that is not wanted as part of the design?

• javascript
• html
• accessibility

• Add label but hide it in design, just as simple as that – Yupma Commented Oct 29, 2021 at 17:59

1 Answer 1

Short Answer

It isn't about what you want as part of your design, it is about what makes the page usable for as many people as possible. You should make the design work with a visible and properly associated label.

Longer Answer

There are ways we can add a label that isn't visible, one way being aria-label:

<select aria-label="label for the select">

</select>

Or we could use a visually hidden class on a <label> element so that it is still reachable by Assistive Tech (screen readers etc.) but does not show visually:

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<label for="select1" class="visually-hidden">Label Text</label>
<select id="select1">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

But although that helps people using Assistive Tech (AT) such as a screen reader, it doesn't help everybody else.

• What if someone has a learning difficulty and cannot associate the options in your select with the heading further up?
• What if someone is using a screen magnifier and needs a label close to the control to know what it is for?
• What if someone is using a custom style sheet that changes your layout and the association based on the layout doesn't work anymore?

So the answer is to add a <label> that is visible and properly associated to make it accessible and better for everybody.

The design should not suffer from a visible label (and if it does, your graphic designer / UI team need to up their game!) and it is likely to have the added bonus that people will feel like the form is easier to fill out, increasing conversions (as you reduce "friction").

So the best thing is to add a visible label:

<label for="select1">The label</label>
<select id="select1">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Note the use of an explicit label using for="IDofSelect", rather than an implicit label - where you wrap the <select> in a <label>, as implicit labels can cause problems with voice software such as Dragon Naturally Speaking