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">Submit</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12

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

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

# Метки

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

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

See the Pen Метка формы by Maria (@mlama007) on CodePen.

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

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

ВНИМАНИЕ:

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

<label>
  Name:
  <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">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 Form ARIA label by Maria (@mlama007) on CodePen.

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

В инструментах разработки 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">Billing</h1>
  <div class="form-item">
    <label for="name">Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
    />
  </div>
  <button type="submit">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 Form ARIA labelledby by Maria (@mlama007) 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">Billing</h1>
  <div class="form-item">
    <label for="name">Full Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
      aria-describedby="nameDescription"
    />
    <p id="nameDescription">Please provide first and last name.</p>
  </div>
  <button type="submit">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 Form ARIA describedby by Maria (@mlama007) on CodePen.

Через Chrome DevTools можно увидеть применённое описание:

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

# Подсказка поля

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

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

See the Pen Form Placeholder by Maria (@mlama007) on CodePen.

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

# Инструкции

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

<fieldset>
  <legend>Using aria-labelledby</legend>
  <label id="date-label" for="date">Current 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>Using aria-describedby</legend>
  <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>
1
2
3
4
5
6

See the Pen Form Instructions by Maria (@mlama007) on CodePen.

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

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

Рассмотрим следующее поле поиска:

<form role="search">
  <label for="search" class="hidden-visually">Search: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <button type="submit">Search</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 Form Search by Maria (@mlama007) on CodePen.

# aria-hidden="true"

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

<p>This is not hidden from screen readers.</p>
<p aria-hidden="true">This is hidden from screen readers.</p>
1
2

# Кнопки

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

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <!-- Кнопки -->
  <button type="button">Cancel</button>
  <button type="submit">Submit</button>

  <!-- Кнопки как поля ввода -->
  <input type="button" value="Cancel" />
  <input type="submit" value="Submit" />
</form>
1
2
3
4
5
6
7
8
9

See the Pen Form Buttons by Maria (@mlama007) on CodePen.

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

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

  • Поля ввода

    • Изображение будет работать как кнопка отправки формы
    <form role="search">
  <label for="search" class="hidden-visually">Search: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <input
    type="image"
    class="btnImg"
    src="https://img.icons8.com/search"
    alt="Search"
  />
</form>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  • Иконки

<form role="search">
  <label for="searchIcon" class="hidden-visually">Search: </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">Search</span>
  </button>
</form>
1
2
3
4
5
6
7
8

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

Deployed on Netlify.
Последнее обновление: 2021-01-22, 09:51:41 UTC

← Стандарты →