-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuilder-example.mjs
287 lines (287 loc) · 87.8 KB
/
builder-example.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
[
{
tags: [
'www.htmhell.dev',
'unicode',
'pdf',
'javascript',
'css',
'codepen'
],
stack: [
'slug',
'domain',
'mercury',
'fetch',
'open-graph',
'detectLanguage',
'matchContainer',
'restoreImages',
'restoreCodeSnippets',
'cleanHidden',
'cleanDisqus',
'createMarkdown',
'getTags'
],
dom: { mercury: [JSDOM], original: [JSDOM], matched: HTMLDivElement {} },
openGraph: {
twitterCard: 'summary_large_image',
twitterTitle: 'HTMHell - #20 HTMHell special: close buttons',
twitterDescription: 'A collection of bad practices in HTML, copied from real websites.',
twitterSite: '@mmatuzo',
twitterCreator: '@mmatuzo',
ogTitle: 'HTMHell - #20 HTMHell special: close buttons',
ogDescription: 'A collection of bad practices in HTML, copied from real websites.',
ogUrl: '/20-close-buttons/',
ogSiteName: 'HTMHell - #20 HTMHell special: close buttons',
ogLocale: 'en_GB',
ogType: 'website',
ogImage: [Object],
twitterImage: [Object]
},
html: {
mercury: '<div class="entry"><div class="section"><p>This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:</p><p>🔥 the close button. 🔥</p><p>In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.</p><p>After less than 2 hours of research, HTMHell presents a collection of 11 different bad practices.</p><h2 id="pattern-1-div-and-background-image"><a href="#pattern-1-div-and-background-image"><span>#</span></a> Pattern 1: div and background image</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.close::after</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>"close.png"<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><h3 id="issues-and-how-to-fix-them"><a href="#issues-and-how-to-fix-them"><span>#</span></a> Issues and how to fix them</h3><ol><li>The <code><div></code> element is an element of last resort, for when no other element is suitable. Use of the <code><div></code> element instead of more appropriate elements leads to poor accessibility.</li><li>A click event on a <code>div</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li><li>A <code>div</code> isn’t keyboard focusable.</li><li>There’s no text alternative for the background image.</li><li>Screen readers announce: Nothing.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> ✕</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><ol><li>✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li><li>See Pattern 1 for details about the <code><div></code>.</li><li>Screen readers may announce: something like “multiplication x” or “times”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fas fa-times<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.fa-times::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'\\f00d'</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><ol><li>Screen readers may announce CSS generated content.<sup><a href="#resources">1</a></sup></li><li><a href="https://fontawesome.com/v4.7.0/accessibility/">Font Awesome advises to hide icons semantically</a> by settings <code>aria-hidden="true"</code> on the <code><i></code> element.</li><li>Font Awesome adds Unicode content via the <code>::before</code> pseudo element. Assistive technology may announce the Unicode equivalent, which in this specific example would be “times” since <a href="https://fontawesome.com/icons/times">fa-times is not a cross but a multiplication sign</a>. (Please note: Talkback and VoiceOver didn’t announce anything in this example.)</li><li>The <code>i</code> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.<sup><a href="#resources">2</a></sup> If you just want italic text, use <code>font-style: italic;</code> in CSS.</li><li>See Pattern 1 for details about the <code><div></code>.</li><li>Screen readers may announce: “times”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">a::after</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"×"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><ol><li>If the <code>a</code> element has an <code>href</code> attribute, it represents a link to another resource like a page or a <abbr>PDF</abbr> document.</li><li>The purpose of the element in this example is to trigger an action on the same page with JavaScript. The <code>button</code> element with the type button is more suitable because it has no default behaviour and it’s designed to trigger actions on user input.</li><li>If you’re not sure when to use <code><a></code> or <code><button></code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li><li>Screen readers may announce CSS generated content.<sup><a href="#resources">1</a></sup> ✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li><li>Screen readers may announce: “link, times”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> Close</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.close::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"\\e028"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><ol><li>Nice try, but it’s still a link and not a button.</li><li>See Pattern 4 for details about <code><a></code> and CSS generated content.</li><li>Screen readers may announce: “link, times close”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><ol><li>Another nice try, but a link without <code>href</code> is still not a button.</li><li>If the <code><a></code> element has no <code>href</code> attribute, then the element represents a placeholder for where a link might otherwise have been placed.<sup><a href="#resources">2</a></sup></li><li>If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an <code>href</code> attribute or a <code><button></code>, depending on what's happening on click.</li><li>Placeholder links aren't focusable.</li><li>If you’re not sure when to use <code><a></code> or <code><button></code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li><li>Screen readers may announce: “times, clickable.”</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close();<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><ol><li>There’s no text alternative for the image. Screen readers may announce the filename instead.</li><li>See Pattern 6 for details about placeholder links.</li><li>Screen readers may announce: “close.png, image.”</li></ol></div><div class="section bad"><pre class="language-html"><code class="language-html"><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">[type="radio"]</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><ol><li>When accessibility advocates say “<a href="https://www.youtube.com/watch?v=CZGqnp06DnI">Just use button</a>” they mean the <code>button</code> element, not radio buttons.</li><li>Radio buttons are used in radio button groups describing <strong>a set of related options</strong>.</li><li>The SVG has no text alternative. Read <a href="https://www.deque.com/blog/creating-accessible-svgs/">Creating Accessible SVGs</a> by <a href="https://cariefisher.com/">Carie Fisher</a> to learn how to make SVGs accessible.</li><li><code>display: none</code> on the <code>input</code> make the <code>label</code> inaccessible, too.</li><li>Screen readers may announce: Nothing.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> ×</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><ol><li>✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li><li>Screen readers may announce: “times, button”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>X<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><ol><li>Setting button semantics explicitly using the <code>role</code> attribute isn’t necessary, there’s an element for that (<code>button</code>).</li><li>You don’t need the <code>tabindex</code> attribute if you use a <code>button</code>. HTML buttons are focusable by default.</li><li>See Pattern 1 for details about the <code><div></code>.</li><li>The letter X is not a close icon.</li><li>Screen readers may announce: “X, button”.</li></ol><blockquote>Using "x" for your close buttons is like using salt in your coffee cause it looks the same as sugar.</blockquote><cite><a href="https://twitter.com/mxbck/status/1187446513284325376">Max Böck</a></cite></div><div class="section"><p>You can find all <a href="https://codepen.io/matuzo/pen/qBOvagg?editors=1100">bad practices on CodePen</a>.</p></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> Close</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><ol><li>Text only: easy to implement and comprehensible.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> Close</span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><ol><li>If you really have to use the times icon, hide it from screen readers by wrapping it in a <code>span</code> with <code>aria-hidden="true"</code>.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.sr-only</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>0 0 0 0<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">margin</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><ol><li>Unfortunately, there’s no native way of hiding content only visually.<br>The <code>.sr-only</code> class makes sure that content is visually hidden but still accessible to screen reader users.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><ol><li>If you don’t want to show text on screen, provide a text alternative for your icon or SVG by adding <code>aria-label</code> to the button.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><p>For the sake of completeness, a close button with a Font Awesome icon.</p><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-times<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre></div><div class="section"><p>Sometimes it makes sense to use more descriptive labels like “Close dialog”, “Close gallery”, or “Close ad”.</p><p>If you use third party solutions for modals, dialogs, etc., please check how they’ve been implemented before you add them to your site. Don’t rely on others for code quality and accessibility.</p><p>You can find all <a href="https://codepen.io/matuzo/pen/zYvbmvm?editors=1100">close button best practices on CodePen</a>.</p></div></div>',
original: '<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTMHell - #20 HTMHell special: close buttons</title><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#d72b2b"><link type="application/atom+xml" rel="alternate" href="/feed.xml" title="Manuel Matuzović"><meta name="msapplication-TileColor" content="#ffffff"><meta name="theme-color" content="#ffffff"><meta name="description" content="A collection of bad practices in HTML, copied from real websites."><meta name="image" content="https://htmhell.dev/images/og/20-close-buttons.png?s=test"><meta itemprop="name" content="HTMHell - #20 HTMHell special: close buttons"><meta itemprop="description" content="A collection of bad practices in HTML, copied from real websites."><meta itemprop="image" content="https://htmhell.dev/images/og/20-close-buttons.png?s=test"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="HTMHell - #20 HTMHell special: close buttons"><meta name="twitter:description" content="A collection of bad practices in HTML, copied from real websites."><meta name="twitter:site" content="@mmatuzo"><meta name="twitter:creator" content="@mmatuzo"><meta name="twitter:image:src" content="https://htmhell.dev/images/og/20-close-buttons.png?s=240210"><meta property="og:title" content="HTMHell - #20 HTMHell special: close buttons"><meta property="og:description" content="A collection of bad practices in HTML, copied from real websites."><meta property="og:image" content="https://htmhell.dev/images/og/20-close-buttons.png?s=test"><meta property="og:url" content="/20-close-buttons/"><meta property="og:site_name" content="HTMHell - #20 HTMHell special: close buttons"><meta property="og:locale" content="en_GB"><meta property="og:type" content="website"><link rel="stylesheet" href="/assets/min/style.min.css"><script>if ("serviceWorker" in navigator) {\n' +
' navigator.serviceWorker.register("/service-worker.js");\n' +
` }</script></head><body><div class="topbanner"><div class="wrapper"><p>HTMHell supports <a href="https://blacklivesmatter.com/" rel="noopener">Black Lives Matter</a>. ✊🏾 Code is always political.</p></div></div><div class="wrapper"><header class="site-header"><a href="#content" class="skip-link">Skip to content</a><nav class="nav" aria-label="Main"><ol class="nav__items"><li class="nav__item"><a href="/contribution" class="nav__link">Contribution</a></li><li class="nav__item"><a href="https://github.com/matuzo/HTMHell" class="nav__link" rel="noopener">Github</a></li><li class="nav__item"><a href="https://htmhell.dev/feed.xml" class="nav__link">Feed</a></li><li class="nav__item"><a class="site-twitter" href="https://twitter.com/htm_hell" rel="noopener"><span class="u-hidden">HTMHell on Twitter</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="28" aria-hidden="true"><path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"/></svg></a></li><li class="nav__item"><a href="/" class="site-logo-link"><span class="u-hidden">HTMHell homepage</span> <svg xmlns="http://www.w3.org/2000/svg" height="184" viewBox="0 0 729.38 668.18" class="site-logo" aria-hidden="true"></svg></a></li></ol></nav></header><main class="site-content" id="content"><div class="entry-header"><h1 class="entry-heading">#20 HTMHell special: close buttons</h1>submitted on <time datetime="2020-05-23">May 23, 2020</time> by <a href="https://twitter.com/mmatuzo" rel="noopener">Manuel</a></div><div class="entry"><div class="section"><p>This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:</p><p>🔥 the close button. 🔥</p><p>In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.</p><p>After less than 2 hours of research, HTMHell presents a collection of 11 different bad practices.</p><h2 id="pattern-1-div-and-background-image"><a href="#pattern-1-div-and-background-image"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 1: div and background image</span></a> Pattern 1: div and background image</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.close::after</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>"close.png"<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><h3 id="issues-and-how-to-fix-them"><a href="#issues-and-how-to-fix-them"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>The <code><div></code> element is an element of last resort, for when no other element is suitable. Use of the <code><div></code> element instead of more appropriate elements leads to poor accessibility.</li><li>A click event on a <code>div</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li><li>A <code>div</code> isn’t keyboard focusable.</li><li>There’s no text alternative for the background image.</li><li>Screen readers announce: Nothing.</li></ol></div><div class="section"><h2 id="pattern-2-div-and-icon"><a href="#pattern-2-div-and-icon"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 2: div and icon</span></a> Pattern 2: div and icon</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> ✕</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><h3 id="issues-and-how-to-fix-them-2"><a href="#issues-and-how-to-fix-them-2"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li><li>See Pattern 1 for details about the <code><div></code>.</li><li>Screen readers may announce: something like “multiplication x” or “times”.</li></ol></div><div class="section"><h2 id="pattern-3-font-awesome-icons"><a href="#pattern-3-font-awesome-icons"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 3: Font Awesome icons</span></a> Pattern 3: Font Awesome icons</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fas fa-times<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.fa-times::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'\\f00d'</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><h3 id="issues-and-how-to-fix-them-3"><a href="#issues-and-how-to-fix-them-3"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>Screen readers may announce CSS generated content.<sup><a href="#resources"><span class="u-hidden">Footnote</span>1</a></sup></li><li><a href="https://fontawesome.com/v4.7.0/accessibility/">Font Awesome advises to hide icons semantically</a> by settings <code>aria-hidden="true"</code> on the <code><i></code> element.</li><li>Font Awesome adds Unicode content via the <code>::before</code> pseudo element. Assistive technology may announce the Unicode equivalent, which in this specific example would be “times” since <a href="https://fontawesome.com/icons/times">fa-times is not a cross but a multiplication sign</a>. (Please note: Talkback and VoiceOver didn’t announce anything in this example.)</li><li>The <code>i</code> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.<sup><a href="#resources"><span class="u-hidden">Footnote</span>2</a></sup> If you just want italic text, use <code>font-style: italic;</code> in CSS.</li><li>See Pattern 1 for details about the <code><div></code>.</li><li>Screen readers may announce: “times”.</li></ol></div><div class="section"><h2 id="pattern-4-a-close-link"><a href="#pattern-4-a-close-link"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 4: A close link</span></a> Pattern 4: A close link</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">a::after</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"×"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><h3 id="issues-and-how-to-fix-them-4"><a href="#issues-and-how-to-fix-them-4"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>If the <code>a</code> element has an <code>href</code> attribute, it represents a link to another resource like a page or a <abbr title="Portable Document Format">PDF</abbr> document.</li><li>The purpose of the element in this example is to trigger an action on the same page with JavaScript. The <code>button</code> element with the type button is more suitable because it has no default behaviour and it’s designed to trigger actions on user input.</li><li>If you’re not sure when to use <code><a></code> or <code><button></code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li><li>Screen readers may announce CSS generated content.<sup><a href="#resources"><span class="u-hidden">Footnote</span>1</a></sup> ✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li><li>Screen readers may announce: “link, times”.</li></ol></div><div class="section"><h2 id="pattern-5-a-close-link-with-text"><a href="#pattern-5-a-close-link-with-text"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 5: A close link with text</span></a> Pattern 5: A close link with text</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> Close</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.close::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"\\e028"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><h3 id="issues-and-how-to-fix-them-5"><a href="#issues-and-how-to-fix-them-5"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>Nice try, but it’s still a link and not a button.</li><li>See Pattern 4 for details about <code><a></code> and CSS generated content.</li><li>Screen readers may announce: “link, times close”.</li></ol></div><div class="section"><h2 id="pattern-6-a-close-link-without-the-href-attribute"><a href="#pattern-6-a-close-link-without-the-href-attribute"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 6: A close link without the </span></a>Pattern 6: A close link without the <code>href</code> attribute</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><h3 id="issues-and-how-to-fix-them-6"><a href="#issues-and-how-to-fix-them-6"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>Another nice try, but a link without <code>href</code> is still not a button.</li><li>If the <code><a></code> element has no <code>href</code> attribute, then the element represents a placeholder for where a link might otherwise have been placed.<sup><a href="#resources"><span class="u-hidden">Footnote</span>2</a></sup></li><li>If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an <code>href</code> attribute or a <code><button></code>, depending on what's happening on click.</li><li>Placeholder links aren't focusable.</li><li>If you’re not sure when to use <code><a></code> or <code><button></code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li><li>Screen readers may announce: “times, clickable.”</li></ol></div><div class="section"><h2 id="pattern-7-placeholder-link-and-img"><a href="#pattern-7-placeholder-link-and-img"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 7: Placeholder link and img</span></a> Pattern 7: Placeholder link and img</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close();<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></span></code></pre><h3 id="issues-and-how-to-fix-them-7"><a href="#issues-and-how-to-fix-them-7"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>There’s no text alternative for the image. Screen readers may announce the filename instead.</li><li>See Pattern 6 for details about placeholder links.</li><li>Screen readers may announce: “close.png, image.”</li></ol></div><div class="section bad"><h2 id="pattern-8-radio-button"><a href="#pattern-8-radio-button"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 8: Radio button</span></a> Pattern 8: Radio button</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">[type="radio"]</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><h3 id="issues-and-how-to-fix-them-8"><a href="#issues-and-how-to-fix-them-8"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>When accessibility advocates say “<a href="https://www.youtube.com/watch?v=CZGqnp06DnI">Just use button</a>” they mean the <code>button</code> element, not radio buttons.</li><li>Radio buttons are used in radio button groups describing <strong>a set of related options</strong>.</li><li>The SVG has no text alternative. Read <a href="https://www.deque.com/blog/creating-accessible-svgs/">Creating Accessible SVGs</a> by <a href="https://cariefisher.com/">Carie Fisher</a> to learn how to make SVGs accessible.</li><li><code>display: none</code> on the <code>input</code> make the <code>label</code> inaccessible, too.</li><li>Screen readers may announce: Nothing.</li></ol></div><div class="section"><h2 id="pattern-9-button-with-icon"><a href="#pattern-9-button-with-icon"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 9: Button with icon</span></a> Pattern 9: Button with icon</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> ×</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><h3 id="issues-and-how-to-fix-them-9"><a href="#issues-and-how-to-fix-them-9"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li><li>Screen readers may announce: “times, button”.</li></ol></div><div class="section"><h2 id="pattern-10-button-with-svg"><a href="#pattern-10-button-with-svg"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 10: Button with svg</span></a> Pattern 10: Button with svg</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><h3 id="issues-and-how-to-fix-them-10"><a href="#issues-and-how-to-fix-them-10"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>The SVG has no text alternative. Read <a href="https://www.deque.com/blog/creating-accessible-svgs/">Creating Accessible SVGs</a> by <a href="https://cariefisher.com/">Carie Fisher</a> to learn how to make SVGs accessible.</li><li>Screen readers may announce: “button”.</li></ol></div><div class="section"><h2 id="pattern-11-the-good-ol-x"><a href="#pattern-11-the-good-ol-x"><span aria-hidden="true">#</span><span class="u-hidden">Pattern 11: The good ol' X</span></a> Pattern 11: The good ol' X</h2><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>X<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span></code></pre><h3 id="issues-and-how-to-fix-them-11"><a href="#issues-and-how-to-fix-them-11"><span aria-hidden="true">#</span><span class="u-hidden">Issues and how to fix them</span></a> Issues and how to fix them</h3><ol><li>Setting button semantics explicitly using the <code>role</code> attribute isn’t necessary, there’s an element for that (<code>button</code>).</li><li>You don’t need the <code>tabindex</code> attribute if you use a <code>button</code>. HTML buttons are focusable by default.</li><li>See Pattern 1 for details about the <code><div></code>.</li><li>The letter X is not a close icon.</li><li>Screen readers may announce: “X, button”.</li></ol><blockquote>Using "x" for your close buttons is like using salt in your coffee cause it looks the same as sugar.</blockquote><cite><a href="https://twitter.com/mxbck/status/1187446513284325376">Max Böck</a></cite></div><div class="section"><p>You can find all <a href="https://codepen.io/matuzo/pen/qBOvagg?editors=1100">bad practices on CodePen</a>.</p></div><div class="section"><h2 id="alternatives"><a href="#alternatives"><span aria-hidden="true">#</span><span class="u-hidden">Alternatives</span></a> Alternatives</h2><h3 id="solution-1-a-button-with-visible-text-and-no-icon"><a href="#solution-1-a-button-with-visible-text-and-no-icon"><span aria-hidden="true">#</span><span class="u-hidden">Solution 1: A button with visible text and no icon.</span></a> Solution 1: A button with visible text and no icon.</h3><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> Close</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><p><button type="button">Close</button></p><ol><li>Text only: easy to implement and comprehensible.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><h3 id="solution-2-a-button-with-visible-text-and-only-visually-accessible-icon"><a href="#solution-2-a-button-with-visible-text-and-only-visually-accessible-icon"><span aria-hidden="true">#</span><span class="u-hidden">Solution 2: A button with visible text and only visually accessible icon.</span></a> Solution 2: A button with visible text and only visually accessible icon.</h3><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> Close</span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><button type="button">Close <span aria-hidden="true">×</span></button><ol><li>If you really have to use the times icon, hide it from screen readers by wrapping it in a <code>span</code> with <code>aria-hidden="true"</code>.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><h3 id="solution-3-a-button-with-hidden-text-and-only-visually-accessible-icon"><a href="#solution-3-a-button-with-hidden-text-and-only-visually-accessible-icon"><span aria-hidden="true">#</span><span class="u-hidden">Solution 3: A button with hidden text and only visually accessible icon.</span></a> Solution 3: A button with hidden text and only visually accessible icon.</h3><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.sr-only</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>0 0 0 0<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">margin</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre><button type="button"><span class="u-hidden">Close</span> <span aria-hidden="true">×</span></button><ol><li>Unfortunately, there’s no native way of hiding content only visually.<br>The <code>.sr-only</code> class makes sure that content is visually hidden but still accessible to screen reader users.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><h3 id="solution-4-a-button-with-hidden-text-and-only-visually-accessible-icon"><a href="#solution-4-a-button-with-hidden-text-and-only-visually-accessible-icon"><span aria-hidden="true">#</span><span class="u-hidden">Solution 4: A button with hidden text and only visually accessible icon.</span></a> Solution 4: A button with hidden text and only visually accessible icon.</h3><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>×<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre><button type="button" aria-label="Close"><span aria-hidden="true">×</span></button><ol><li>If you don’t want to show text on screen, provide a text alternative for your icon or SVG by adding <code>aria-label</code> to the button.</li><li>Screen readers may announce: “Close, button”.</li></ol></div><div class="section"><h3 id="solution-5-font-awesome"><a href="#solution-5-font-awesome"><span aria-hidden="true">#</span><span class="u-hidden">Solution 5: Font Awesome</span></a> Solution 5: Font Awesome</h3><p>For the sake of completeness, a close button with a Font Awesome icon.</p><pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-times<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span></code></pre></div><div class="section"><h3 id="general-remarks"><a href="#general-remarks"><span aria-hidden="true">#</span><span class="u-hidden">General remarks</span></a> General remarks</h3><p>Sometimes it makes sense to use more descriptive labels like “Close dialog”, “Close gallery”, or “Close ad”.</p><p>If you use third party solutions for modals, dialogs, etc., please check how they’ve been implemented before you add them to your site. Don’t rely on others for code quality and accessibility.</p><p>You can find all <a href="https://codepen.io/matuzo/pen/zYvbmvm?editors=1100">close button best practices on CodePen</a>.</p></div><div class="section"><h2 id="resources">Resources</h2><ol><li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content</a></li><li><a href="https://html.spec.whatwg.org/#the-a-element">The a element</a></li><li><a href="https://www.scottohara.me/note/2019/07/17/placeholder-link.html">The accessibility of placeholder links</a></li></ol></div></div><nav aria-label="Select next or previous entry"><ol class="page-nav"><li class="page-nav__item page-nav__item--prev"><a class="page-nav__link page-nav__link--prev" href="/19-heading-in-the-wrong-direction/"><div class="page-nav__label">Previous</div>#19 heading in the wrong direction</a></li></ol></nav></main><footer class="site-footer">built with <a href="https://www.11ty.dev/" rel="noopener">eleventy</a> and ❤️ in Vienna by <a href="https://twitter.com/mmatuzo" rel="noopener">@mmatuzo</a><br><small>Twitter icon made by <a href="https://www.flaticon.com/authors/pixel-perfect">Pixel Perfect</a> from www.flaticon.com</small></footer></div><script src="/assets/min/script.min.js"></script></body></html>`
},
mercury: [ [Object] ],
base: 'https://www.htmhell.dev/20-close-buttons/',
domain: 'www.htmhell.dev',
slug: '20-close-buttons',
url: 'https://www.htmhell.dev/20-close-buttons/',
assignees: [ 'silentimp' ],
TMP_DIR_NAME: './tmp',
TMP_IMAGE_DIR_NAME: './images',
language: [ [Object] ],
markdown: 'This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:\n' +
'\n' +
'🔥 the close button. 🔥\n' +
'\n' +
'In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.\n' +
'\n' +
'After less than 2 hours of research, HTMHell presents a collection of 11 different bad practices.\n' +
'\n' +
'## [#][1] Pattern 1: div and background image\n' +
'\n' +
'```html\n' +
'<div class="close"></div>\n' +
'```\n' +
'\n' +
'```css\n' +
'.close::after {\n' +
' background: url("close.png");\n' +
' content: "";\n' +
'}\n' +
'```\n' +
'\n' +
'### [#][2] Issues and how to fix them\n' +
'\n' +
'1. The `<div>` element is an element of last resort, for when no other element is suitable. Use of the `<div>` element instead of more appropriate elements leads to poor accessibility.\n' +
'2. A click event on a `div` triggers only on click. A click event on a `button` triggers on click and if the user presses the Enter or Space key.\n' +
'3. A `div` isn’t keyboard focusable.\n' +
'4. There’s no text alternative for the background image.\n' +
'5. Screen readers announce: Nothing.\n' +
'\n' +
'```html\n' +
'<div class="close">✕</div>\n' +
'```\n' +
'\n' +
'1. ✕ doesn’t represent _close_ or _crossed out_, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.\n' +
'2. See Pattern 1 for details about the `<div>`.\n' +
'3. Screen readers may announce: something like “multiplication x” or “times”.\n' +
'\n' +
'```html\n' +
'<div class="close"><i class="fas fa-times"></i></div>\n' +
'```\n' +
'\n' +
'```css\n' +
'.fa-times::before {\n' +
' content: "\\f00d";\n' +
'}\n' +
'```\n' +
'\n' +
'1. Screen readers may announce CSS generated content.[1][3]\n' +
'2. [Font Awesome advises to hide icons semantically][4] by settings `aria-hidden="true"` on the `<i>` element.\n' +
'3. Font Awesome adds Unicode content via the `::before` pseudo element. Assistive technology may announce the Unicode equivalent, which in this specific example would be “times” since [fa-times is not a cross but a multiplication sign][5]. (Please note: Talkback and VoiceOver didn’t announce anything in this example.)\n' +
'4. The `i` element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.[2][6] If you just want italic text, use `font-style: italic;` in CSS.\n' +
'5. See Pattern 1 for details about the `<div>`.\n' +
'6. Screen readers may announce: “times”.\n' +
'\n' +
'```html\n' +
'<a href="#" class="close"></a>\n' +
'```\n' +
'\n' +
'```css\n' +
'a::after {\n' +
' font-size: 28px;\n' +
' display: block;\n' +
' content: "×";\n' +
'}\n' +
'```\n' +
'\n' +
'1. If the `a` element has an `href` attribute, it represents a link to another resource like a page or a PDF document.\n' +
'2. The purpose of the element in this example is to trigger an action on the same page with JavaScript. The `button` element with the type button is more suitable because it has no default behaviour and it’s designed to trigger actions on user input.\n' +
'3. If you’re not sure when to use `<a>` or `<button>`, watch [The Links vs. Buttons Showdown][7] by [Marcy Sutton][8].\n' +
'4. Screen readers may announce CSS generated content.[1][9] ✕ doesn’t represent _close_ or _crossed out_, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.\n' +
'5. Screen readers may announce: “link, times”.\n' +
'\n' +
'```html\n' +
'<a href="#" class="close"> Close</a>\n' +
'```\n' +
'\n' +
'```css\n' +
'.close::before {\n' +
' content: "\\e028";\n' +
'}\n' +
'```\n' +
'\n' +
'1. Nice try, but it’s still a link and not a button.\n' +
'2. See Pattern 4 for details about `<a>` and CSS generated content.\n' +
'3. Screen readers may announce: “link, times close”.\n' +
'\n' +
'```html\n' +
'<a class="close" onclick="close()">×</a>\n' +
'```\n' +
'\n' +
'1. Another nice try, but a link without `href` is still not a button.\n' +
'2. If the `<a>` element has no `href` attribute, then the element represents a placeholder for where a link might otherwise have been placed.[2][10]\n' +
"3. If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an `href` attribute or a `<button>`, depending on what's happening on click.\n" +
"4. Placeholder links aren't focusable.\n" +
'5. If you’re not sure when to use `<a>` or `<button>`, watch [The Links vs. Buttons Showdown][11] by [Marcy Sutton][12].\n' +
'6. Screen readers may announce: “times, clickable.”\n' +
'\n' +
'```html\n' +
'<a onclick="close();"> <img src="close.png" /> </a>\n' +
'```\n' +
'\n' +
'1. There’s no text alternative for the image. Screen readers may announce the filename instead.\n' +
'2. See Pattern 6 for details about placeholder links.\n' +
'3. Screen readers may announce: “close.png, image.”\n' +
'\n' +
'```html\n' +
'<label class="close" for="close"> <svg>…</svg> </label>\n' +
'<input id="close" type="radio" />\n' +
'```\n' +
'\n' +
'```css\n' +
'[type="radio"] {\n' +
' display: none;\n' +
'}\n' +
'```\n' +
'\n' +
'1. When accessibility advocates say “[Just use button][13]” they mean the `button` element, not radio buttons.\n' +
'2. Radio buttons are used in radio button groups describing **a set of related options**.\n' +
'3. The SVG has no text alternative. Read [Creating Accessible SVGs][14] by [Carie Fisher][15] to learn how to make SVGs accessible.\n' +
'4. `display: none` on the `input` make the `label` inaccessible, too.\n' +
'5. Screen readers may announce: Nothing.\n' +
'\n' +
'```html\n' +
'<button class="close" type="button">×</button>\n' +
'```\n' +
'\n' +
'1. ✕ doesn’t represent _close_ or _crossed out_, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.\n' +
'2. Screen readers may announce: “times, button”.\n' +
'\n' +
'```html\n' +
'<button class="close"><svg>…</svg></button>\n' +
'```\n' +
'\n' +
'```html\n' +
'<div role="button" tabindex="0">X</div>\n' +
'```\n' +
'\n' +
'1. Setting button semantics explicitly using the `role` attribute isn’t necessary, there’s an element for that (`button`).\n' +
'2. You don’t need the `tabindex` attribute if you use a `button`. HTML buttons are focusable by default.\n' +
'3. See Pattern 1 for details about the `<div>`.\n' +
'4. The letter X is not a close icon.\n' +
'5. Screen readers may announce: “X, button”.\n' +
'\n' +
'> Using "x" for your close buttons is like using salt in your coffee cause it looks the same as sugar.\n' +
'\n' +
'[Max Böck][16]\n' +
'\n' +
'You can find all [bad practices on CodePen][17].\n' +
'\n' +
'```html\n' +
'<button type="button">Close</button>\n' +
'```\n' +
'\n' +
'1. Text only: easy to implement and comprehensible.\n' +
'2. Screen readers may announce: “Close, button”.\n' +
'\n' +
'```html\n' +
'<button type="button">Close <span aria-hidden="true">×</span></button>\n' +
'```\n' +
'\n' +
'1. If you really have to use the times icon, hide it from screen readers by wrapping it in a `span` with `aria-hidden="true"`.\n' +
'2. Screen readers may announce: “Close, button”.\n' +
'\n' +
'```html\n' +
'<button type="button">\n' +
' <span class="sr-only">Close</span> <span aria-hidden="true">×</span>\n' +
'</button>\n' +
'```\n' +
'\n' +
'```css\n' +
'.sr-only {\n' +
' position: absolute;\n' +
' white-space: nowrap;\n' +
' width: 1px;\n' +
' height: 1px;\n' +
' overflow: hidden;\n' +
' border: 0;\n' +
' padding: 0;\n' +
' clip: rect(0 0 0 0);\n' +
' clip-path: inset(50%);\n' +
' margin: -1px;\n' +
'}\n' +
'```\n' +
'\n' +
'1. Unfortunately, there’s no native way of hiding content only visually. \n' +
' The `.sr-only` class makes sure that content is visually hidden but still accessible to screen reader users.\n' +
'2. Screen readers may announce: “Close, button”.\n' +
'\n' +
'```html\n' +
'<button type="button" aria-label="Close">\n' +
' <span aria-hidden="true">×</span>\n' +
'</button>\n' +
'```\n' +
'\n' +
'1. If you don’t want to show text on screen, provide a text alternative for your icon or SVG by adding `aria-label` to the button.\n' +
'2. Screen readers may announce: “Close, button”.\n' +
'\n' +
'For the sake of completeness, a close button with a Font Awesome icon.\n' +
'\n' +
'```html\n' +
'<button type="button" class="close" aria-label="Close">\n' +
' <span class="fa fa-times" aria-hidden="true"></span>\n' +
'</button>\n' +
'```\n' +
'\n' +
'Sometimes it makes sense to use more descriptive labels like “Close dialog”, “Close gallery”, or “Close ad”.\n' +
'\n' +
'If you use third party solutions for modals, dialogs, etc., please check how they’ve been implemented before you add them to your site. Don’t rely on others for code quality and accessibility.\n' +
'\n' +
'You can find all [close button best practices on CodePen][18].\n' +
'\n' +
'[1]: #pattern-1-div-and-background-image\n' +
'[2]: #issues-and-how-to-fix-them\n' +
'[3]: #resources\n' +
'[4]: https://fontawesome.com/v4.7.0/accessibility/\n' +
'[5]: https://fontawesome.com/icons/times\n' +
'[6]: #resources\n' +
'[7]: https://www.youtube.com/watch?v=8XjwDq9zG4I\n' +
'[8]: https://twitter.com/marcysutton\n' +
'[9]: #resources\n' +
'[10]: #resources\n' +
'[11]: https://www.youtube.com/watch?v=8XjwDq9zG4I\n' +
'[12]: https://twitter.com/marcysutton\n' +
'[13]: https://www.youtube.com/watch?v=CZGqnp06DnI\n' +
'[14]: https://www.deque.com/blog/creating-accessible-svgs/\n' +
'[15]: https://cariefisher.com/\n' +
'[16]: https://twitter.com/mxbck/status/1187446513284325376\n' +
'[17]: https://codepen.io/matuzo/pen/qBOvagg?editors=1100\n' +
'[18]: https://codepen.io/matuzo/pen/zYvbmvm?editors=1100\n'
}
]