![\"Patrick](\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-13-143809.jpg\")
<\/p>\n<\/p>\n
When is a label also an (accessible) name, when is it not and when is it neither?<\/strong><\/p>\n text<\/a>\u00a0or other component with a\u00a0text alternative<\/a>\u00a0that is presented to a user to identify a component within web\u00a0content<\/a><\/p><\/blockquote>\n A A text by which software can identify a component within web content to the user<\/p><\/blockquote>\n A When it is visible text and the text is programmatically associated with the control it labels.<\/p>\n Element containing label text is visible, and is explicitly<\/em> ( When it is not visible, when it is not programmatically, or only visible before data input<\/p>\n label text not programmatically associated<\/p>\n label text not programmatically associated<\/p>\n When the label element is Although it has the When a See the Pen WCAG definitions:<\/h2>\n
label<\/a><\/h3>\n
placeholder<\/code><\/a> can be an accessible name, but can never be a label<\/a><\/p>\nlabel<\/code> element<\/a> can be a label<\/a> when it is visible and contains text that identifies a component.<\/p>\n(accessible) name<\/a><\/h3>\n
label<\/code> element<\/a> can be a name<\/a> when it is visible and contains text that is programmatically associated with the component it identifies.<\/p>\nWhen is a label also an (accessible) name?<\/h2>\n
Example code<\/h3>\n
label<\/code> element is visible, contains label text and a HTML labelable element<\/a><\/p>\n<label>First name\r\n<input type=\"text\" placeholder=\"Our Dave\">\r\n<\/label><\/pre>\n
\n
Example code<\/h3>\n
label<\/code> element is visible, and is explicitly<\/em> (for\/id<\/code>) associated with a HTML labelable element<\/a><\/p>\n<label for=\"fname\">First name<\/label>\r\n<input id=\"fname\" type=\"text\" placeholder=\"Herbie\"><\/pre>\n
\n
Example code<\/h3>\n
aria-labelledby<\/code>) associated with an HTML element<\/p>\n<label id=\"fname\">First name<\/label>\r\n<input aria-labelledby=\"fname\" type=\"text\" placeholder=\"Herbie\">\r\n\r\n<span id=\"fname1\">First name<\/span> \r\n<input aria-labelledby=\"fname1\" type=\"text\" placeholder=\"Herbie\"><\/pre>\n
\n
Example code<\/h3>\n
label<\/code> element containing visible label text and a custom control which builds on a HTML labelable element<\/a><\/p>\n<label>First name\r\n<input type=\"combobox\" placeholder=\"Jonny\">\r\n<\/label><\/pre>\n
\n
When is it not?<\/h2>\n
Example code<\/h3>\n
<label>First name<\/label>\r\n<input type=\"text\" placeholder=\"Jonny\"><\/pre>\n
\n
Example code<\/h3>\n
<span>First name<\/span>\r\n<input type=\"text\" placeholder=\"Pattypoo\"><\/pre>\n
\n
Example code<\/h3>\n
display:none<\/code> and aria-labelledby<\/code> is used to associate the hidden label text with a control<\/p>\n<label for=\"fname1\" class=\"hidden\" id=\"poot\">First name<\/label>\r\n<input id=\"fname1\" aria-labelledby=\"poot\" type=\"text\" \r\nplaceholder=\"Bonny\">\r\n\r\n.hidden {\r\ndisplay:none\r\n}<\/pre>\n\n
Example code<\/h3>\n
label<\/code> element wrapped around a custom control built upon a non interactive (span<\/code>) element:<\/p>\n<label>First name\r\n<span tabindex=\"0\" role=\"textbox\"><\/span><\/label><\/pre>\n
\n
When is it neither?<\/h2>\n
Example code<\/h3>\n
for\/id<\/code> attributes set, because the label<\/code> element is hidden (display:none<\/code>), it is neither a label or an accessible name<\/p>\n<label for=\"fname\" class=\"hidden\">First name<\/label>\r\n<input id=\"fname\" type=\"text\" placeholder=\"Throater\">\r\n\r\n.hidden {\r\ndisplay:none\r\n}<\/pre>\n\n
Example code<\/h3>\n
placeholder<\/code><\/a> attribute value is used as the only label text<\/p>\n<input type=\"text\" placeholder=\"Little King\"><\/pre>\n
\n
Code examples brought to life<\/h2>\n
\nlabel and name examples<\/a> by steve faulkner (@stevef<\/a>)
\non CodePen<\/a>.<\/p>\n