speak-as-manual.html (4350B)
1 <!doctype html> 2 <title>CSS counter style accessibility test</title> 3 <link rel="help" href="https://drafts.csswg.org/css-counter-styles/#counter-style-speak-as"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <p> 6 This is a manual test. To run the tests, open the browser's developer tools 7 and navigate to the Accessibility pane (may need to activate it in Settings), 8 or use an OS-level accessibility inspector, and verify that the accessible 9 name of the list markers matches the text in the list items (excluding 10 quotation marks). 11 12 <br><br> 13 14 The following issue discusses ways to automate these tests: 15 16 <br><br> 17 18 https://github.com/web-platform-tests/wpt/issues/8355 19 </p> 20 <style> 21 @counter-style base { 22 system: cyclic; 23 symbols: 'One' 'Two' 'Three'; 24 suffix: '. '; 25 } 26 27 @counter-style explicit-bullets { 28 system: extends base; 29 speak-as: bullets; 30 } 31 @counter-style explicit-numbers { 32 system: extends base; 33 speak-as: numbers; 34 } 35 @counter-style explicit-words { 36 system: extends base; 37 speak-as: words; 38 } 39 40 @counter-style auto-alphabetic { 41 system: alphabetic; 42 symbols: 'One' 'Two' 'Three'; 43 suffix: '. '; 44 speak-as: auto; 45 } 46 @counter-style auto-cyclic { 47 system: cyclic; 48 symbols: 'One' 'Two' 'Three'; 49 suffix: '. '; 50 speak-as: auto; 51 } 52 @counter-style auto-extends { 53 system: extends base; 54 speak-as: auto; 55 } 56 @counter-style auto-fixed { 57 system: fixed; 58 symbols: 'One' 'Two' 'Three'; 59 suffix: '. '; 60 speak-as: auto; 61 } 62 @counter-style auto-symbolic { 63 system: symbolic; 64 symbols: 'One' 'Two' 'Three'; 65 suffix: '. '; 66 speak-as: auto; 67 } 68 @counter-style auto-numeric { 69 system: numeric; 70 symbols: 'Zero' 'One' 'Two' 'Three'; 71 suffix: '. '; 72 speak-as: auto; 73 } 74 @counter-style auto-additive { 75 system: additive; 76 additive-symbols: 3 'Three', 2 'Two', 1 'One'; 77 suffix: '. '; 78 speak-as: auto; 79 } 80 81 @counter-style reference-bullets { 82 system: fixed; 83 symbols: 'Yi' 'Er' 'San'; 84 suffix: '> '; 85 speak-as: explicit-bullets; 86 } 87 @counter-style reference-numbers { 88 system: fixed; 89 symbols: 'Yi' 'Er' 'San'; 90 suffix: '> '; 91 speak-as: explicit-numbers; 92 } 93 @counter-style reference-words { 94 system: fixed; 95 symbols: 'Yi' 'Er' 'San'; 96 suffix: '> '; 97 speak-as: explicit-words; 98 } 99 100 </style> 101 <body> 102 <ul style="list-style-type: disc"> 103 <li>"• "</li> 104 </ul> 105 <ul style="list-style-type: circle"> 106 <li>"◦ "</li> 107 </ul> 108 <ul style="list-style-type: square"> 109 <li>"◾ "</li> 110 </ul> 111 <ul style="list-style-type: disclosure-open"> 112 <li>"▾ "</li> 113 </ul> 114 <ul style="list-style-type: disclosure-closed"> 115 <li>"▸ "</li> 116 </ul> 117 118 <ul style="list-style-type: explicit-bullets"> 119 <li>"• "</li> 120 <li>"• "</li> 121 <li>"• "</li> 122 </ul> 123 <ul style="list-style-type: explicit-numbers"> 124 <li>"1. "</li> 125 <li>"2. "</li> 126 <li>"3. "</li> 127 </ul> 128 <ul style="list-style-type: explicit-words"> 129 <li>"One. "</li> 130 <li>"Two. "</li> 131 <li>"Three. "</li> 132 </ul> 133 134 <ul style="list-style-type: auto-alphabetic"> 135 <li>"One. "</li> 136 <li>"Two. "</li> 137 <li>"Three. "</li> 138 </ul> 139 <ul style="list-style-type: auto-cyclic"> 140 <li>"• "</li> 141 <li>"• "</li> 142 <li>"• "</li> 143 </ul> 144 <ul style="list-style-type: auto-extends"> 145 <li>"• "</li> 146 <li>"• "</li> 147 <li>"• "</li> 148 </ul> 149 <ul style="list-style-type: auto-fixed"> 150 <li>"1. "</li> 151 <li>"2. "</li> 152 <li>"3. "</li> 153 </ul> 154 <ul style="list-style-type: auto-symbolic"> 155 <li>"1. "</li> 156 <li>"2. "</li> 157 <li>"3. "</li> 158 </ul> 159 <ul style="list-style-type: auto-numeric"> 160 <li>"1. "</li> 161 <li>"2. "</li> 162 <li>"3. "</li> 163 </ul> 164 <ul style="list-style-type: auto-additive"> 165 <li>"1. "</li> 166 <li>"2. "</li> 167 <li>"3. "</li> 168 </ul> 169 170 <ul style="list-style-type: reference-bullets"> 171 <li>"• "</li> 172 <li>"• "</li> 173 <li>"• "</li> 174 </ul> 175 <ul style="list-style-type: reference-numbers"> 176 <li>"1> "</li> 177 <li>"2> "</li> 178 <li>"3> "</li> 179 </ul> 180 <ul style="list-style-type: reference-words"> 181 <li>"One> "</li> 182 <li>"Two> "</li> 183 <li>"Three> "</li> 184 </ul> 185 186 </body>