{"id":157,"date":"2024-05-22T14:52:06","date_gmt":"2024-05-22T14:52:06","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=157"},"modified":"2025-06-15T14:40:47","modified_gmt":"2025-06-15T14:40:47","slug":"not-so-short-note-on-aria-label-usage-big-table-edition","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2024\/05\/22\/not-so-short-note-on-aria-label-usage-big-table-edition\/","title":{"rendered":"Not so short note on aria-label usage – Big Table Edition"},"content":{"rendered":"
\"David
An audience with Dr David Swallow wherein he outlines the existential threat to native labeling mechanisms posed by the use of aria-label.<\/figcaption><\/figure>\n

Updated:<\/strong> 15 June 2025<\/p>\n

aria-label<\/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>\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 role<\/code> attribute. When applied they override the implicit role of an element.<\/p>\n

(Somewhat out of place here) general rules\u00a0 for labeling<\/h2>\n
    \n
  1. Prefer visible over hidden labels\n
      \n
    1. Prefer text labels over icons<\/li>\n
    2. If icons are used provide a supplementary text label ( may be displayed on focus\/hover)<\/li>\n<\/ol>\n<\/li>\n
    3. Place visible labels as expected:\n
        \n
      1. For a checkbox or radio button, place the label immediately after the field.<\/li>\n
      2. If\u00a0 not a checkbox or radio button, place the label immediately before the field.<\/li>\n<\/ol>\n<\/li>\n
      3. Prefer native HTML labeling mechanisms, for Native HTML controls, over ARIA labeling mechanisms.<\/li>\n<\/ol>\n

        Never be tempted<\/strong> to use placeholder text as a label<\/a>. It SUX<\/strong>.<\/p>\n

        Questions on aria-label usage<\/h2>\n

        I find myself regularly asking these questions in regards to aria-label<\/code>:<\/p>\n

          \n
        1. Is it a good idea to use aria-label<\/code> on element X<\/em>?<\/li>\n
        2. Does aria-label<\/code> work as expected i.e<\/em> is announced by screen readers on element Z?<\/em><\/li>\n
        3. Is aria-label<\/code> allowed on element Y<\/em>?<\/li>\n<\/ol>\n

          FYI empty<\/em> aria-label=\"\"<\/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>\n

          aria-label<\/code> masks any other accessible name source except aria-labelledby<\/code>, which masks all others including aria-label<\/code>.<\/p>\n

          For HTML elements I have provided some guidance on aria-label<\/code> usage (which by all means you may disagree with):<\/p>\n

           <\/p>\n

          Table header info:<\/strong><\/h3>\n