|
| 1 | +## role |
| 2 | + |
| 3 | +● Here's a comprehensive list of implicit ARIA roles for HTML elements: |
| 4 | + |
| 5 | + Complete HTML Element → Implicit ARIA Role Mapping |
| 6 | + |
| 7 | + Navigation & Structure |
| 8 | + |
| 9 | + | Element | Implicit Role | Conditions | |
| 10 | + |-----------|---------------|-------------------------------------------------------------| |
| 11 | + | <nav> | navigation | Always | |
| 12 | + | <main> | main | Always | |
| 13 | + | <aside> | complementary | Always | |
| 14 | + | <header> | banner | Not descendant of article, aside, main, nav, section | |
| 15 | + | <header> | (none) | When descendant of article, aside, main, nav, section | |
| 16 | + | <footer> | contentinfo | Not descendant of article, aside, main, nav, section | |
| 17 | + | <footer> | (none) | When descendant of article, aside, main, nav, section | |
| 18 | + | <section> | region | Has accessible name (aria-label, aria-labelledby, or title) | |
| 19 | + | <section> | (none) | No accessible name | |
| 20 | + | <article> | article | Always | |
| 21 | + | <address> | group | Always | |
| 22 | + |
| 23 | + Headings |
| 24 | + |
| 25 | + | Element | Implicit Role | Notes | |
| 26 | + |----------|---------------|----------------| |
| 27 | + | <h1> | heading | aria-level="1" | |
| 28 | + | <h2> | heading | aria-level="2" | |
| 29 | + | <h3> | heading | aria-level="3" | |
| 30 | + | <h4> | heading | aria-level="4" | |
| 31 | + | <h5> | heading | aria-level="5" | |
| 32 | + | <h6> | heading | aria-level="6" | |
| 33 | + | <hgroup> | group | Always | |
| 34 | + |
| 35 | + Lists |
| 36 | + |
| 37 | + | Element | Implicit Role | Conditions | |
| 38 | + |---------|---------------|---------------------------| |
| 39 | + | <ul> | list | Always | |
| 40 | + | <ol> | list | Always | |
| 41 | + | <li> | listitem | Parent is ul, ol, or menu | |
| 42 | + | <dl> | (none) | Always | |
| 43 | + | <dt> | term | Always | |
| 44 | + | <dd> | definition | Always | |
| 45 | + | <menu> | list | Always | |
| 46 | + |
| 47 | + Forms & Inputs |
| 48 | + |
| 49 | + | Element | Implicit Role | Conditions | |
| 50 | + |--------------------------------|---------------|------------------------------| |
| 51 | + | <form> | form | Has accessible name | |
| 52 | + | <form> | (none) | No accessible name | |
| 53 | + | <input type="button"> | button | Always | |
| 54 | + | <input type="checkbox"> | checkbox | Always | |
| 55 | + | <input type="color"> | (none) | No role | |
| 56 | + | <input type="date"> | (none) | No standard role | |
| 57 | + | <input type="datetime-local"> | (none) | No standard role | |
| 58 | + | <input type="email"> | textbox | Always | |
| 59 | + | <input type="file"> | (none) | No standard role | |
| 60 | + | <input type="hidden"> | (none) | Not exposed | |
| 61 | + | <input type="image"> | button | Always | |
| 62 | + | <input type="month"> | (none) | No standard role | |
| 63 | + | <input type="number"> | spinbutton | Always | |
| 64 | + | <input type="password"> | (none) | No role (treated as textbox) | |
| 65 | + | <input type="radio"> | radio | Always | |
| 66 | + | <input type="range"> | slider | Always | |
| 67 | + | <input type="reset"> | button | Always | |
| 68 | + | <input type="search"> | searchbox | Always | |
| 69 | + | <input type="submit"> | button | Always | |
| 70 | + | <input type="tel"> | textbox | Always | |
| 71 | + | <input type="text"> | textbox | Always | |
| 72 | + | <input type="time"> | (none) | No standard role | |
| 73 | + | <input type="url"> | textbox | Always | |
| 74 | + | <input type="week"> | (none) | No standard role | |
| 75 | + | <input> (no type) | textbox | Default | |
| 76 | + | <textarea> | textbox | Always | |
| 77 | + | <select> (no multiple, size≤1) | combobox | Default | |
| 78 | + | <select multiple> | listbox | Always | |
| 79 | + | <select size="N"> (N>1) | listbox | When size > 1 | |
| 80 | + | <option> | option | Always | |
| 81 | + | <optgroup> | group | Always | |
| 82 | + | <button> | button | Always | |
| 83 | + | <label> | (none) | No role | |
| 84 | + | <fieldset> | group | Always | |
| 85 | + | <legend> | (none) | No role | |
| 86 | + | <output> | status | Always | |
| 87 | + | <progress> | progressbar | Always | |
| 88 | + | <meter> | meter | Always | |
| 89 | + | <datalist> | listbox | Always | |
| 90 | + |
| 91 | + Interactive Elements |
| 92 | + |
| 93 | + | Element | Implicit Role | Conditions | |
| 94 | + |-----------|---------------|--------------------| |
| 95 | + | <a> | link | Has href attribute | |
| 96 | + | <a> | (none) | No href attribute | |
| 97 | + | <area> | link | Has href attribute | |
| 98 | + | <area> | (none) | No href attribute | |
| 99 | + | <details> | group | Always | |
| 100 | + | <summary> | button | Always | |
| 101 | + | <dialog> | dialog | Always | |
| 102 | + |
| 103 | + Media |
| 104 | + |
| 105 | + | Element | Implicit Role | Conditions | |
| 106 | + |--------------|---------------|----------------------------------------| |
| 107 | + | <img> | img | Has non-empty alt attribute | |
| 108 | + | <img> | presentation | Empty alt="" attribute | |
| 109 | + | <img> | img | No alt attribute (but should have one) | |
| 110 | + | <audio> | (none) | No standard role | |
| 111 | + | <video> | (none) | No standard role | |
| 112 | + | <figure> | figure | Always | |
| 113 | + | <figcaption> | (none) | No role | |
| 114 | + | <picture> | (none) | No role | |
| 115 | + |
| 116 | + Tables |
| 117 | + |
| 118 | + | Element | Implicit Role | Conditions | |
| 119 | + |------------|---------------|---------------------| |
| 120 | + | <table> | table | Always | |
| 121 | + | <caption> | caption | Always | |
| 122 | + | <thead> | rowgroup | Always | |
| 123 | + | <tbody> | rowgroup | Always | |
| 124 | + | <tfoot> | rowgroup | Always | |
| 125 | + | <tr> | row | Always | |
| 126 | + | <th> | columnheader | In context of table | |
| 127 | + | <th> | rowheader | scope="row" | |
| 128 | + | <td> | cell | Always | |
| 129 | + | <colgroup> | (none) | No role | |
| 130 | + | <col> | (none) | No role | |
| 131 | + |
| 132 | + Text & Semantics |
| 133 | + |
| 134 | + | Element | Implicit Role | Notes | |
| 135 | + |--------------|---------------|---------| |
| 136 | + | <p> | paragraph | Always | |
| 137 | + | <hr> | separator | Always | |
| 138 | + | <pre> | (none) | No role | |
| 139 | + | <blockquote> | blockquote | Always | |
| 140 | + | <cite> | (none) | No role | |
| 141 | + | <code> | code | Always | |
| 142 | + | <em> | emphasis | Always | |
| 143 | + | <strong> | strong | Always | |
| 144 | + | <mark> | (none) | No role | |
| 145 | + | <small> | (none) | No role | |
| 146 | + | <s> | deletion | Always | |
| 147 | + | <del> | deletion | Always | |
| 148 | + | <ins> | insertion | Always | |
| 149 | + | <sub> | subscript | Always | |
| 150 | + | <sup> | superscript | Always | |
| 151 | + | <time> | time | Always | |
| 152 | + | <abbr> | (none) | No role | |
| 153 | + | <dfn> | term | Always | |
| 154 | + | <q> | (none) | No role | |
| 155 | + | <b> | (none) | No role | |
| 156 | + | <i> | (none) | No role | |
| 157 | + | <u> | (none) | No role | |
| 158 | + | <span> | (none) | No role | |
| 159 | + | <div> | (none) | No role | |
| 160 | + | <br> | (none) | No role | |
| 161 | + | <wbr> | (none) | No role | |
| 162 | + |
| 163 | + Document Structure |
| 164 | + |
| 165 | + | Element | Implicit Role | Notes | |
| 166 | + |---------|---------------|-------------| |
| 167 | + | <html> | document | Always | |
| 168 | + | <body> | document | Always | |
| 169 | + | <head> | (none) | Not exposed | |
| 170 | + | <title> | (none) | Not exposed | |
| 171 | + | <meta> | (none) | Not exposed | |
| 172 | + | <link> | (none) | Not exposed | |
| 173 | + | <style> | (none) | Not exposed | |
| 174 | + | <base> | (none) | Not exposed | |
| 175 | + |
| 176 | + Embedded Content |
| 177 | + |
| 178 | + | Element | Implicit Role | Notes | |
| 179 | + |----------|-------------------|------------------| |
| 180 | + | <iframe> | (none) | No standard role | |
| 181 | + | <embed> | (none) | No standard role | |
| 182 | + | <object> | (none) | No standard role | |
| 183 | + | <param> | (none) | Not exposed | |
| 184 | + | <canvas> | (none) | No role | |
| 185 | + | <svg> | graphics-document | Always | |
| 186 | + | <math> | math | Always | |
| 187 | + |
| 188 | + Scripting & Data |
| 189 | + |
| 190 | + | Element | Implicit Role | Notes | |
| 191 | + |------------|---------------|-------------| |
| 192 | + | <script> | (none) | Not exposed | |
| 193 | + | <noscript> | (none) | Not exposed | |
| 194 | + | <template> | (none) | Not exposed | |
| 195 | + | <slot> | (none) | Not exposed | |
| 196 | + | <data> | (none) | No role | |
| 197 | + |
| 198 | + Deprecated/Obsolete Elements |
| 199 | + |
| 200 | + | Element | Implicit Role | Notes | |
| 201 | + |------------|---------------|----------| |
| 202 | + | <marquee> | marquee | Obsolete | |
| 203 | + | <blink> | (none) | Obsolete | |
| 204 | + | <frame> | (none) | Obsolete | |
| 205 | + | <frameset> | (none) | Obsolete | |
| 206 | + |
| 207 | + Implementation Notes |
| 208 | + |
| 209 | + 1. "(none)" means: Element has no implicit role, but is still exposed to accessibility tree |
| 210 | + 2. "Not exposed" means: Element is not represented in accessibility tree at all |
| 211 | + 3. Accessible name: Determined by aria-label, aria-labelledby, or title attribute |
| 212 | + 4. Context-dependent roles: Some elements like <header>, <footer>, <th> have different roles based on their position in the DOM tree |
| 213 | + |
| 214 | + Priority Rules |
| 215 | + |
| 216 | + When computing role, follow this order: |
| 217 | + 1. ✅ Explicit role attribute (if valid for that element) |
| 218 | + 2. ✅ Implicit role from element type + attributes |
| 219 | + 3. ✅ No role (generic element) |
| 220 | + |
| 221 | + |
0 commit comments