Доступность в Интернете

Откройте для себя основы специальных возможностей в HTML

Важно, чтобы при разработке HTML учитывалась доступность.

Наличие доступного HTML означает, что люди с ограниченными возможностями могут использовать Интернет. Бывают полностью слепые или слабовидящие пользователи, люди с проблемами слуха и множество других людей с ограниченными возможностями.

К сожалению, эта тема не имеет той важности, которая ей нужна, и не кажется такой крутой, как другие.

Что делать, если человек не можетвидетьваша страница, но все еще хочет потреблять ее содержимое? Во-первых, как они это делают? Они не могут использовать мышь, они используют то, что называетсячитатель экрана. Вы не должны этого себе представить. Вы можете попробовать прямо сейчас: Google предоставляет бесплатныйРасширение ChromeVox для Chrome. Специальные возможности также должны позволять инструментам легко выбирать элементы или перемещаться по страницам.

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

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

Что это значит сделать HTML доступным? Позвольте мне проиллюстрировать основные вещи, о которых вам нужно подумать.

Примечание: есть еще несколько вещей, о которых нужно позаботиться, которые могут быть включены в тему CSS, например, цвета, контраст и шрифты. Или жекак сделать изображения SVG доступными. Я не говорю о них здесь.

Используйте семантический HTML

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

Важно использовать правильную структуру тегов заголовков. Самое главное - этоh1, и вы используете более высокие числа для менее важных, но все заголовки одного уровня должны иметь одно и то же значение (подумайте об этом как о древовидной структуре)

h1
	h2
		h3
	h2
	h2
		h3
			h4

Использоватьstrongиemвместоbиi. Визуально они выглядят одинаково, но первые 2 имеют большее значение, связанное с ними.bиiбольше визуальных элементов.

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

Стол должен иметьcaptionтег, описывающий его содержание:

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

Использоватьaltатрибуты для изображений

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

<img src="dog.png" alt="picture of my dog">

Это также хорошо для поисковых систем, если у вас есть стимул добавить его.

Использоватьroleатрибут

ВroleАтрибут позволяет назначать определенные роли различным элементам на странице.

Вы можете назначить множество различных ролей: дополнительные, список, элемент списка, основной, навигация, регион, вкладка, предупреждение, приложение, статья, баннер, кнопка, ячейка, флажок, информация о содержимом, диалог, документ, лента, рисунок, форма, сетка, gridcell, заголовок, img, список, строка, группа строк, поиск, переключатель, таблица, панель вкладок, текстовое поле, таймер.

Это много, и для полного ознакомления с каждым из них я даю вамэта ссылка MDN. Но вам не нужно назначать роль каждому элементу на странице. Программы чтения с экрана в большинстве случаев могут сделать вывод по тегу HTML. Например, вам не нужно добавлять тег роли к семантическим тегам, таким какnav,button,form.

Возьмемnavпример тега. Вы можете использовать его для определения навигации по страницам следующим образом:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

Если бы ты былпринужденныйиспользоватьdivтег вместоnav, вы бы использовалиnavigationроль:

<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</div>

Итак, вот вам практический пример:roleиспользуется для присвоения значимого значения, когда тег уже не передает значение.

Использоватьtabindexатрибут

ВtabindexАтрибут позволяет вам изменять порядок, в котором нажатие клавиши Tab выбирает «выбираемые» элементы. По умолчанию только ссылки и элементы формы «выбираются» при навигации с помощью клавиши Tab (и вам не нужно устанавливатьtabindexна них).

Добавлениеtabindex="0"делает элемент доступным для выбора:

<div tabindex="0">
...
</div>

С помощьюtabindex="-1"вместо этого удаляет элемент из этой навигации на основе вкладок, и это может быть очень полезно.

Использоватьariaатрибуты

ARIA - это аббревиатура, означающая «Доступные полнофункциональные Интернет-приложения» и определяющая семантику, которая может применяться к элементам.

aria-label

Этот атрибут используется для добавления строки для описания элемента.

Пример:

<p aria-label="The description of the product">...</p>

Я использую этот атрибут на боковой панели своего блога, где у меня есть поле ввода для поиска без явной метки, так как оно имеет атрибут заполнителя.

aria-labelledby

Этот атрибут устанавливает корреляцию между текущим элементом и тем, который его маркирует.

Если вы знаете, какinputэлемент может быть связан сlabelэлемент, это похоже.

Мы передаем идентификатор элемента, который описывает текущий элемент.

Пример:

<h3 id="description">The description of the product</h3>

<p aria-labelledby=“description”> … </p>

aria-describedby

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

Пример:

<button aria-describedby="payNowDescription" >Pay now</button>

<div id=“payNowDescription”>Clicking the button will send you to our Stripe form!</div>

Используйте aria-hidden, чтобы скрыть контент

Мне нравится минималистичный дизайн моих сайтов. Мой блог, например, в основном просто контент, с некоторыми ссылками на боковой панели. Но некоторые вещи на боковой панели - это просто визуальные элементы, которые не доставляют впечатлений человеку, который не видит страницу. Например, мой логотип или селектор темной / яркой темы.

Добавлениеaria-hidden="true"Атрибут скажет программам чтения с экрана игнорировать этот элемент.

Где узнать больше

Это всего лишь введение в тему. Чтобы узнать больше, я рекомендую эти ресурсы:

Скачать мою бесплатнуюСправочник по HTML


Дополнительные руководства по HTML: