Семантика
С ростом сложности возникает необходимость создания веб-сайта. Поэтому использование HTML-тегов уже не может быть таким простым, как раньше, когда для всех видов вопросов использовался только <div>. В то время нам нужно было добавить, например, id или класс: <div id="landmark" class="landmark">.
К счастью, с HTML5 стало проще писать код, связанный с достопримечательностями. Мы можем написать его как в следующем примере <header> или <main>.
Технология A11s (Accessibility) на веб-сайтах в значительной степени зависит от правильного или рекомендуемого использования тегов HTML. Такие технологии, как устройства для чтения с экрана, будут читать в соответствии с порядком структуры HTML. Правильное структурирование HTML-тегов значительно поможет этой технологии.
Некоторые примеры семантического кода тегов HTML, которые мы должны применять.
<header>…</header>
<nav>…</nav>
<main>…</main>
<article>…</article>
<aside>…</aside>
<footer>…</footer>
<button>…</button>
<!-- dan banyak lagi -->
ARIA — это Полифил
Мы не должны останавливаться на семантике, потому что семантика не охватывает всего. Для некоторых вещей мы должны реализовать ARIA.
Полифилы — это код для реализации функций в браузерах, которые пока их не поддерживают. Но в контексте A11s полифилы — это дополнительные технологии для поддержки технологий A11s. Одним из примеров являются устройства чтения с экрана.
Ранний пример форм ARIA можно увидеть ниже
<!-- role -->
<nav role="navigation"></nav>
<!-- properties -->
<button aria-label="tutup">x</button>
<!-- states -->
<button aria-disabled="true">Tutup</button>
Достопримечательности
Ориентиры — это определенные части веб-сайта. Подобно физическим объектам, которые мы видим, ориентирами на сайте могут быть <header>, <nav>, <footer> и так далее. Некоторые примеры часто используемых ориентиров приведены ниже.
<header role="banner"></header>
<main role="main"></main>
<aside role="complementary"></aside>
<footer role="contentinfo"></footer>
Этот звук предназначен для того, чтобы читателям с экрана было легче ориентироваться в фокусе элемента на основе звука. Чтобы читателям экрана было легко указать, где я сейчас нахожусь.
Название — это звук по умолчанию
Создание заголовков в каждом из наших HTML-тегов очень важно. Но если поместить структурированный заголовок, это улучшит навигацию. Потому что в навигации для чтения с экрана есть возможность перейти непосредственно к определенному разделу слушания, непосредственно к тому разделу, который вы хотите просмотреть. Обычно в начале веб-сайта есть раздел «Перейти к основному содержанию».
aria-label
Наиболее часто используемым ARIA является aria-label. Потому что при его применении разработчикам достаточно поместить его в качестве дополнительного атрибута в элемент. Например, вы можете увидеть следующее
<button arial-label="tutup">X</button>
<input id="name" name="name" aria-label="nama" required>
В приведенном выше случае, если мы не поместим aria-label, то элемент не будет распознан как метка. Будет очень непонятно, если мы окажемся на входе без инструкций.
aria-live
aria-live используется для HTML-тегов, требующих обновления содержимого. Всплывающие окна — один из примеров использования aria-live. Существует 3 типа aria-live, которые могут быть использованы
<div aria-live="off"></div>
<div aria-live="polite"></div>
<div aria-live="assertive"></div>
Небольшое дополнение, aria-atomic также должно быть добавлено к тегу HTML, если содержимое aria-live должно быть известно ассистивным технологиям.
Также можно добавить атрибут role="alert" для обозначения того, что всплывающее окно также является предупреждением.
aria-required
Чтобы сообщить устройству чтения с экрана, что вводимые данные должны быть заполнены, можно использовать атрибут aria-required="true" или просто атрибут «required».
<input aria-required="true" required>
aria-hidden
Иногда в HTML-тегах есть части, которые не нужно упоминать или которые не должны определяться устройствами чтения с экрана. Но в интерфейсе он все равно должен отображаться. Обычно это просто для украшения или дополнительной информации. Для этого мы можем использовать атрибут aria-hidden.
<div aria-hidden="true"></div>
tabindex
Для того чтобы HTML-теги были сфокусированы с помощью tab, нам также необходимо добавить tabindex в атрибут.
<div tabindex="0"></div>
<div tabindex="-1"></div>
Значение 0 для навигации по вкладкам по умолчанию. Значение -1 для программной навигации по вкладкам с помощью JS.
Атрибут lang
Одним из атрибутов, о котором многие разработчики могут не заботиться, является атрибут HTML тега lang. lang — это сокращение от language, которое служит уведомлением для устройств чтения с экрана о том, что содержимое HTML-тега должно быть произнесено на определенном языке. Это будет объяснено на примере ниже
<html lang="id">
<head>
<title>Contoh penggunaan lang</title>
</head>
<button>Tutup</button>
<button lang="en">Close</button>
</html>
Последние слова
«Отсутствие ARIA лучше, чем небрежное использование ARIA» — автор RahmaUt
Ссылки
- https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
- https://www.powermapper.com/tests/screen-readers/aria/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
- https://www.powermapper.com/tests/screen-readers/aria/