Skip to content

Commit 08cedfe

Browse files
NataliaTepluhinaNataliaTepluhina
committed
fix: fix #329 removing redundant div
1 parent 68094be commit 08cedfe

File tree

1 file changed

+80
-37
lines changed

1 file changed

+80
-37
lines changed

‎src/guide/a11y-semantics.md

Lines changed: 80 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,16 @@ When creating a form, you can use the following elements: `<form>`, `<label>`, `
66

77
Labels are typically placed on top or to the left of the form fields:
88

9-
``` html
10-
<form action="/dataCollectionLocation" method="post" autocomplete='on'>
11-
<div v-for="item in formItems" :key="item.id" class='form-item'>
9+
```html
10+
<form action="/dataCollectionLocation" method="post" autocomplete="on">
11+
<div v-for="item in formItems" :key="item.id" class="form-item">
1212
<label :for="item.id">{{ item.label }}: </label>
13-
<input :type="item.type" :id="item.id" :name="item.id" v-model="item.value">
13+
<input
14+
:type="item.type"
15+
:id="item.id"
16+
:name="item.id"
17+
v-model="item.value"
18+
/>
1419
</div>
1520
<button type="submit">Submit</button>
1621
</form>
@@ -30,8 +35,8 @@ Notice how you can include `autocomplete='on'` on the form element and it will a
3035
Provide labels to describe the purpose of all form control; linking `for` and `id`:
3136

3237
```html
33-
<label for="name">Name</label>
34-
<input type="text" name="name" id="name" v-model="name"/>
38+
<label for="name">Name</label>
39+
<input type="text" name="name" id="name" v-model="name" />
3540
```
3641

3742
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="wvMrGqz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form Label">
@@ -51,7 +56,7 @@ Though you might have seen labels wrapping the input fields like this:
5156
```html
5257
<label>
5358
Name:
54-
<input type="text" name="name" id="name" v-model="name"/>
59+
<input type="text" name="name" id="name" v-model="name" />
5560
</label>
5661
```
5762

@@ -64,7 +69,13 @@ You can also give the input an accessible name with [`aria-label`](https://devel
6469

6570
```html
6671
<label for="name">Name</label>
67-
<input type="text" name="name" id="name" v-model="name" :aria-label="nameLabel"/>
72+
<input
73+
type="text"
74+
name="name"
75+
id="name"
76+
v-model="name"
77+
:aria-label="nameLabel"
78+
/>
6879
```
6980

7081
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="jOWGqgz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form ARIA label">
@@ -83,11 +94,22 @@ Feel free to inspect this element in Chrome DevTools to see how the accessible n
8394
Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) is similar to `aria-label` expect it is used if the label text is visible on screen. It is paired to other elements by their `id` and you can link multiple `id`s:
8495

8596
```html
86-
<form class="demo" action="/dataCollectionLocation" method="post" autocomplete="on">
97+
<form
98+
class="demo"
99+
action="/dataCollectionLocation"
100+
method="post"
101+
autocomplete="on"
102+
>
87103
<h1 id="billing">Billing</h1>
88104
<div class="form-item">
89105
<label for="name">Name:</label>
90-
<input type="text" name="name" id="name" v-model="name" aria-labelledby="billing name"/>
106+
<input
107+
type="text"
108+
name="name"
109+
id="name"
110+
v-model="name"
111+
aria-labelledby="billing name"
112+
/>
91113
</div>
92114
<button type="submit">Submit</button>
93115
</form>
@@ -107,11 +129,23 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
107129
[aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) is used the same way as `aria-labelledby` expect provides a description with additional information that the user might need. This can be used to describe the criteria for any input:
108130

109131
```html
110-
<form class="demo" action="/dataCollectionLocation" method="post" autocomplete="on">
132+
<form
133+
class="demo"
134+
action="/dataCollectionLocation"
135+
method="post"
136+
autocomplete="on"
137+
>
111138
<h1 id="billing">Billing</h1>
112139
<div class="form-item">
113140
<label for="name">Full Name:</label>
114-
<input type="text" name="name" id="name" v-model="name" aria-labelledby="billing name" aria-describedby="nameDescription"/>
141+
<input
142+
type="text"
143+
name="name"
144+
id="name"
145+
v-model="name"
146+
aria-labelledby="billing name"
147+
aria-describedby="nameDescription"
148+
/>
115149
<p id="nameDescription">Please provide first and last name.</p>
116150
</div>
117151
<button type="submit">Submit</button>
@@ -150,23 +184,28 @@ When adding instructions for your input fields, make sure to link it correctly t
150184
You can provide additional instructions and bind multiple ids inside an [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute). This allows for more flexible design.
151185

152186
```html
153-
<fieldset>
154-
<legend>Using aria-labelledby</legend>
155-
<label id="date-label" for="date">Current Date:</label>
156-
<input type="date" name="date" id="date" aria-labelledby="date-label date-instructions" />
157-
<p id="date-instructions">MM/DD/YYYY</p>
158-
</fieldset>
187+
<fieldset>
188+
<legend>Using aria-labelledby</legend>
189+
<label id="date-label" for="date">Current Date:</label>
190+
<input
191+
type="date"
192+
name="date"
193+
id="date"
194+
aria-labelledby="date-label date-instructions"
195+
/>
196+
<p id="date-instructions">MM/DD/YYYY</p>
197+
</fieldset>
159198
```
160199

161200
Alternatively, you can attach the instructions to the input with [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute):
162201

163202
```html
164-
<fieldset>
165-
<legend>Using aria-describedby</legend>
166-
<label id="dob" for="dob">Date of Birth:</label>
167-
<input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
168-
<p id="dob-instructions">MM/DD/YYYY</p>
169-
</fieldset>
203+
<fieldset>
204+
<legend>Using aria-describedby</legend>
205+
<label id="dob" for="dob">Date of Birth:</label>
206+
<input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
207+
<p id="dob-instructions">MM/DD/YYYY</p>
208+
</fieldset>
170209
```
171210

172211
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="GRoMqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form Instructions">
@@ -182,12 +221,11 @@ Usually it is not recommended to visually hide labels, even if the input has an
182221

183222
Let's look at this search field:
184223

185-
``` html
224+
```html
186225
<form role="search">
187226
<label for="search" class="hidden-visually">Search: </label>
188227
<input type="text" name="search" id="search" v-model="search" />
189-
</div>
190-
<button type="submit">Search</button>
228+
<button type="submit">Search</button>
191229
</form>
192230
```
193231

@@ -231,15 +269,14 @@ When using buttons inside a form, you must set the type to prevent submitting th
231269
You can also use an input to create buttons:
232270

233271
```html
234-
<form action="/dataCollectionLocation" method="post" autocomplete='on'>
272+
<form action="/dataCollectionLocation" method="post" autocomplete="on">
235273
<!-- Buttons -->
236274
<button type="button">Cancel</button>
237275
<button type="submit">Submit</button>
238-
239276

240277
<!-- Input buttons -->
241-
<input type="button" value="Cancel">
242-
<input type="submit" value="Submit">
278+
<input type="button" value="Cancel" />
279+
<input type="submit" value="Submit" />
243280
</form>
244281
```
245282

@@ -255,28 +292,34 @@ You can also use an input to create buttons:
255292
You can use this technique to create functional images.
256293

257294
- Input fields
295+
258296
- These images will act as a submit type button on forms
259-
297+
260298
```html
261299
<form role="search">
262300
<label for="search" class="hidden-visually">Search: </label>
263-
<input type="text" name="search" id="search" v-model="search">
264-
<input type="image" class="btnImg" src="https://img.icons8.com/search" alt="Search">
301+
<input type="text" name="search" id="search" v-model="search" />
302+
<input
303+
type="image"
304+
class="btnImg"
305+
src="https://img.icons8.com/search"
306+
alt="Search"
307+
/>
265308
</form>
266309
```
267310

268311
- Icons
269-
312+
270313
```html
271314
<form role="search">
272315
<label for="searchIcon" class="hidden-visually">Search: </label>
273-
<input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon">
316+
<input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
274317
<button type="submit">
275318
<i class="fas fa-search" aria-hidden="true"></i>
276319
<span class="hidden-visually">Search</span>
277320
</button>
278321
</form>
279-
````
322+
```
280323

281324
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="NWxXeqY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Functional Images">
282325
<span>See the Pen <a href="https://codepen.io/mlama007/pen/NWxXeqY">

0 commit comments

Comments
 (0)