names.html (18802B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML-AAM Element Accessible Name From Author Tests</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <body> 13 14 15 <p>Tests the accName for elements defined in <a href="https://w3c.github.io/html-aam/#accessible-name-and-description-computation">HTML-AAM: Accessible Name Computations By HTML Element</a>. 16 These tests are meant to show whether an element returns a name per the naming mechanism used. See <a href="https://wpt.fyi/results/accname">wpt: accname</a> for expanded accName testing.</p> 17 18 19 <!-- 20 The following elements are those which can be named by authors. They do not receive their name from elements for which they are an accessibility ancestor. 21 22 There are other elements which can be named by author, but have additional ways in which they can be named. These elements will be tested separately. 23 --> 24 25 26 <h2>address element</h2> 27 <address data-testname="address no name" data-expectedlabel="" class="ex">x</address> 28 29 <address data-testname="address aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</address> 30 <address data-testname="address aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</address> 31 <address data-testname="address title" title="title" data-expectedlabel="title" class="ex">x</address> 32 33 <address data-testname="address aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</address> 34 <address data-testname="address aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</address> 35 36 <address data-testname="address aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</address> 37 <address data-testname="address aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</address> 38 39 40 41 <h2>aside element</h2> 42 <aside data-testname="aside no name" data-expectedlabel="" class="ex">x</aside> 43 44 <aside data-testname="aside aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</aside> 45 <aside data-testname="aside aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</aside> 46 <aside data-testname="aside title" title="title" data-expectedlabel="title" class="ex">x</aside> 47 48 <aside data-testname="aside aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</aside> 49 <aside data-testname="aside aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</aside> 50 51 <aside data-testname="aside aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</aside> 52 <aside data-testname="aside aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</aside> 53 54 55 <h2>blockquote element</h2> 56 <blockquote data-testname="blockquote no name" data-expectedlabel="" class="ex">x</blockquote> 57 58 <blockquote data-testname="blockquote aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</blockquote> 59 <blockquote data-testname="blockquote aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</blockquote> 60 <blockquote data-testname="blockquote title" title="title" data-expectedlabel="title" class="ex">x</blockquote> 61 62 <blockquote data-testname="blockquote aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</blockquote> 63 <blockquote data-testname="blockquote aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</blockquote> 64 65 <blockquote data-testname="blockquote aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</blockquote> 66 <blockquote data-testname="blockquote aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</blockquote> 67 68 69 70 <h2>details element</h2> 71 <details data-testname="details no name" data-expectedlabel="" class="ex"><summary>x</summary></details> 72 73 <details data-testname="details aria-label" aria-label="label" data-expectedlabel="label" class="ex"><summary>x</summary></details> 74 <details data-testname="details aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> 75 <details data-testname="details title" title="title" data-expectedlabel="title" class="ex"><summary>x</summary></details> 76 77 <details data-testname="details aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> 78 <details data-testname="details aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> 79 80 <details data-testname="details aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> 81 <details data-testname="details aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><summary>x</summary></details> 82 83 84 <h2>figure element</h2> 85 <figure data-testname="figure no name" data-expectedlabel="" class="ex">x</figure> 86 87 <figure data-testname="figure aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</figure> 88 <figure data-testname="figure aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</figure> 89 <figure data-testname="figure title" title="title" data-expectedlabel="title" class="ex">x</figure> 90 91 <figure data-testname="figure aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</figure> 92 <figure data-testname="figure aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</figure> 93 94 <figure data-testname="figure aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</figure> 95 <figure data-testname="figure aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</figure> 96 97 98 <h2>footer element</h2> 99 <footer data-testname="footer no name" data-expectedlabel="" class="ex">x</footer> 100 101 <footer data-testname="footer aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</footer> 102 <footer data-testname="footer aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</footer> 103 <footer data-testname="footer title" title="title" data-expectedlabel="title" class="ex">x</footer> 104 105 <footer data-testname="footer aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</footer> 106 <footer data-testname="footer aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</footer> 107 108 <footer data-testname="footer aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</footer> 109 <footer data-testname="footer aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</footer> 110 111 112 <h2>form element</h2> 113 <form data-testname="form no name" data-expectedlabel="" class="ex">x</form> 114 115 <form data-testname="form aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</form> 116 <form data-testname="form aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</form> 117 <form data-testname="form title" title="title" data-expectedlabel="title" class="ex">x</form> 118 119 <form data-testname="form aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</form> 120 <form data-testname="form aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</form> 121 122 <form data-testname="form aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</form> 123 <form data-testname="form aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</form> 124 125 126 <h2>hgroup element</h2> 127 <hgroup data-testname="hgroup no name" data-expectedlabel="" class="ex"><h3>x</h3><p>y</p></hgroup> 128 129 <hgroup data-testname="hgroup aria-label" aria-label="label" data-expectedlabel="label" class="ex"><h3>x</h3><p>y</p></hgroup> 130 <hgroup data-testname="hgroup aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> 131 <hgroup data-testname="hgroup title" title="title" data-expectedlabel="title" class="ex"><h3>x</h3><p>y</p></hgroup> 132 133 <hgroup data-testname="hgroup aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> 134 <hgroup data-testname="hgroup aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> 135 136 <hgroup data-testname="hgroup aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> 137 <hgroup data-testname="hgroup aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><h3>x</h3><p>y</p></hgroup> 138 139 140 <h2>hr element</h2> 141 <hr data-testname="hr no name" data-expectedlabel="" class="ex"> 142 143 <hr data-testname="hr aria-label" aria-label="label" data-expectedlabel="label" class="ex"> 144 <hr data-testname="hr aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"> 145 <hr data-testname="hr title" title="title" data-expectedlabel="title" class="ex"> 146 147 <hr data-testname="hr aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"> 148 <hr data-testname="hr aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"> 149 150 <hr data-testname="hr aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"> 151 <hr data-testname="hr aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"> 152 153 154 <h2>ol element</h2> 155 <ol data-testname="ol no name" data-expectedlabel="" class="ex"><li>x</li></ol> 156 157 <ol data-testname="ol aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></ol> 158 <ol data-testname="ol aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> 159 <ol data-testname="ol title" title="title" data-expectedlabel="title" class="ex"><li>x</li></ol> 160 161 <ol data-testname="ol aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> 162 <ol data-testname="ol aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> 163 164 <ol data-testname="ol aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> 165 <ol data-testname="ol aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></ol> 166 167 168 <h2>main element</h2> 169 <main data-testname="main no name" data-expectedlabel="" class="ex">x</main> 170 171 <main data-testname="main aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</main> 172 <main data-testname="main aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</main> 173 <main data-testname="main title" title="title" data-expectedlabel="title" class="ex">x</main> 174 175 <main data-testname="main aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</main> 176 <main data-testname="main aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</main> 177 178 <main data-testname="main aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</main> 179 <main data-testname="main aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</main> 180 181 182 <h2>menu element</h2> 183 <menu data-testname="menu no name" data-expectedlabel="" class="ex"><li>x</li></menu> 184 185 <menu data-testname="menu aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></menu> 186 <menu data-testname="menu aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> 187 <menu data-testname="menu title" title="title" data-expectedlabel="title" class="ex"><li>x</li></menu> 188 189 <menu data-testname="menu aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> 190 <menu data-testname="menu aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> 191 192 <menu data-testname="menu aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> 193 <menu data-testname="menu aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></menu> 194 195 196 <h2>nav element</h2> 197 <nav data-testname="nav no name" data-expectedlabel="" class="ex">x</nav> 198 199 <nav data-testname="nav aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</nav> 200 <nav data-testname="nav aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</nav> 201 <nav data-testname="nav title" title="title" data-expectedlabel="title" class="ex">x</nav> 202 203 <nav data-testname="nav aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</nav> 204 <nav data-testname="nav aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</nav> 205 206 <nav data-testname="nav aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</nav> 207 <nav data-testname="nav aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</nav> 208 209 210 <h2>search element</h2> 211 <search data-testname="search no name" data-expectedlabel="" class="ex">x</search> 212 213 <search data-testname="search aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</search> 214 <search data-testname="search aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</search> 215 <search data-testname="search title" title="title" data-expectedlabel="title" class="ex">x</search> 216 217 <search data-testname="search aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</search> 218 <search data-testname="search aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</search> 219 220 <search data-testname="search aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</search> 221 <search data-testname="search aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</search> 222 223 224 <h2>section element</h2> 225 <section data-testname="section no name" data-expectedlabel="" class="ex">x</section> 226 227 <section data-testname="section aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</section> 228 <section data-testname="section aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</section> 229 <section data-testname="section title" title="title" data-expectedlabel="title" class="ex">x</section> 230 231 <section data-testname="section aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</section> 232 <section data-testname="section aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</section> 233 234 <section data-testname="section aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</section> 235 <section data-testname="section aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</section> 236 237 238 <h2>ul element</h2> 239 <ul data-testname="ul no name" data-expectedlabel="" class="ex"><li>x</li></ul> 240 241 <ul data-testname="ul aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></ul> 242 <ul data-testname="ul aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> 243 <ul data-testname="ul title" title="title" data-expectedlabel="title" class="ex"><li>x</li></ul> 244 245 <ul data-testname="ul aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> 246 <ul data-testname="ul aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> 247 248 <ul data-testname="ul aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> 249 <ul data-testname="ul aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></ul> 250 251 252 <!-- element to reference for aria-labelledby tests --> 253 <div id="labelledby">labelledby</div> 254 255 <script> 256 AriaUtils.verifyLabelsBySelector(".ex"); 257 </script> 258 259 </body> 260 </html>