![\"Dave](\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/02\/hats.png\")
<\/p>\n<\/p>\n
Updated June 10th 2024<\/strong><\/p>\n Like The same opportunity is afforded by native HTML labelling features, please do use the native features wherever practical!<\/em><\/strong>, for example:<\/p>\n Implicit roles<\/strong> are those applied automatically by browsers<\/a> to native HTML elements.<\/p>\n Explicit roles<\/strong> are those applied by developers using the Never be tempted<\/strong> to use placeholder text as a label<\/a>. It SUX<\/strong>.<\/p>\n I find myself regularly asking the these questions in regards to FYI empty<\/em> It’s legit <\/em>for You can include text that would be exposed as the accessible name if The order in which you reference the Today I learned that concatenated text does now<\/strong> have spaces by default, mea culpa.<\/em><\/p>\n Append the source: https:\/\/w3c.github.io\/accname\/#computation-steps<\/a><\/p>\n Try it yourself – Codepen aria-labelledby examples<\/a><\/p>\n See the Pen aria-label<\/code>, aria-labelledby<\/code> provides the opportunity for a developer to expose a short<\/strong> text string as the accessible name<\/a> for an element. The mechanism to do so differs. While aria-label<\/code> accepts a string of text<\/a>, aria-labelledby<\/code> accepts 1 or more id<\/code> values<\/a> (NOT<\/strong> a STRING OF TEXT).<\/p>\n\n\n
<label for=\"pithy\">poot<\/mark><\/label> <input type=\"text\" id=\"pithy\"><\/code><\/li>\n<img alt=\"creamy pie\"<\/mark>><\/code><\/li>\n<button>belt on<\/mark><\/button><\/code><\/li>\n<\/ul>\n<\/div>\naria-labelledby<\/code> is one of a number of secondary methods to label native HTML UI elements. It works particularly well on interactive elements, it also works well on most block level elements old skool<\/em> term<\/sup> that have explicitly or implicitly defined structural roles. It works less well or not at all<\/strong> on text level semantics<\/a>. It is prohibited as are<\/em> any form of accessible name on a whole slew<\/strong> of roles<\/a>.<\/p>\nrole<\/code> attribute. When applied they override the implicit role of an element.<\/p>\n(Somewhat out of place here) general rules for labeling<\/h2>\n
\n
\n
\n
Questions on aria-labelledby usage<\/h2>\n
aria-label<\/code>:<\/p>\n\n
aria-labelledby<\/code> on element X<\/em>?<\/li>\naria-labelledby<\/code> work as expected i.e<\/em> is announced by screen readers on element Z?<\/em><\/li>\naria-labelledby<\/code> allowed on element Y<\/em>?<\/li>\n<\/ol>\naria-labelledby=\"\"<\/code> does not equal empty<\/em> alt=\"\"<\/code>, the latter signals that an img<\/code> element has no useful information, the former does nothing.<\/p>\naria-labelledby<\/code> masks any other accessible name source.<\/p>\naria-labelledby<\/code> referencing content<\/h2>\nhidden content<\/h3>\n
aria-labelledby<\/code> to reference a hidden element, it makes no difference to the resulting accessible name if the content is hidden (using CSS display:none<\/code>, for example) Refer to Hiding Content Has No Effect on Accessible Name or Description Calculation<\/a><\/p>\n<a href=\"beefy.html\" aria-labelledby=\"unseen\">\r\n
now you don't<\/del><\/a>\r\n\r\n<p id=\"unseen\" hidden<\/mark>>Now you hear me<\/p>\r\n\r\naccessible name: \"Now you hear me\"<\/pre>\nself and multiple references<\/h3>\n
aria-labelledby<\/code> wasn’t there by adding an id<\/code> to the element with the aria-labelledby<\/code> and referencing the value, you can also reference multiple elements:<\/p>\n<a href=\"noise.html\" id=\"heard\" \r\naria-labelledby=\"unseen heard\">\r\nnow you do<\/a>\r\n\r\n<p id=\"unseen\" hidden>Now you hear me,<\/p>\r\n\r\naccessible name: \"Now you hear me, now you do\"<\/pre>\n
id<\/code> values effects the string concatenation order:<\/p>\n<a href=\"alphabet.html\" id=\"pre\" \r\naria-labelledby=\"pre a b c\"<\/mark>>Easy as<\/a>\r\n\r\naccessible name: \"Easy as A B C\"\r\n\r\n<a href=\"alphabet.html\" id=\"pre\" \r\naria-labelledby=\"pre c b a\"<\/mark>>Easy as<\/a>\r\n\r\naccessible name: \"Easy as C B A\"\r\n\r\n<span id=\"a\">A<\/span> \r\n<span id=\"b\">B<\/span>\r\n<span id=\"c\">C<\/span><\/pre>\n
Spaces between strings are<\/em> added by the browser<\/h3>\n
result<\/code> of each step above, with a space<\/strong>, to the total accumulated text<\/code>.<\/p><\/blockquote>\nBe aware that concatenated text does not have spaces by default, so you will need to include spaces.<\/del><\/p>\n<a href=\"alphabet.html\" id=\"pre2\" \r\naria-labelledby=\"pre2 a b c\">Easy as<\/a>\r\n\r\naccessible name: \"Easy asABC\"\r\n\r\n<a href=\"alphabet.html\" id=\"pre2\" \r\naria-labelledby=\"pre2 a b c\">Easy as <\/mark><\/a>\r\n\r\naccessible name: \"Easy as <\/mark>ABC\"\r\n\r\n<span id=\"a\">A<\/span> \r\n<span id=\"b\">B<\/span>\r\n<span id=\"c\">C<\/span><\/del><\/pre>\n
\naria-labelledby examples<\/a> by steve faulkner (@stevef<\/a>)
\non CodePen<\/a>.<\/p>\n