0

This error is detected by WCAG 2 (level A) validation.

I work with a child wordpress theme. I tried to fix the tag with Javascript, but the WCAG 2 still highlights the error.

Can you help me ?

Screenshot #1 enter image description here

EDIT : here is the excerpt without javascript. The javascript file is loaded at the end of the page.

Screenshot #2 enter image description here

Jayakumari Arumugham
  • 201
  • 5
  • 15

2 Answers2

1

Looks like that message comes from AChecker. (Sometimes it helps to tell people what accessibility tool you're using.)

The error is not complaining that the <label> is not associated with the <input>. Your code structure is using an implicit label by embedding the <input> inside the <label>, which is valid (see "The label element" spec).

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.

Now, having said that, there used to be (and there might still be) some combination of screen reader and browser that would not honor the implicit label and required you to specify the for attribute on the <label>, but an accessibility checker tool should not flag that as an error. It could flag it as an issue to manually check but it's not an error.

Anyway, back to the original question. Error 188 says that the label itself does not have any text. You have a class="screen-reader-text" on a <span> which is the only source of text inside the label. If that class has a display:none or visibility:hidden, then that might cause the error because the text would be hidden to all users. However, if your screen-reader-text class just visually hides the text (similar to What is sr-only in Bootstrap 3?), then the text would be available to screen readers but might be invisible to sighted users. I'm not sure if that would cause AChecker to flag it in error.

slugolicious
  • 8,671
  • 1
  • 20
  • 30
0

You need to add 'aria-label' attribute

Or

You need to add

<label for="search-input">Label</label>

and set input id to search-input

Tristan De oliveira
  • 776
  • 3
  • 12
  • Hi Tristan, thank you for your answer. It does not work. But maybe it's because of javascript loading. I can not edit the file directly, I have to go through Javascript because I work with a wordpress child theme. I do not know what to do, I have an exam and the validation of WCAG is mandatory to have it –  Feb 28 '19 at 10:26
  • Hmm, can you add a snippet of the generated HTML ? And one before your script add the label – Tristan De oliveira Feb 28 '19 at 10:28
  • I edit my post to add img of HTML without javascript –  Feb 28 '19 at 10:42