Веб-сайты должны быть доступны для всех. Вот что вам нужно знать.

Создание веб-страницы — это не просто создание веб-страницы. Важным аспектом разработки внешнего интерфейса является обеспечение доступности пользовательских интерфейсов для всех в Интернете, включая людей с нарушениями зрения и слуха. Вы должны писать свой код с мыслью об этих людях. Как вы предоставляете людям с нарушениями зрения такой же доступ к вашему веб-сайту, как и людям без проблем со зрением? Прочитайте эту статью, чтобы узнать.

Почему разработчики должны беспокоиться о веб-доступности?

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

Цифровая доступность не должна быть вариантом для разработчиков. Это необходимо для любого профессионального бренда. К этому относятся серьезно: как сообщает Разнообразие, кто-то подал в суд на The Pokémon Company в 2019 году из-за недоступного веб-сайта.

instagram viewer

Веб-доступность с помощью HTML

В HTML существуют правила, обеспечивающие разработку доступных веб-сайтов. В этом разделе объясняются некоторые из этих правил.

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

Семантические элементы в HTML — это элементы, имеющие значения. В HTML5 около 100 элементов. Некоторые элементы, такие как и, не являются семантическими, в то время как другие теги HTML являются семантическими. Хотя отказаться от использования этих несемантических элементов может быть невозможно, важно включить в свою работу как можно больше семантических элементов. Вот список популярных семантических элементов:

Рассмотрим этот пример из Таасклы:

Взглянув на изображение выше, вы увидите следующие элементы:

  • Заголовок
  • Изображение
  • Параграф
  • Три кнопки

Несложно предположить, что разработчики использовали теги для размещения элементов на экране. При более внимательном рассмотрении кодов вы заметите, что вместо этого они использовали шесть семантических тегов. Упрощенный код выглядит так:

<раздел>
<изображениеисточник="/hero.png"альтернативный="герой">
<статья>
<h1>Найдите нужные продукты и услуги в нужное время.h1>
<п>
 Обувь ручной работы, обновление прически, менеджер социальных сетей, отправка поручений, источник доходаб>— вы называете это, Taaskly получил это. Найдите все продукты или услуги, которые вам нужны сегодня, когда вы зарегистрируетесь и используете Taaskly. 
п>
<аhref="/главная/главная">Отдать задачу на аутсорсинга>
<аhref="/главная/услуги"> Найти услугуа>
<аhref="/главная/торговая площадка" >Найти магазина>
статья>
раздел>

Из фрагмента HTML вы можете наблюдать следующее:

  1. Изображения, текст и кнопки находятся внутри элемент.
  2. элемент поровну делит и элементы.
  3. элемент содержит, , и элементы.
  4. Кнопки кодируются как элементы; следовательно, это ссылки, а не кнопки. Как правило, всегда используйте ссылки, чтобы направить пользователя на другую страницу или представление, и используйте кнопки, когда вы хотите, чтобы пользователь выполнял действие только в том же представлении. Видеть Страница кнопки Angular для получения дополнительной информации об этом.

Используйте ориентиры, чтобы обеспечить четкую структуру страницы

Ориентиры — это семантические теги, которые помогают слепым пользователям перемещаться по веб-странице с помощью программ чтения с экрана. С помощью ориентиров легко определить различные части веб-страницы. веб-сайт Apple использует ориентиры.

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

По изображению мы можем вывести наверху, а содержащий, и элемент. Примечательно, что на изображении видно «навигация», "область", и «информация о содержании». Они известны как роли, которые мы рассмотрим позже.

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

<навигацияария-лейбл = "Глобальный">
<навигацияария-лейбл = "местная навигация">
<навигацияария-лейбл = "яблочный каталог">

Использование меток может помочь программам чтения с экрана пропустить любую навигацию.

Используйте атрибуты роли, имени и значения

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

  1. Нет собственного элемента HTML для того, чего вы хотите достичь. Например, если вам нужно использовать потому что ни один другой элемент не подходит для этой роли.
  2. Вы не можете использовать семантические элементы по техническим причинам. Если вы используете фреймворк, который использует когда было бы лучше использовать, вы должны будете определить пользовательский элемент управления.

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

Роль

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

<заголовокроль = "навигация">
<навигацияроль = "баннер">
<дивроль = "навигация">

Имя

Имя — это описательный текст или метка, связанная с элементом HTML. Самая простая форма имени — это текст элемента. Вот пример:

<дивроль = "кнопка">Нажми на меня!див>

В приведенном выше фрагменте "Нажми на меня!" - это название элемент. Оно также известно как доступное имя.

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

<навигацияроль = "навигация"ария-лейбл = "глобальная навигация">...навигация>

Вы должны отметить, что имя атрибут отличается от доступного имени. Этот фрагмент кода дает лучшее понимание:

 атрибут имени 
<навигацияроль = "навигация"имя = "глобальная навигация">...навигация>
 доступное имя 
<навигацияроль = "навигация"ария-лейбл = "глобальная навигация">...навигация>

Видеть Статья TGPi о доступных именах чтобы получить более глубокое понимание этого.

Ценить

В HTML атрибут value может предоставить дополнительную информацию об элементе. Значения предоставляют информацию о состоянии компонента для пользовательских компонентов, таких как аккордеоны. Например, аккордеон может быть либо открытым, либо закрытым.

Вы можете повысить ценность своих элементов несколькими способами. Этот фрагмент показывает некоторые из способов, которыми вы можете это сделать:

 ария-валютеу 
ценить
<входтип="флажок"имя="продукт[]"ценить="1">

Приоритет веб-доступности для инклюзивного онлайн-опыта

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