Визуализация и отладка доступности сайта с помощью Tota11y

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

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

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

Это работает как библиотека JavaScript, которую можно подключить к любой странице. Вы могли бы также запустить его вручную на живых сайтах через Chrome DevTools, но это не всегда полезно, если вы не работаете на чужом сайте.

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

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

С этой библиотекой вы найдете проблемы и решения, написанные простым языком. Намного легче потреблять, и решения быстры.

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

Все это с открытым исходным кодом под лицензией MIT, поэтому с ним действительно легко работать..

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

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