Skip to content

docs: consistent colons in input labels #2557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 31, 2023
Merged

docs: consistent colons in input labels #2557

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a4f4d5
docs: consistent colons in input labels
andrewvasilchuk Oct 31, 2023
e508a9f
Update colons everywhere
andrewvasilchuk Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/guide/best-practices/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ Notice how you can include `autocomplete='on'` on the form element and it will a
Provide labels to describe the purpose of all form control; linking `for` and `id`:

```vue-html
<label for="name">Name</label>
<label for="name">Name: </label>
<input type="text" name="name" id="name" v-model="name" />
```

Expand Down Expand Up @@ -191,7 +191,7 @@ Explicitly setting the labels with a matching id is better supported by assistiv
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).

```vue-html
<label for="name">Name</label>
<label for="name">Name: </label>
<input
type="text"
name="name"
Expand Down Expand Up @@ -220,7 +220,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
>
<h1 id="billing">Billing</h1>
<div class="form-item">
<label for="name">Name:</label>
<label for="name">Name: </label>
<input
type="text"
name="name"
Expand Down Expand Up @@ -250,7 +250,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
>
<h1 id="billing">Billing</h1>
<div class="form-item">
<label for="name">Full Name:</label>
<label for="name">Full Name: </label>
<input
type="text"
name="name"
Expand Down Expand Up @@ -330,7 +330,7 @@ You can provide additional instructions and bind multiple ids inside an [`aria-l
```vue-html
<fieldset>
<legend>Using aria-labelledby</legend>
<label id="date-label" for="date">Current Date:</label>
<label id="date-label" for="date">Current Date: </label>
<input
type="date"
name="date"
Expand All @@ -346,7 +346,7 @@ Alternatively, you can attach the instructions to the input with [`aria-describe
```vue-html
<fieldset>
<legend>Using aria-describedby</legend>
<label id="dob" for="dob">Date of Birth:</label>
<label id="dob" for="dob">Date of Birth: </label>
<input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
<p id="dob-instructions">MM/DD/YYYY</p>
</fieldset>
Expand Down