И почему использование атрибутов данных для настройки состояния и стиля JavaScript не всегда является правильным выбором.
Если вы веб-разработчик, скорее всего, вы видели или использовали атрибут data-target, подобный этому, для управления виджетом в JavaScript:
В приведенном выше примере data-target указывает, какой элемент является целевым элементом, которым будет управлять кнопка - таргетинг на ‹div› с ID из «myModal».
Но есть гораздо лучший способ достичь той же цели!
Почему пользовательский атрибут data- * уступает в этом контексте
Это может звучать семантически, когда цель является частью имени атрибута, но это не семантическое значение. В спецификации W3C даже сказано:
Спецификации, предназначенные для пользовательских агентов, не должны определять эти атрибуты, чтобы иметь какие-либо значимые значения.
Кроме того, атрибуты data- * предназначены для использования, когда нет других альтернатив, но существует более подходящий атрибут .
Атрибуты настраиваемых данных предназначены для хранения настраиваемых данных в частном порядке для страницы или приложения, для которых больше нет подходящих атрибутов или элементов.
Лучшая альтернатива в этом контексте
В своей предыдущей публикации я обсуждаю значение использования атрибутов ARIA в JavaScript и показываю, как разработчик может достичь многих из тех же целей с помощью ARIA вместо классов или, в данном случае, data- * атрибуты.
В этом контексте более подходящим был бы атрибут aria-controls. Он не только намного более семантичен, но и добавляет необходимую информацию для программ чтения с экрана, которой изначально не было в приведенном выше примере. Код будет выглядеть так:
Я думаю, можно с уверенностью предположить, что почти каждый раз, когда вы используете data-target, вы обрабатываете кнопку, которая управляет другим элементом. Могут быть и другие крайние случаи, но этот контекст, скорее всего, является подавляющим большинством вариантов использования. Здесь aria-controls - лучшая альтернатива.
Если вы обнаружите, что используете data-target в контексте за пределами кнопки, управляющей другим элементом, возможно, есть атрибут ARIA, который подходит вашему варианту использования, например aria-labelledby или aria -описано . В крайнем случае - если подходящих атрибутов больше нет - используйте data-target. Но, пожалуйста, не делайте этого по умолчанию.
Скорее всего, для этого есть атрибут ARIA.
Искренний поиск более значимых атрибутов, помимо простого значения по умолчанию для атрибутов data- *, должен быть встроен в рабочий процесс веб-разработки. Потратить время на то, чтобы обдумать, насколько ваше приложение будет максимально защищенным и доступным, - это просто хорошее программирование.
Вот несколько дополнительных (из многих других) атрибутов ARIA, которые предоставляют те же преимущества, что и aria-controls:
- aria-Press = «true» - используйте это вместо «активного» класса для кнопок.
- aria-selected = «true» - используйте его вместо «активного» или «выбранного» класса на вкладках.
- aria-current = true - используйте его вместо активного класса для разбивки на страницы и меню.
- aria-extended = true - используйте этот класс вместо open для аккордеонов и других подобных переключаемых виджетов и их кнопок.
Преимущества этого метода
Использование атрибутов ARIA для стилизации и установки состояний в JavaScript всегда дает следующие преимущества:
- Так же просто и быстро, как и обычный метод использования атрибутов data- * (или применения / удаления классов).
- Лучшая доступность встроена с самого начала.
- Более семантический, поскольку атрибуты ARIA предоставляют значение.
Единственный недостаток здесь - это кривая обучения, связанная с правильным использованием ARIA - это еще одна вещь, которую нужно изучить в мире веб-разработки. В свое время разочарование, связанное с изучением CSS вместо использования таблиц для разметки, было таким же. Всегда проще отказаться от ваших текущих методов - сложнее изменить. Но в долгосрочной перспективе от подобных изменений выигрывают все.
Комментарии и отзывы
Как всегда, мне интересно услышать все мнения и отзывы о замене как можно большего количества атрибутов data- * и классов CSS на большее количество семантических параметров, таких как атрибуты ARIA.
Примечание 1:
Очевидно, что если вы используете Bootstrap и переключились на aria-controls, это не сработает сразу коробки. Я просто использую Bootstrap здесь в качестве примера, потому что эта библиотека знакома многим разработчикам.
