5 советов по веб-доступности

Семантика HTML, ARIA, дерево специальных возможностей и многое другое

В 2011 году Всемирная организация здравоохранения сообщила, что 15% населения мира имеет ту или иную форму инвалидности. Существуют различные виды инвалидности:

• физический
• познавательный
• неврологический

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

Веб-макеты браузера являются результатом сгенерированного файла Render Tree. Render Tree — это комбинация дерева CSS (CSSOM) и файла DOM Tree. Однако браузер не останавливается на достигнутом. Это не останавливается на достигнутом. Построено дополнительное дерево, Accessibility Tree. Он получен из DOMTREE.

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

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

1. Помните о семантике HTML

Браузер получает дерево DOM для создания дерева специальных возможностей. Это возможно, потому что дерево DOM имеет некоторое семантическое значение, неявное в HTML. Это означает, что, правильно используя семантику HTML, мы получим более доступный сайт.

Давайте посмотрим на некоторые важные вещи, которые следует учитывать:

Примите природу элемента

Нам нужно использовать правильный инструмент для правильной работы. Например, мы могли бы использовать div для создания блестящей кнопки.

<div onClick={addToCart()}>Add to cart</div>

Браузер не поймет, что div выше — это кнопка. Есть несколько способов намекнуть программе чтения с экрана об этом. Хотя это не рекомендуется. Простой способ исправить приведенный выше код — просто использовать элемент button.

<button onClick={addToCard()}>Add to card</button>

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

Мы не должны злоупотреблять элементом div. Вместо этого мы можем использовать такие элементы, как nav, footer, article, section, address, aside элементы. Они будут предоставлять некоторый важный неявный контент на устройства пользователя.

Нетекстовое содержимое

Для тех элементов, которые не приводят к текстовому содержимому, браузеру трудно рассуждать.

Для элементов input есть простое семантическое решение: используйте элемент label. У нас есть два способа его использования.

• 1. Явный (рекомендуется): с помощью элемента label с атрибутом for.
• 2. Неявно: путем переноса input в элемент label.

Есть несколько вещей, которые нужно иметь в виду. Ввод label должен быть виден. В противном случае программы чтения с экрана не будут его озвучивать. Интерактивные элементы, такие как ссылки, не рекомендуются внутри любых label. Они могут привести к случайным щелчкам или просто не могут быть правильно озвучены.

Правильное использование заголовков

В HTML есть шесть уровней заголовков разделов от <h1> до <h6>. Они актуальны как для пользователей, так и для поисковых систем. Правильная структура поможет лучше сориентировать пользователей и правильно ранжировать ваш сайт.

Вот список того, что нужно иметь в виду:

• На вашем сайте всегда должен быть только один h1. Он должен быть заголовком вашей страницы. Он должен содержать соответствующее описание содержания.
• Избегайте использования этих элементов для изменения размера текста. В этом сценарии следует использовать font-size.
• Избегайте пропуска уровней заголовков. Начните с h1 до h6.

Дайте ссылкам правильное название

Предпочтительно, чтобы содержимое ссылок имело смысл само по себе. Они не должны полагаться на окружающие элементы, чтобы быть четкими. Также текст ссылки должен быть уникальным.

Некоторые полезные рекомендации:

• Click Here, More, Read More тексты не рекомендуются.
• Уникальный текст ссылки предпочтителен
• Текстовые ссылки предпочтительнее ссылок на изображения. При необходимости изображение должно включать атрибут alt.

2. Включите замещающий текст для изображений

Мы уже видели ранее, насколько сложно inputs для программ чтения с экрана. То же самое справедливо и для изображений. Программа чтения с экрана нуждается в альтернативном способе понимания содержимого изображения.

Вот где в игру вступает атрибут alt. Это собственный HTML-атрибут, предоставляющий пользователю альтернативную информацию, когда он не может просмотреть элемент. Это может быть связано с тем, что он использует программу чтения с экрана или потому, что изображение не удалось загрузить. Даже если поисковые роботы теперь могут «видеть» изображения, наличие точного описания поможет в SEO.

Некоторые полезные рекомендации:

• текст должен описывать изображение, если оно содержит информацию
• если изображение является ссылкой, оно должно описывать, куда оно ведет
• alt="" может использоваться в косметических украшениях, не имеющих отношения к пользователю.

3. Используйте атрибуты ARIA

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

// ❌ bad usage
<div role="checkbox”>...</div>
// ✅ recommended, `role=checkbox` is implicit
<input type=”checkbox” name="terms">

// ✅ Using status for success messages
<p role="status">Your changes were saved.</p>

// ❌ will damage accessiblity
{
  outline: none;
  outline: 0;
}