Vue.js

# Семантика

# Формы

При создании форм можно использовать следующие элементы: <form>, <label>, <input>, <textarea> и <button>.

Как правило, метки к полям формы размещаются сверху или слева:



 










<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      :type="item.type"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
    />
  </div>
  <button type="submit">Отправить</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12

See the Pen Простая форма by Vue (@Vue) on CodePen.

Обратите внимание, атрибут autocomplete="on" можно добавить к элементу формы, и он применится ко всем полям формы. Каждому полю можно задать и своё значение атрибута autocomplete (opens new window).

# Метки

Добавляйте метки для описания полей формы и для создания связи между элементами с атрибутами for и id:

<label for="name">Имя</label>
<input type="text" name="name" id="name" v-model="name" />
1
2

See the Pen Метки в форме by Vue (@Vue) on CodePen.

Если изучить элемент через инструменты разработчика в браузере и перейти на вкладку Accessibility в разделе Elements, то можно увидеть, что поле получает имя из его метки:

В инструментах разработки Chrome показывается имя поле, указанное в метке

ВНИМАНИЕ:

Часто встречаются случаи, когда поле ввода находится внутри элемента с меткой:

<label>
  Имя:
  <input type="text" name="name" id="name" v-model="name" />
</label>
1
2
3
4

Явное указание метки с соответствующим идентификатором лучше поддерживается вспомогательными технологиями.

# aria-label

Указать имя поля для использования вспомогательными технологиями можно с помощью атрибута aria-label (opens new window).







 


<label for="name">Имя</label>
<input
  type="text"
  name="name"
  id="name"
  v-model="name"
  :aria-label="nameLabel"
/>
1
2
3
4
5
6
7
8

See the Pen Определение ARIA меток в форме by Vue (@Vue) on CodePen.

Можно самостоятельно убедиться что имя элемента изменилось с помощью инструментов разработчика браузера:

В инструментах разработки Chrome показывается имя поля, заданное в aria-label

# aria-labelledby

Использование атрибута aria-labelledby (opens new window) похоже на aria-label, за исключением того, что текст метки показывается на экране. Он создаёт связь между элементами с атрибутом id, при этом допускается указать несколько id:















 





<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Оплата</h1>
  <div class="form-item">
    <label for="name">Имя:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
    />
  </div>
  <button type="submit">Отправить</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

See the Pen Определение меток ARIA labelledby в форме by Vue (@Vue) on CodePen.

В инструментах разработки Chrome показывается имя поля, указанное в атрибуте aria-labelledby

# aria-describedby

Атрибут aria-describedby (opens new window) используется аналогично aria-labelledby, но предоставляет дополнительную информацию, которая может потребоваться пользователю. Его можно использовать для описания ограничений ввода:
















 






<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Оплата</h1>
  <div class="form-item">
    <label for="name">Имя и фамилия:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
      aria-describedby="nameDescription"
    />
    <p id="nameDescription">Пожалуйста укажите имя и фамилию.</p>
  </div>
  <button type="submit">Отправить</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

See the Pen Определение меток ARIA describedby в форме by Vue (@Vue) on CodePen.

В инструментах разработчика браузера можно увидеть изменённое описание:

В инструментах разработки Chrome показывается имя из атрибута aria-labelledby вместе с описанием, полученным из атрибута aria-describedby

# Подсказка внутри поля

Старайтесь ограничить использование подсказок внутри поля, так как они могут запутать многих пользователей.

Одна из проблем подсказок внутри поля в том, что по умолчанию они не соответствуют критериям цветового контраста (opens new window). Попытка исправить цветовой контраст может сделать подсказку похожей на уже заполненное поле. Посмотрите на следующий пример: подсказка поля Last Name соответствует критериям цветового контраста, хотя она не отличима от поля с подставленным значением:

See the Pen Подсказки полей в формах by Vue (@Vue) on CodePen.

Всю необходимую информацию для заполнения лучше всего указывать вне полей формы.

# Инструкции

При добавлении инструкций для заполнения к полям формы убедитесь, что они правильно связаны между собой. Можно указать дополнительные инструкции в виде идентификаторов в атрибуте aria-labelledby (opens new window). Это делает дизайн более гибким.



 




 

 


<fieldset>
  <legend>Использование aria-labelledby</legend>
  <label id="date-label" for="date">Текущая дата:</label>
  <input
    type="date"
    name="date"
    id="date"
    aria-labelledby="date-label date-instructions"
  />
  <p id="date-instructions">MM/DD/YYYY</p>
</fieldset>
1
2
3
4
5
6
7
8
9
10
11

Также можно привязать инструкции к полю с помощью атрибута aria-describedby (opens new window):




 
 


<fieldset>
  <legend>Использование aria-describedby</legend>
  <label id="dob" for="dob">Дата рождения:</label>
  <input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
  <p id="dob-instructions">MM/DD/YYYY</p>
</fieldset>
1
2
3
4
5
6

See the Pen Инструкции в формах by Vue (@Vue) on CodePen.

# Скрытие содержимого

Обычно не рекомендуется визуально скрывать метки, даже если для поля ввода задано имя. Тем не менее, если смысл поля понятен из контекста, то метку можно скрыть.

Рассмотрим поле поиска:

<form role="search">
  <label for="search" class="hidden-visually">Поиск: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <button type="submit">Поиск</button>
</form>
1
2
3
4
5

В данном случае можно скрыть метку, потому что кнопка поиска визуально поможет определить назначение поля.

Можно использовать CSS, чтобы визуально скрывать элементы, но оставить их доступными для вспомогательных технологий:

.hidden-visually {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 1px;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}
1
2
3
4
5
6
7
8
9
10
11

See the Pen Поиск в формах by Vue (@Vue) on CodePen.

# aria-hidden="true"

Добавление aria-hidden="true" скрывает элемент от обнаружения вспомогательными технологиями, но оставит его визуально доступным для остальных пользователей. Не стоит использовать его на фокусируемых элементах, а применять только для декоративных, дублирующихся или не отображаемых на экране элементов.

<p>Это ВИДИМО для устройств чтения с экрана.</p>
<p aria-hidden="true">Это СКРЫТО от устройств чтения с экрана.</p>
1
2

# Кнопки

При использовании кнопок внутри формы, следует указывать их тип, чтобы предотвратить отправку формы. Для создания кнопок можно также использовать и обычное поле ввода:

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <!-- Кнопки -->
  <button type="button">Отменить</button>
  <button type="submit">Сохранить</button>

  <!-- Поля ввода в виде кнопок -->
  <input type="button" value="Отменить" />
  <input type="submit" value="Сохранить" />
</form>
1
2
3
4
5
6
7
8
9

See the Pen Кнопки в формах by Vue (@Vue) on CodePen.

# Функциональные изображения

Для создания функциональных изображений можно использовать указанную ниже технику.

  • Поля ввода

    • Изображение будет работать как кнопка отправки формы



     
     
     
     
     
     


    <form role="search">
  <label for="search" class="hidden-visually">Поиск: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <input
    type="image"
    class="btnImg"
    src="https://img.icons8.com/search"
    alt="Поиск"
  />
</form>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  • Иконки





 




<form role="search">
  <label for="searchIcon" class="hidden-visually">Поиск: </label>
  <input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
  <button type="submit">
    <i class="fas fa-search" aria-hidden="true"></i>
    <span class="hidden-visually">Поиск</span>
  </button>
</form>
1
2
3
4
5
6
7
8

See the Pen Функциональные изображения by Vue (@Vue) on CodePen.

← Стандарты →