4 ms·

I don’t think so, correct me if I’m wrong: an ARIA attribute that might fit here would be aria-labelledby (sic), but per MDN > Note that while using aria-label

I don’t think so, correct me if I’m wrong: an ARIA attribute that might fit here would be aria-labelledby (sic), but per MDN > Note that while using aria-labelledby is similar in this situation to using an HTML <label> element with the for attribute, there are some very important differences. The aria-labelledby attribute only defines the accessible name. It doesn't provide any of <label>'s other functionality, such as making clicking on the labeling element activate the input it is associated with. That has to be added back in with JavaScript. The best compromise would be to both wrap the input inside the label _and_ use the “for” attribute. Typically, it’s best to use elements and controls that are already accessible, as ARIA is more intended to give additional accessibility to components that might not be traditionally accessible, or that require more robust accessibility control.

jermaustin1 2y ago
Having done a lot of accessibility consulting in the past (granted it was a long time ago now), we were instructed to use the aria-label attribute to provide the same text as the label. Since I do mostly asp.net mvc, I created a bunch of "Accessible" extension methods off the HtmlHelper object. <%: Html.AccessibleCheckbox("MyCheckbox", label: "My Checkbox") %> This would output something like: <label><input type="checkbox" name="MyCheckbox" aria-label="My Checkbox" /> My Checkbox</label> This is a bad example since the primary reason for not giving IDs is because it is a dynamically created checkbox inside a loop or some other partial view that you might not know if it is a unique ID for the page or not.
- phatskat 2y ago
  Ah interesting, I figured that a properly set and identified label element would suffice - I haven’t noticed our sniffer complaining yet we also strictly use the for attribute and don’t wrap controls that I’m aware of. Thanks for the insight!

jermaustin1 2y ago

Having done a lot of accessibility consulting in the past (granted it was a long time ago now), we were instructed to use the aria-label attribute to provide the same text as the label. Since I do mostly asp.net mvc, I created a bunch of "Accessible" extension methods off the HtmlHelper object. <%: Html.AccessibleCheckbox("MyCheckbox", label: "My Checkbox") %> This would output something like: <label><input type="checkbox" name="MyCheckbox" aria-label="My Checkbox" /> My Checkbox</label> This is a bad example since the primary reason for not giving IDs is because it is a dynamically created checkbox inside a loop or some other partial view that you might not know if it is a unique ID for the page or not.

phatskat 2y ago
Ah interesting, I figured that a properly set and identified label element would suffice - I haven’t noticed our sniffer complaining yet we also strictly use the for attribute and don’t wrap controls that I’m aware of. Thanks for the insight!