-1

im working on updating a site for compliance. the site is mostly AngularJS which im still new to but learning. i found a situation where there is a label targeting a div tag however the label has no :for attribute, instead has an :id and the div has a :label-id targeting the :id of the label tag...when i tried to adjust it, it broke on the front-end so im not sure what im seeing...im curious if this will pass WCAG AA?

i have tried a screen reader, NVDA, no issues...however a crawler i used flagged the label element for not having a :for attribute...i have tried searching for the :label-id attribute with no luck which im guessing means its custom...im guessing a lot of the issue is related to my lack of understanding angularJS...

<div class="groupA">  
  <label id="elementA">Element A is for Apple</label>
  <div class"customSelectA" label-id="elementA">...stuff shows up here after clicking the label and there are also a bunch of angular attributes on this div that are not relevant to my question</div>
</div>
Tyler Murin
  • 1

1 Answers1

-1

I'd recommend going to the basics and ignoring angular for the moment.

Look at the spec for the <label> element. It has a for attribute that can point to a form element. The ID must point to a "labelable element" (<input>, <button>, <select>, etc).

So the following is valid:

<label for="myID">Element A is for Apple</label>
<input id="myID" type="checkbox">

but the following is not:

<label for="myID">Element A is for Apple</label>
<div id="myID"></div>

In fact, if you run the above example through an html validator, https://validator.w3.org/nu, it will flag it in error:

Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

Regarding the label-id attribute, it does not exist. It's not part of the html language. It appears to be a custom attribute but custom attributes should start with "data-".

You can have a <label> without a for attribute such as:

<label id="newID">Element A is for Apple</label>
<input type="checkbox" aria-labelledby="newID">

In this case, the <input> points back to the <label> instead of the <label> pointing to the <input>, but that's a poor use of the <label> element. You won't gain the benefit of the <label>. The first example lets you click on the text of the <label> and the checkbox will be selected. In the last example, while the checkbox will be labeled by the text, you can't click on the text to select the checkbox.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • thanks for the response...i agree with your finding...one of the main issues i ran into was that when i removed the angular and set it up the way you have set it up in the example you replied with, the functionality broke...now i can leave both versions of the html in place (proper way & custom way) i am just concerned that there could be a level of redundancy (as in each element is labeled and read twice)...again this understanding could be a lack of experience... – Tyler Murin Aug 27 '19 at 12:00