3

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 complains 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?

j obe
  • 1,759
  • 4
  • 15
  • 23

1 Answers1

9

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

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • completely agree with you, this is just a situation I've come across, I think because it's part of a mobile application maybe the designers felt labels aren't as necessary, I'm not sure. I also didn't understand the attributes you added to the class such as clip, clip-path, white-space and the need for overflow as the label won't contain any text anyway? – j obe Oct 29 '21 at 18:32
  • @jobe Wow sorry to confuse you, the label absolutely should have text within it, that was a mistake (I just fixed it). So that is why we use `clip`, `clip-path` etc. to hide the text within the label. Without the text the label is not helpful! Sorry once again...I goofed! As for labels on mobile application it all falls under the same guidance, WCAG rules and user requirements, people still use screen magnifiers etc. on mobiles so "dig your heels in" a bit and tell them they need to add a label (assuming you are in that sort of a position to do that without getting in trouble of course!)! – GrahamTheDev Oct 29 '21 at 18:34
  • Ah thanks, that is clearer, will try the aria-label suggestion for the moment but bring up a separate label suggestion as well. Side question, once a user is in the dropdown does anything special need to be done for each option to be read out or will the fact it's a native element handle that automatically? – j obe Oct 29 '21 at 19:03
  • 1
    It will be handled automatically in a native element. Unless it is a multi select - then it gets a lot more complicated than you might think! – GrahamTheDev Oct 30 '21 at 06:33