Обратите внимание, что

  1. данный документ является переводом документа «7 User interaction — HTML5» и на данный момент находится на стадии перевода;
  2. данный документ может содержать неточности, опечатки и ошибки перевода;
  3. официальным документом по данной тематике является оригинальный документ на английском языке, расположенный на сайте W3C.

7 Взаимодействие с пользователем

7.1 Атрибут hidden

Все HTML элементы могут иметь атрибут hidden. Атрибут hidden является логическим атрибутом. Если данный атрибут присутствует в элементе, то это означает, что элемент ещё или уже не имеет непосредственного отношения к текущему состоянию страницы, или что он используется в целях объявления содержания для создания возможности повторного использования элемента в других частях страницы, вместо того, чтобы элемент был напрямую доступен пользователю. Агентам пользователей не следует отображать элементы, которые имеют атрибут hidden. Это требование может осуществляться косвенно, через стиль слоя. Например, HTML + CSS агент пользователя может реализовать эти требования, используя правила, предложенные в разделе Отображение.

Поскольку этот атрибут обычно реализуется с помощью CSS, можно также переопределить его с помощью CSS. Например, правило, которое применяет 'display: block', ко всем элементам отменяет результат действия атрибута hidden. Следовательно, авторы должны перепроверять код при написании своих стилей, чтобы убедиться, что атрибут всё еще актуален.

В следующем скелетном примере атрибут используется, чтобы скрыть основной экран веб-игры, пока пользователь входит в систему:

  <h1>Пример Игры</h1>
  <section id="login">
   <h2>Логин</h2>
   <form>
    ...
    <!-- вызывает login() после того, как будут проверены учётные данные пользователя -->
   </form>
   <script>
    function login() {
      // переключение экранов
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
   </script>
  </section>
  <section id="game" hidden>
   ...
  </section>

Атрибут hidden не должен использоваться, чтобы скрыть содержимое, которое на законных основаниях может быть показано в другом устройстве вывода. Например, некорректно использовать hidden, чтобы скрыть панели в диалоговом окне с вкладками, потому что интерфейс с вкладками является лишь разновидностью переполненного устройства вывода — можно было также хорошо просто показать все элементы управления формы в одной большой странице с полосой прокрутки. Так же некорректно использовать этот атрибут, чтобы скрыть содержимое только от одного устройства вывода — если что-то помечено как hidden, то оно скрыто от всех устройств вывода, в том числе, например, принтеров.

Элементы, которые не имеют атрибута hidden, не должны содержать гиперссылки на элементы, которые имеют атрибут hidden. Атрибуты for элементов label и output, которые не имеют атрибут hidden, не должны привязывать данные элементы к элементам с атрибутом hidden. В обоих случаях подобные ссылки только введут пользователей в заблуждение.

Однако элементы и скрипты могут относиться к элементам, которые скрыты в других контекстах.

Например, было бы неправильно использовать атрибут href для ссылки на раздел помеченный атрибутом hidden. Если содержимое не соответствует или не актуально, то нет никаких причин, для того чтобы ссылаться на него.

Однако, было бы хорошо, использовать ARIA атрибут aria-describedby ссылающийся на описания, которые имеют атрибут hidden. Скрытые описания подразумевают, что они не являются действующими в состоянии покоя, они могут быть написаны таким образом, что они полезны в конкретном контексте, на который они ссылаются от образов, которые они описывают.

Аналогичным образом, элемент canvas с атрибутом hidden может быть использован по сценарию графического движка в качестве скрытого буфера, а также форма контроля может относиться к скрытому элементу form, используя атрибут элемента form.

Доступным API рекомендуется предоставлять способ раскрывать структурированное содержание, отмечая его как скрытый по умолчанию. Такие объекты не должны быть заметными для пользователей в нормальном потоке документа в любой форме, как при использовании Вспомогательных Технологий (ВТ) так и при использовании основных Агентов Пользователей.

Когда такие функции доступны, Агенты Пользователей могут использовать их, чтобы раскрывать полную семантику элементов с атрибутом hidden для ВТ при необходимости, если такое объекты являются упомянутыми косвенно в ID ссылке или в действительном хэш-имени ссылки. Это позволяет ВТ получить доступ к структуре этих элементов с атрибутом hidden по запросу пользователя, сохраняя при этом скрытое содержание во всех устройствах вывода с нормальным потоком документа. Авторы, желающие предотвратить инициативу пользователя - посмотреть элемент с атрибутом hidden, не должен ссылаться на элемент с таким атрибутом.

Ввиду того, что некоторые web-браузеры создают скрытые элементы при предоставлении таких элементов в ВТ, авторы не должен ссылаться на элементы с атрибутом hidden, которые будут утрачивать существенное значение при создании.

Элементы в разделе скрытом с помощью атрибута hidden по-прежнему активны, например скрипты и элементы управления формой в таких разделах, по-прежнему выполняться, и возвращают соответствующие результаты. Только они представляют изменения пользователю.

IDL атрибут hidden должен вернуть содержимое атрибута с тем же именем.


* * *

7.4 Фокус


* * *

7.4.1 Последовательность фокусной навигации и атрибут tabindex

С помощью значений атрибута tabindex разработчики могут указывать такие параметры фокусной навигации как исключение или включение элемента в фокусную навигацию, последовательность получения фокуса. Название "tab index" происходит от совместного использования клавиши "tab" для навигации по элементам, принимающим фокус. Термин "переход/tabbing" означает движение по фокусируемым элементам, которые могут быть достигнуты с помощью последовательной навигации по фокусируемым элементам.

Атрибут tabindex, если он указан, должен иметь значение, которое является действительным числом.

Каждый элемент может иметь установленный tabindex фокус метку, как определено ниже. Эта метка является фактором, который вносит свой вклад в определение, того является ли элемент фокусируемым, как описано в следующем разделе.

Если этот атрибут задан, то он должен быть проанализирован с помощью правил обработки целых чисел. Значения атрибута подразумевают следующее:

Если атрибут не задан или в ходе анализа значения возвращается ошибка

Агент пользователя должен следовать списку правил, чтобы определить относительный порядок элемента в последовательной фокус навигации: установлена ли у элемента tabindex фокус метка и если это так, то может ли элемент быть найден с помощью последовательной фокус навигации.

По правилам, предполагается, что следующие элементы изначально имеют tabindex фокус метку:

Единственный действительный повод игнорировать правила и всегда позволять элементу быть сфокусированным (установив tabindex фокус метку) заключается в том, что бы пользователь использовал только механизм активации элемента с помощью клавиатуры, которая придаёт фокус элементу.

Если в качестве значения выступает целое отрицательное число

Агент пользователя должен установить элементу tabindex фокус метку, но не должен позволять элементу быть доступным через последовательную фокус навигацию.

Одна веская причина, чтобы проигнорировать требование о последовательной фокус навигации это запрет автором перехода к элементу при условии, что пользователь использует только механизм перемещения фокуса, являющийся последовательной фокус навигацией. Например, только клавиатура пользователя будет не в состоянии нажать на текстовое поле с отрицательным значением tabindex, так что пользовательский агент пользователя будет вполне оправдан в разрешении управлять переходом невзирая ни на что.

Если значение равно нулю

Агент пользователя должен установить элементу tabindex фокус метку, должен позволить элементу быть достигнутым с помощью последовательной фокус навигации, и должен следовать списку правил для определения относительного порядка элемента.

Если значение больше нуля

Агент пользователя должен установить элементу tabindex фокус метку, должен позволить элементу быть достигнутым с помощью последовательной фокус навигации, и должен поместить элемент в последовательную фокус навигацию так, чтобы он был:

  • перед любым фокус элементом, чей атрибут tabindex был опущен или чьё значение после анализа возвращает ошибку,
  • перед любым фокус элементом, чей атрибут tabindex имеет значение меньше или равное нулю,
  • после любого элемента, чей атрибут tabindex имеет значение больше нуля, но меньше, чем значение атрибута tabindex следующего элемента,
  • после любого элемента, чей атрибут tabindex имеет значение равное значению атрибута tabindex элемента находящегося первее в структуре дерева документа чем элемент,
  • перед любым элементом, чей атрибут tabindex имеет значение, равное значению атрибута tabindex элемента, но находящимся позже в структуре дерева документа чем элемент и
  • перед любым элементом, чей атрибут tabindex имеет значение большее, чем значение атрибута tabindex другого элемента.

Элемент, который имеет свою tabindex фокус метку, но при этом может иметь не подкрепленный ни чем эффект актививации, должен быть определён как активируемый элемент который ни ничего не делает.

Это означает, что элемент, который может принимать фокус только из-за атрибута tabindex, будет создавать событие click в ответ на его активацию без участия мыши (например, нажав клавишу "enter" на сфокусированном элементе).

IDL атрибут tabIndex должен вернуть значение tabindex атрибута. По умолчанию значение равняется 0 для элементов, которые могут получить фокус и -1 для элементов, которые не могут получить фокус.


* * *

7.5 Назначение сочетаний клавиш


* * *

7.5.2 Атрибут accesskey

Все HTML элементы могут иметь атрибут accesskey с определённым значением. Значение в атрибуте accesskey используется агентом пользователя в качестве руководства для создания сочетания клавиш, которые активируют или придают фокус элементу.

Если указано, то значением должен быть упорядоченный набор уникальных, разделённых пробелами лексем, которые чувствительны к регистру, каждый из которых должен представлять только один код из таблицы символов Unicode.

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

<nav>
 <p>
  <a title="Деятельность Консорциума" accesskey="A" href="/Consortium/activities">Деятельность</a> |
  <a title="Технические Отчеты и Рекомендации" accesskey="T" href="/TR/">Технические Отчеты</a> |
  <a title="Алфавитный Указатель Сайта" accesskey="S" href="/Consortium/siteindex">Содержание сайта</a> |
  <a title="О Сайте" accesskey="B" href="/Consortium/">О Консорциуме</a> |
  <a title="Контактные данные Консорциума" accesskey="C" href="/Consortium/contact">Контакты</a>
 </p>
</nav>

В следующем примере для доступа к полю поиска устанавливаются две клавиши "s" и "0" (именно в таком порядке). Агент пользователя используемый на устройстве с полноценной клавиатурой может установить сочетание клавиш Ctrl+Alt+S в качестве клавиш быстрого доступа, в то время как агент пользователя используемый на небольшом устройстве только с цифровой клавиатурой может просто установить только одну клавишу 0:

<form action="/search">
 <label>Поиск: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

В следующем примере, кнопке заданы возможные значения клавиши быстрого доступа. При этом скрипт пытается обновить текст кнопки для объявления комбинации клавиш выбранных агентом пользователя.

<input type=submit accesskey="N @ 1" value="Введите">
...
<script>
 function labelButton(button) {
   if (button.accessKeyLabel)
	 button.value += ' (' + button.accessKeyLabel + ')';
 }
 var inputs = document.getElementsByTagName('input');
 for (var i = 0; i < inputs.length; i += 1) {
   if (inputs[i].type == "submit")
	 labelButton(inputs[i]);
 }
</script>

В одном агенте пользователя текст кнопки может измениться на "Введите (⌘N)". На другом текст может измениться на "Введите (Alt+⇧+1)". Если агент пользователя не установит сочетание клавиш, то будет просто надпись "Введите". Точная надпись зависит от того, установлена ли клавиша быстрого доступа, а так же от того как агент пользователя представляет комбинацию клавиш.

7.5.3 Модель обработки

Элементу устанавливается сочетание клавиш быстрого доступа с помощью значения атрибута accesskey. Изначально элемент не должен иметь назначенной клавиши доступа.

Всякий раз, когда элементу устанавливается, изменяется или удаляется атрибут accesskey, агент пользователя должен обновить назначенную клавишу доступа, выполнив следующие действия:

  1. Если элемент не имеет атрибут accesskey, то переходите сразу к запасному варианту указанному ниже.

  2. В противном случае значения атрибута разделяются с помощью пробелов, и в результате получаются клавиши допустимые к использованию.

  3. Каждое значение, представляющее собой клавишу, в свою очередь появляются в значении атрибута, при этом выполняются следующие действия:

    1. Если значение не является строкой из одино кода таблицы символов Unicode, то остальная часть подраздела шагов для этого значения пропускается.

    2. Если значение не соответствует клавише на клавиатуре системы, то остальные шаги для данного значения пропускаются.

    3. Если агент пользователя может найти от нуля и более сочетаний клавиш-модификаторов, которые объединены с устанавливаемой клавишей, которая соответствует значению, указанному в атрибуте, то она может быть использована в качестве одной из клавиш доступа, в таком случае агент пользователя может назначить эту комбинацию клавиш в качестве комбинации быстрого доступа к данному элементу и прервать эту цепочку событий.

  4. Запасной вариант: Агент пользователя при желании может сам назначать комбинацию клавиш по своему усмотрению в качестве установленного сочетания клавиш доступа, а затем прекратить эти действия.

  5. Если процесс дойдёт до этого шага, то элементу не будет присвоена клавиша доступа.

После того, как агент пользователя выбрал и назначил клавишу доступа к элементу, он не должен изменять назначенную клавишу в случаях, если атрибут accesskey не изменяется или если элемент не перемещается в другой Документ.

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


IDL атрибут accessKey должен вернуть содержимое атрибута accesskey.

IDL атрибут accessKeyLabel должен вернуть строку, которая представляет назначенные клавиши доступа к элементу, если таковые имеются. Если элемент не имеет ни одной назначенной клавиши, то IDL атрибут должен вернуть пустую строку.

7.6 Редактирование

7.6.1 Создание редактируемых областей документа: контент атрибут contenteditable

Атрибут contenteditable представляет собой перечислимый атрибут, ключевым словом которого может быть пустая строка, true или false. Пустая строка и ключевое слово true устанавливают истинное состояние атрибута. Ключевое слово false указывает на ложное состояние атрибута. Кроме того, существует ещё и третье состояние, состояние inherit, которое представляет собой отсутствующее значение по умолчанию (в том числе и недопустимое значение по умолчанию).

Значение true указывает, что элемент доступен для редактирования. Значение inherit указывает, что элемент доступен для редактирования, если его элемент родитель доступен для редактирования. Значение false означает, что элемент не редактируется.

element . contentEditable [ = value ]

Возвращает "true", "false", или "inherit", в зависимости от значения атрибута contenteditable.

>Может быть использовано, чтобы изменить текущее состояние.

Возвращает SyntaxError, если новое значение не соответствует ни одной из этих строк.

element . isContentEditable

Возвращает true, если элемент является редактируемым; в противном случае возвращает false.

IDL атрибут contentEditable, должен вернуть строку "true", если содержимое атрибута имеет значение true, "false", если содержимое атрибута имеет значение false, и "inherit" в противном случае. При настройке, если новое значение ASCII, без учета регистра строки соответствует "inherit", то содержимое атрибута должно быть удалено, если новое значение ASCII, без учета регистра строки соответствует "true", то содержимым атрибута должна быть строка "true", если новое значение ASCII, без учета регистра строки соответствует "false", то содержимому атрибута должно быть присвоено строковое значение "false", в противном случае атрибут должен вернуть значение SyntaxError.

IDL атрибут isContentEditable, должен вернуть true, если элемент является либо редактируемым, либо редактируемым узлом, и false в противном случае.


* * *

7.6.5 Проверка правописания и грамматики

Агенты пользователей могут поддерживать проверку орфографии и грамматики редактируемого текста в некоторых элементах формы (таких как значение textarea элементов) или в элементах с редактируемым узлом (например, с помощью contenteditable).

Для каждого элемента, web-браузер должен установить действия по умолчанию при этом, либо в качестве этих действий выступают стандартные действия по умолчанию, либо действия установленные пользователем. Существует три возможных варианта действий по умолчанию для каждого элемента:

true-by-default
Текстовая составляющая элемента будет проверена на орфографию и грамматику, если его содержимое доступно для редактирования.
false-by-default
Текстовая составляющая элемента никогда не будет проверяться на орфографию и грамматику.
inherit-by-default
Элемент должен унаследовать действие по умолчанию от своего родительского элемента. Элементы, которые не имеют родительского элемента, не могут принимать данное действие по умолчанию.

Атрибут spellcheck является перечислимым атрибутом, значениями которого могут выступать – пустая строка, true и false. Пустая строка и ключевое слово true указывают на истинное состояние. Ключевое слово false указывают на ложное состояние. Кроме того, существует еще и третье состояние - состояние по умолчанию, которое представляет собой недостающее значение по умолчаниюнедопустимое значение по умолчанию).

Истинное состояние указывает на необходимость проверки текстовой части элемента на орфографию и грамматику. Состояние по умолчанию означает, что действия над текстовой составляющей элемента будут осуществляться в соответствии с действием по умолчанию, возможно, перенимаемого от значения spellcheck родительского элемента как действие по умолчанию. Ложное состояние означает, что текстовую часть элемента проверять на орфографию и грамматику не нужно.


element . spellcheck [ = value ]

Возвращает true, если текстовая составляющая элемента поверяется на орфографию и грамматику; в противном случае возвращает false.

Может быть установлен, чтобы переопределить значение по умолчанию и задать значение атрибуту spellcheck.

IDL атрибут spellcheck должен вернуть true в случаях, если spellcheck атрибут элемента содержит истинное значение, или если атрибут spellcheck указывает на состояние по умолчанию и стандартным действием для элемента является истинное действие по умолчанию или если атрибут spellcheck указывает на состояние по умолчанию и стандартным действием для элемента является наследуемое действие по умолчанию наследуемое от родительского элемента, который при запросе IDL атрибута spellcheck возвращает true; в противном случае, если ни одно из этих условий не верно, то атрибут должен вернуть false.

IDL атрибут spellcheck не зависит от предпочтений пользователя, переопределяющих значение атрибута spellcheck и, следовательно, может не отражать фактическое состояние проверки орфографии.

При установке, если новое значение истинно, то в качестве значения атрибута spellcheck должна быть установлена строка "true", в противном случае должна быть установлена строка "false".


Агенты пользователей должны рассматривать только следующие фрагменты текста являющиеся целью для этой функции:

Для работы с текстом являющимся частью Текстового узла элемента, с которым текст связан и является элементом, который выступает непосредственным родителем первого символа слова, предложения или другого куска текста. Для текста в атрибутах, являющихся атрибутами элементов. Для значений input и textarea элементов, это сами элементы.

Чтобы определить, является ли слово, предложение, или другой кусок текста в соответствующем элементе (как определено выше) проверяемым на правописание и грамматику агент пользователя должен использовать следующий алгоритм:

  1. Если пользователь отключил проверку для данного текста, то проверка не выполняется.
  2. В противном случае, если пользователь включил проверку для данного текста, чтобы она была всегда включена, то проверка будет выполняться.
  3. В противном случае, если элемент с которым связан текст имеет атрибут spellcheck, то: если этот атрибут находится в истинном состоянии, то проверка выполняется; если это атрибут находится в ложном состоянии, то проверка не выполняется.
  4. В противном случае, если у данного элемента есть родительский элемента с атрибутом spellcheck, который не находится в состоянии по умолчанию, то: если ближайший такой родительский элемент содержащий атрибут spellcheck находится в истинном состоянии, то проверка выполнятся; в противном случае проверка выполнятся не будет.
  5. В противном случае, если над элементом выполняется действие по умолчанию являющееся истинным действием, выступающим по умолчанию, то проверка выполнятся.
  6. В противном случае, если над элементом выполняется действие по умолчанию являющееся ложным действием, выступающим по умолчанию, то проверка не выполнятся.
  7. В противном случае, если элемент, находящийся в родительском элементе имеет собственную проверку, то проверка выполнятся.
  8. В противном случае, проверка не выполнятся.

Если проводится проверка для слова/предложения/текста, агент пользователя должен указать орфографические и грамматические ошибки в этом тексте. Агенты пользователей должны учитывать и другую семантику, приведенную в документе, предлагая орфографию и исправление грамматических ошибок. Агенты пользователей могут использовать язык элемента, чтобы определить, какие правила орфографии и грамматики необходимо применять, или может использовать пользовательские настройки языка. Агенты пользователем должны использовать атрибуты элемента input, такие как pattern для того, чтобы убедиться, что полученное значение является допустимым, где это возможно.

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

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

В следующих примерах используется элемент с ID="а", чтобы определить, необходимость проверки слова "Привет" на наличие орфографических ошибок. В данном примере проверки не будет.

<div contenteditable="true">
 <span spellcheck="false" id="a">Прив</span><em>ет!</em>
</div>

В следующем примере элемент с ID="b" будет проверен на ошибки (первоначальный пробельный символ в значении атрибута элемента input заставляет проигнорировать значение данного атрибута, таким образом вместо него используется значение атрибута родительского элемента, независимо от значения по умолчанию).

<p spellcheck="true">
 <label>Имя: <input spellcheck=" false" id="b"></label>
</p>

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