Создание лучшего Интернета: руководство по доступности для разработчиков

Существует много шума вокруг доступности веб-сайтов, и в Интернете полно информации по этой теме. Когда WebAIM провел исследование 1 000 000 самых популярных веб-сайтов, они обнаружили в общей сложности 50 829 406 различных ошибок доступности, что в среднем составляет 50,8 ошибок на каждый веб-сайт. страница. Усилия по тестированию доступности проводятся в конце разработки продукта во многих, но не во всех компаниях. Следовательно, обучая разработчиков и уделяя приоритетное внимание веб-доступности в процессе разработки, можно значительно сократить количество ошибок доступности. <код>

Понимание веб-доступности

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

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

Пять способов обеспечить доступность на вашем веб-сайте

• Настройте автоматизированный конвейер специальных возможностей.

Один из самых простых и быстрых способов внедрить специальные возможности в ваше приложение — следовать философии Сдвиг влево. Это означает, что тестирование специальных возможностей должно начинаться как можно раньше в процессе разработки, а не ждать. до последнего момента. Существуют различные средства проверки доступности, которые могут помочь в настройке автоматического тестирования доступности для вашего веб-сайта: от того, что вы можете запустить вручную в своем браузере, до инструментов, которые вы можете интегрировать в конвейер CI/CD.

Бесплатные расширения браузера включают такие инструменты, как WAVE и Статистика специальных возможностей. После установки вы можете запускать их в любое время на своей веб-странице, и они будут показывать вам ошибки доступности на вашем веб-сайте, начиная от отсутствующих меток ARIA для ваших форм и заканчивая проблемами цветового контраста. Эти инструменты — отличный способ начать свое путешествие в автоматизированную доступность. Разработчики также могут использовать линтеры кода, такие как axe Accessibility Linter, чтобы выявлять проблемы по мере их кодирования в вашей среде IDE. По словам Деке, автоматизированные инструменты прямо сейчас выявлять 57 % проблем с доступностью по сравнению с 20 % в отрасли.

* Извлекайте уроки из автоматических результатов специальных возможностей.

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

Еще один способ убедиться, что вы не повторяете простые ошибки доступности, — это проверка кода — обязательно ищите недоступный код во время проверки кода! Некоторые из них, которые легко обнаружить, — это отсутствие меток ARIA для элементов, у которых нет четкой видимой метки, отсутствующий замещающий текст для изображений и отсутствующие заголовки страниц. Использование автоматизированных инструментов тестирования — это прекрасно, но их эффективность можно еще больше повысить, если вы заблаговременно исправите проблемы, которые они обычно обнаруживают.

* Навигация с помощью клавиатуры + тестирование программы чтения с экрана

Если вы хотите пойти дальше, чем автоматическое тестирование специальных возможностей, обязательно протестируйте свой веб-сайт с помощью клавиатуры. Все интерактивные элементы должны быть доступны с помощью клавиш табуляции, а такие элементы, как раскрывающиеся меню, должны быть доступны с помощью клавиш со стрелками. Дополнительную информацию о соответствующих нажатиях клавиш для различных элементов пользовательского интерфейса можно найти здесь: https://webaim.org/techniques/keyboard/< /p>

Если вы обнаружите, что что-то недоступно с клавиатуры, спросите себя: должно ли это быть доступно? Такие элементы, как статическая ячейка таблицы, не обязательно должны быть доступны с клавиатуры. Если это настраиваемый интерактивный элемент, который должен быть доступен с клавиатуры, а это не так, вам нужно будет сделать его доступным программно. Это можно сделать, добавив tabindex со значением 0, что добавит элемент в порядок табуляции веб-страницы, а затем определите обработчики событий, такие как onKeyPress, которые будут вызывать необходимое действие при нажатии клавиши.

Например, этот фрагмент кода добавляет tabIndex, равный 0, элементу кнопки, что делает его доступным с помощью клавиатуры. Обработчик событий прослушивает событие "keydown" и инициирует щелчок по кнопке, если нажата клавиша Enter.

<button id="myButton">Нажми на меня</button>

постоянная кнопка = document.getElementById("myButton");

button.tabIndex = 0;

button.addEventListener("keydown", function(event) {

if (event.key === "Ввод") {

button.click();

<код>

});

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

Экранный диктор Windows и Voiceover для Mac — хорошие варианты бесплатных программ чтения с экрана. Средства чтения с экрана синхронизируются с обычными командами навигации с помощью клавиатуры, но дополнительно имеют специальные команды для навигации по различным элементам веб-сайта. Например, для VoiceOver эти команды можно найти здесь: https://dequeuniversity.com/screenreaders/voiceover. -горячие клавиши.

* Ознакомьтесь с некоторыми инструментами отладки специальных возможностей.

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

Узнайте больше о дереве специальных возможностей здесь: https://developer.chrome. com/blog/полное-дерево-доступности/#что-есть-дерево-доступности

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

* Учет множества других нарушений

В дополнение к тестированию программ чтения с экрана и клавиатуры, которые могут помочь слепым или людям с ограниченными двигательными возможностями, вам также следует учитывать потребности людей с другими ограниченными возможностями. Если на вашем веб-сайте есть видеоролики, обязательно добавьте к ним точные подписи. Для людей с когнитивными нарушениями WCAG предлагает отличное руководство о том, как сделать контент доступным для них. Рассмотрите также другие виды инвалидности, такие как дальтонизм. Анализатор цветового контраста TPGi имеет симулятор цветовой слепоты, который может быть отличным инструментом, чтобы убедиться, что ваш веб-сайт использует доступные цвета и темы.

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

Заключение

Цифровая доступность важна для того, чтобы один миллиард людей с ограниченными возможностями на этой планете мог иметь равный доступ к Интернету. Глядя на нынешнее состояние цифровой доступности, может быть, у нас не все в порядке. Согласно недавний отчет UsableNet: «2022 год ознаменовался еще одним годом, когда было подано более 4 000 [доступных] судебных исков. ». Используя некоторые из описанных выше стратегий, разработчики могут внедрить специальные возможности в процесс разработки, а также выявлять и исправлять как можно больше ошибок до того, как кто-то разочаруется.