undefined | Better HN

0 pointsjermaustin11y ago0 comments

Is that not what the ARIA standards are for?

0 comments

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.

jermaustin1OP1y 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.

phatskat1y 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!

j / k navigate · click thread line to collapse

0 comments

phatskat1y ago

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

The best compromise would be to both wrap the input inside the label _and_ use the “for” attribute.

jermaustin1OP1y 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>

phatskat1y ago

j / k navigate · click thread line to collapse