0

I am running Sortsite for the ADA compliance on a website I'm working on and I get this message:

This form control has a blank label or title. Add descriptive text to the form control's label.

I've tried adding the label element with some information but hide it because we don't want it shown.

<label style="display: none;" for="slide1">First slide</label>
<input checked type="radio" name="slider" id="slide1" title="First set of slides" />
Adam
  • 17,838
  • 32
  • 54
Marco A
  • 21
  • 2
  • A label that is `display: none` isn't there, so it doesn't help people access the form! – Quentin Oct 30 '19 at 10:37
  • Checkbox, label text “First slide” - is this one of those sliders made with an “avoid JavaScript at all cost” approach? Those usually have _terrible_ usability in general. Stuff like this is nice as “proof of concept” - but they are _not_ a good solution for actual use in practice. If you want _proper_ accessibility, then don’t use these techniques to begin with. – 04FS Oct 30 '19 at 10:54

2 Answers2

1

Screen readers and other accessibility devices don't use the DOM, but build and accessibility tree based on it. Invisible items don't go there.

If you don't want your label to be visible, use an aria-label:

<div class="_po-r">
  <div class="_bl-zi-0a _w-01 _bl-bg-0l " id="slides">
    <input checked type="radio" name="slider" id="slide1" class="set" title="First set of slides" aria-label="First slide" />
GaloisGirl
  • 1,476
  • 1
  • 8
  • 14
1

If you don't want the label to be visible on screen, place it off-screen by using a .visually-hidden, .sr_only CSS class with code such as the following. NEVER use display:none., as it hides the label for everybody including screen reader users.

.visually-hidden {
position: absolute;
left: -2px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

Great are the chances that if you are using a framework like bootstrap, they already propose such a class.

If you can do so, it's better to always have a label, even if it is off-screen, rather than using aria-label. The first gold rule of ARIA is that it should only be used when it is really necessary. Here you can avoid it very easily.

QuentinC
  • 12,311
  • 4
  • 24
  • 37