Доступность веб-сайтов (также известная как a11y) относится к практике создания веб-сайтов, которыми может пользоваться кто угодно — будь то человек с ограниченными возможностями, медленным соединением, устаревшим или сломанным оборудованием или просто человеком, находящимся в неблагоприятной среде. Например, добавление субтитров к видео поможет как глухим и слабослышащим пользователям, так и пользователям, которые находятся в шумной обстановке и не слышат свой телефон. Точно так же проверка того, что ваш текст не слишком контрастен, поможет как пользователям с плохим зрением, так и пользователям, которые пытаются использовать свой телефон при ярком солнечном свете.

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

Обычно это делается в верхней части, App.vue поскольку это будет первый фокусируемый элемент на всех ваших страницах

Чтобы скрыть ссылку, если она не находится в фокусе, вы можете добавить следующий стиль

Как только пользователь изменит маршрут, верните фокус на ссылку пропуска. Этого можно добиться, вызвав фокус по ссылке на шаблон ссылки пропуска (при условии использования vue-router)

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

Пользователи могут перемещаться по приложению с помощью заголовков. Наличие описательных заголовков для каждого раздела вашего приложения упрощает пользователям прогнозирование содержимого каждого раздела

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

При создании формы вы можете использовать следующие элементы: form, label, input, textarea и button

Метки обычно размещаются сверху или слева от полей формы

Обратите внимание, как вы можете включить autocomplete='on' элемент формы, и он будет применяться ко всем входным данным в вашей форме. Вы также можете установить разные значения атрибута автозаполнения для каждого ввода

Предоставьте метки, описывающие цель всех элементов управления формой; связывание for и id

Если вы проверите этот элемент в инструментах разработчика Chrome и откроете вкладку «Доступность» на вкладке «Элементы», вы увидите, как входные данные получают свое имя из метки

Вы также можете дать вводу доступное имя с помощью aria-label

Не стесняйтесь проверить этот элемент в Chrome DevTools, чтобы увидеть, как изменилось доступное имя

Использование aria-labelledby аналогично , aria-label за исключением того, что оно используется, если текст метки виден на экране. Он связан с другими элементами по их признаку, id и вы можете связать несколько id элементов

aria-describedby используется так же как и aria-labelledby за исключением того, что предоставляет описание с дополнительной информацией, которая может понадобиться пользователю. Это можно использовать для описания критериев для любого ввода

Вы можете увидеть описание, проверив Chrome DevTools

Избегайте использования заполнителей, поскольку они могут сбить с толку многих пользователей

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

Лучше всего предоставить всю информацию, необходимую пользователю для заполнения форм, вне каких-либо входных данных

Добавляя инструкции для полей ввода, обязательно правильно свяжите их с вводом. Вы можете предоставить дополнительные инструкции и связать несколько идентификаторов внутри файла aria-labelledby. Это позволяет создать более гибкую конструкцию

Альтернативно вы можете прикрепить инструкции к входным данным с помощью aria-describedby

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

Давайте посмотрим на это поле поиска

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

Мы можем использовать CSS, чтобы визуально скрыть элементы, но оставить их доступными для вспомогательных технологий:

При добавлении aria-hidden="true" элемент будет скрыт от вспомогательных технологий, но останется визуально доступным для других пользователей. Не используйте его для фокусируемых элементов, а только для декоративного, дублированного или закадрового контента.

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

Вы можете использовать эту технику для создания функциональных изображений

Эти изображения будут действовать как кнопка типа отправки в формах

Иконки

По оценкам Всемирной организации здравоохранения, 15% населения мира имеют ту или иную форму инвалидности, из них 2-4% — тяжелую. По оценкам, это 1 миллиард человек во всем мире; что делает людей с ограниченными возможностями крупнейшим меньшинством в мире.