Имя, идентификатор, ария, атрибуты роли в пределах HTML

Question

Я знаю, что имя и идентификатор имеют ключевое значение при включении их в элементы веб-формы, все эти атрибуты, такие как имя, идентификатор, роль, aria-xxx, заголовок, всегда должны быть включены в элементы html?

Итак, каждая статья, каждый раздел, каждый элемент меню навигации должны иметь ВСЕ эти атрибуты? Или некоторые из них будут относиться к определенным элементам, например, «имя» для веб-форм или «идентификатор» для нацеливания javascript? К сожалению, браузер не возвращает мне подтверждающее сообщение, если некоторые атрибуты не поддерживаются или не нужны. Ориентация, пожалуйста.

В форме это нормально иметь?

<label for=”first-name”>First Name</label> <input type=”text” id=”first-name” name=”first-name” required aria-required=”true” role="textbox" aria-labelledBy="something">

Как вы видите, я поставил обязательные И обязательные для арии, а также роль, может быть конфликт? Я знаю, что роль атрибута = текстовое поле не является правильным, но только для иллюстрации моего сомнения. Заранее спасибо.

Answer 1

Хороший вопрос. TLDR - нет, вам не нужно добавлять все эти атрибуты для всех элементов HTML. Для более подробного объяснения посмотрите следующий текст.

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

• id: используется для присвоения элементу уникального идентификатора. Полезно для ссылки с использованием JavaScript getElementById, а также полезно для ссылок с использованием других атрибутов на той же странице (например, как <label for="first-name"> ссылается на элемент ввода по id).

• name : Это в основном используется для чтения данных элементов формы. В какой-то момент времени, когда формы были отправлены через традиционные вызовы POST на сервер, атрибут name будет обозначать ключи пар ключ / значение, которые сервер получит с веб-страницы. В настоящее время люди полагаются на вызовы Web API и AJAX, но, тем не менее, они все еще используются.

• роль: это полезно для программ чтения с экрана и вспомогательных программ. Вы должны назначить роль элементам HTML, если их оригинальный элемент тега не отображает их настоящие семанты c на странице . Типичный пример - люди, использующие элементы div для создания таблиц. В этом случае вам нужно добавить роли таблицы, сетки, строки, ячейки и т. Д. c. для соответствующих элементов div, которые составляют таблицу. Если бы вы использовали нативные элементы HTML, которые создают таблицы (,, и т. Д. c.), Роли были бы избыточными.

• aria-xxxx: также используется для программ чтения с экрана и вспомогательных технологий. Есть много типов атрибутов арии, используемых по нескольким причинам. Там нет недостатка ссылок там в Интернете; Вы можете легко найти их на MDN или других сайтах. Здесь я хочу отметить, что некоторые атрибуты делают их избыточными.

  • Давайте рассмотрим приведенный выше фрагмент в качестве примера. <input required aria-required="true" />. Обязательный атрибут был введен в HTML 5 и его достаточно для программ чтения с экрана. Поэтому, если вы ориентируетесь на современные браузеры (что весьма вероятно), добавление aria-required является излишним. Однако если вы ориентируетесь на браузеры, которые не поддерживают HTML 5, то иметь его полезно, поскольку эти браузеры игнорируют атрибут required.
  • Другой пример, взятый из вашего фрагмента для демонстрации того же пункта, заключается в том, что aria-labelledBy здесь также избыточен. Это потому, что у вас уже есть ввод, помеченный элементом <label> с помощью атрибута for. Короче говоря, атрибуты aria полезны, если собственных элементов и атрибутов HTML уже недостаточно.

В итоге каждый атрибут имеет свое назначение. Не все из них должны присутствовать постоянно, это зависит от вашей структуры кода, элементов HTML, которые вы используете, браузеров, на которые вы ориентируетесь, и т. Д. c.

Надеюсь, это поможет! :)