В веб-разработке написание семантического HTML важно для доступности, а также дает некоторые приятные побочные эффекты, такие как поддержка режима «чтения» в браузере, SEO, graceful degradation и возможность экспорта. Реализуя семантический HTML, мы также значительно уменьшаем потребность в ARIA (Accessible Rich Internet Applications). ARIA - это большой набор HTML атрибутов, который обеспечивает доступность для пользователей использующих screen reader, за счет лучшей поддержки семантики, которая не предоставляется или плохо поддерживается с помощью базовой HTML разметки.   Местами, использование ARIA, определённо необходимо. Но в целом, сокращение использования ARIA, по иронии судьбы, значительно повышает доступность. Это связано с несколькими причинами, в том числе:   ARIA очень часто реализована неправильно. Это хорошо известно в области, но для получения данных обратитесь к отчету WebAIM Million, в котором говорится, что “На главных страницах с присутствием ARIA было обнаружено в среднем на 70% больше ошибок, чем на страницах без ARIA”.   ARIA может не очень хорошо поддерживаться (даже если правильно реализовано) браузером и/или screen reader'ом, что, к сожалению, случается очень часто. ARIA не магия (как, похоже, думают некоторые профессиональные веб-разработчики). Интерфейсы по-прежнему должны быть доступными, инклюзивными и пригодными для использования. ARIA предоставляет только семантику. Оно не предоставляет никакой функциональности. Он не обеспечивает никакого взаимодействия с клавиатурой, которое часто ожидают от определенных шаблонов ARIA (например, панель вкладок). Оно не решает проблемы доступности вне семантики вспомогательных технологий (таких как альтернативный текст, цветовой контраст, порядок чтения, четкие надписи, подписи к рисункам и т.д.). Следующие примеры продемонстрируют, как правильно использовать HTML так, чтобы ARIA не требовалась. При этом приведённые методы помогут разработчикам следовать первому правилу ARIA (по возможности сначала использовать HTML), а также обеспечат более надежный код и, скорее всего, более доступный интерфейс для пользователя.   Приведенные ниже примеры представляют собой лишь выборку проблем и включают подписи элементов форм, кнопки, ссылки и изображения. Я считаю их распространенными проблемами, и на самом деле я столкнулся со всеми из них “в дикой природе” (на живых веб-сайтах) за последние пару недель. За плохой версией следует хорошая, а затем примечание. В демонстрационных целях фрагменты кода значительно упрощены по сравнению с веб-страницами, на которых они были найдены. Помните, что исправление избыточности ARIA может показаться тривиальным на первый взгляд, но может иметь большое значение в: снижение сложности кода — меньше кода! уменьшение проблем с поддержкой — например, использование одного текстового контента вместо дублирования (кроме того, меньше кода!) уменьшение ошибок доступности вызванных вычислением значений браузером — например, разработчик может не понимать как высчитывается доступное имя, что может быть немного сложным.   Теперь давайте перейдем к примерам!   Плохо: не нужный атрибут aria-label Хорошо: используйте текст внутри метки (неявная ассоциация)   Примечание: Удалите aria-label , чтобы выиграть! label, обернутый вокруг input, в достаточной степени обеспечивает доступное имя для поля ввода.   Предупреждение: этот пример реализует неявную маркировку поля ввода, которая может иметь проблемы с некоторыми вспомогательными технологиями, такими как Dragon NaturallySpeaking. Рекомендуется использовать явную ассоциацию, как в примере 2.   Плохо: необоснованное использование aria-labelledby  Хорошо: используйте атрибуты for и id для явной связи Примечание: Используйте базовый HTML (а не ARIA), чтобы выиграть! Атрибуты for и id предоставляют доступное имя для полей ввода.   Плохо: ненужный aria-label и ненужная роль   Хорошо Примечание: Удалите два атрибута ARIA (и дублирующийся текст), чтобы выиграть! Атрибут alt предоставляет доступное имя для кнопки.  Плохо: перезапись существующего контента Хорошо: используйте существующий встроенный текст Примечание: Здесь не нужно переусердствовать, aria-label перезаписывает текст адреса в качестве имени ссылки, поэтому текст адреса недоступен пользователям screen reader'ов. Достаточно обернуть в ссылку текст адреса.   Плохо: ненужный атрибут aria-label Хорошо: используйте только альтернативный текст изображения Примечание: Удалите атрибут aria-label и используйте базовый HTML, чтобы выиграть! Атрибут alt используется в качестве контента ссылки. Плохо: атрибут role используется для обозначение декоративного изображения Хорошо: используйте пустое значение для атрибута alt Примечание: Удалите атрибут role (и удалите содержимое alt), чтобы выиграть! Пустой атрибут alt означает, что это декоративное изображение.   Плохо: aria-hidden на тэге скрипта Хорошо: ничего дополнительно не требуется для обеспечения доступности Примечание: Удалите атрибут aria-hidden , чтобы выиграть! Содержимое скрипта (встроенного JavaScript) не озвучивается вспомогательными технологиями. Устранение избыточности ARIA может снизить сложность кода, проблемы с поддержкой и вероятность ошибок доступности. Уменьшение зависимости от ARIA делает код более простым и, скорее всего, повысит доступность. Написание семантического HTML важно для обеспечения доступности, а также имеет другие преимущества. Семантический HTML значительно уменьшит потребность в ARIA, которая часто реализуется неправильно и может поддерживаться не в полной мере. Убедитесь что использовали базовый HTML перед тем как использовать ARIA, например, при создании подписей полей формы, кнопок и ссылок, а также декоративных изображений.    Frontend Developer