Skip to content

Commit a6c8282

Browse files
docs: consistent colons in input labels (#2557)
* docs: consistent colons in input labels * Update colons everywhere
1 parent 47b7a2f commit a6c8282

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/guide/best-practices/accessibility.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ Notice how you can include `autocomplete='on'` on the form element and it will a
163163
Provide labels to describe the purpose of all form control; linking `for` and `id`:
164164

165165
```vue-html
166-
<label for="name">Name</label>
166+
<label for="name">Name: </label>
167167
<input type="text" name="name" id="name" v-model="name" />
168168
```
169169

@@ -191,7 +191,7 @@ Explicitly setting the labels with a matching id is better supported by assistiv
191191
You can also give the input an accessible name with [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
192192

193193
```vue-html
194-
<label for="name">Name</label>
194+
<label for="name">Name: </label>
195195
<input
196196
type="text"
197197
name="name"
@@ -220,7 +220,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
220220
>
221221
<h1 id="billing">Billing</h1>
222222
<div class="form-item">
223-
<label for="name">Name:</label>
223+
<label for="name">Name: </label>
224224
<input
225225
type="text"
226226
name="name"
@@ -250,7 +250,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
250250
>
251251
<h1 id="billing">Billing</h1>
252252
<div class="form-item">
253-
<label for="name">Full Name:</label>
253+
<label for="name">Full Name: </label>
254254
<input
255255
type="text"
256256
name="name"
@@ -330,7 +330,7 @@ You can provide additional instructions and bind multiple ids inside an [`aria-l
330330
```vue-html
331331
<fieldset>
332332
<legend>Using aria-labelledby</legend>
333-
<label id="date-label" for="date">Current Date:</label>
333+
<label id="date-label" for="date">Current Date: </label>
334334
<input
335335
type="date"
336336
name="date"
@@ -346,7 +346,7 @@ Alternatively, you can attach the instructions to the input with [`aria-describe
346346
```vue-html
347347
<fieldset>
348348
<legend>Using aria-describedby</legend>
349-
<label id="dob" for="dob">Date of Birth:</label>
349+
<label id="dob" for="dob">Date of Birth: </label>
350350
<input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
351351
<p id="dob-instructions">MM/DD/YYYY</p>
352352
</fieldset>

0 commit comments

Comments
 (0)