![\"legs](\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/06\/IMG_5280-1024x567.jpg\")
<\/p>\n<\/p>\n
It is unclear to web developers, browser developers and assistive tech developers when an accessible name provided via Taking the ARIA in HTML<\/a> specification, Allowed descendents of ARIA roles<\/a> as a starting place, which defines what are allowed descendents in terms of the HTML content model, I have some suggestions.<\/p>\n It should be noted at this point that I haven’t looked exhaustively for discussions on this subject and they may well be underway. The motivation for this article was a JAWS bug<\/a> and a post by Jamie Teh<\/a> on Mastodon<\/p>\n This is the age old question about whether a label should override content. That absolutely makes sense for buttons, links, etc., but it’s never been quite as clear for containers like paragraphs, table cells, etc. where there can be some nasty consequences if the label completely overrides the content.<\/p><\/blockquote>\n Any role that is allowed to contain<\/strong> the listed content types as descendents may have the accessible name provided via Any content defined as Phrasing content<\/a> may have the accessible name provided via In the\u00a0 code example the The above suggestions<\/strong> are not fullproof<\/em> and there may be some carve outs<\/em> required, but everything has to start somewhere…<\/p>\naria-label\/aria-labelledby<\/code> should replace the child content as the accessible name or be announced in addition to subtree content. This results in bugs and frustration for anyone that this issue touches.<\/p>\nhalf arsed suggestion<\/h2>\n
aria-label\/aria-labelledby<\/code> (if allowed to be named), but not mask the content it contains<\/strong>:<\/p>\n\n
aria-label\/aria-labelledby<\/code> (if allowed to be named) and will mask its child content<\/code>.<\/p>\nExample<\/h2>\n
<nav><\/code> element is named aria-labelledby<\/code> the reference the heading element and the <ul><\/code> it contains is named using an aria-label<\/code> In both cases as these elements are defined as allowing flow content<\/a> as expected the accessible name is announced when a screen reader user navigates to the content, the user can then naviagte through the child content.<\/p>\n<h1 id=\"CM\">HTML Content Models<\/h1>\r\n\r\n<nav aria-labelledby=\"CM\">\r\n<ul aria-label=\"some content models\">\r\n<li><a href=\"#flow-content-2\">Flow content<\/a>\r\n<li><a href=\"#sectioning-content-2\">Sectioning content<\/a>\r\n<li><a href=\"#interactive-content-2\">Interactive content<\/a>\r\n<\/ul>\r\n<\/nav><\/pre>\n
listen<\/h2>\n