Wave — это бесплатный инструмент веб-доступности, созданный WEBAIM. Он используется для ручной проверки веб-страницы на accessibility это предмет различных аспектов доступности. Этот инструмент можно использовать для проверки интрасети, защищенных паролем, динамически генерируемых или конфиденциальных веб-страниц. Основные функции панели инструментов веб-доступности включают идентификацию компонентов веб-страницы, предоставление доступа к альтернативному просмотру содержимого страницы и облегчение использования сторонних онлайн-приложений. Это обеспечивает 100% конфиденциальность и безопасность отчетов о доступности.
- Tenon — это платформа для тестирования доступности, которая предлагает как автоматизированные, так и ручные проверки.
- Проверка доступности важна для обеспечения соответствия законодательству.
- Цвета переднего плана и фона должны быть достаточно контрастными, чтобы контент приложения был разборчивым для людей с нарушениями зрения.
- Magica11y позволяет проверить, какие настройки установлены у вашего пользователя.
- Рекомендации дополняются различными критериями успеха, которые оцениваются по трем уровням соответствия (A, AA и AAA), при этом уровень AA является наиболее распространенным эталоном соответствия требованиям доступности.
Распространенные мифы о тестировании веб-доступности
Механизм по обеспечению доступа и распределению (МДР) поможет лучше обеспечить такой продукцией наиболее уязвимых людей за счет эффективного и справедливого распределения ограниченных поставок. В комплекте два месяца теории и практики, интересные проекты и личный наставник. Если вы предпочитаете наглядность, воспользуйтесь проектом Гёля Пупарда (Gaël Poupard) a11y.css. Эта таблица стилей проверяет разметку на возможные риски и доступна как в формате расширения, так и в формате букмарклета. Вам доступна настройка языка, а также уровень отображаемого устройства. Если ни один из перечисленных инструментов не удовлетворяет вашим запросам, рекомендуем перейти к посту Стефани Уолтер.
Как сделать тестирование доступности?
Я добавил несколько кратких руководств для старта – одно для Windows, второе для Mac. Этот элемент может выглядеть в точности как ссылка, но пользователь клавиатуры не сможет его использовать – на span нельзя навести фокус. Учитывая, что первые две проблемы легко решить, следуя двум простым правилам – а) не удаляйте стиль фокуса и б) используйте семантически верный HTML-элемент, прямо-таки поразительно, как часто эти проблемы возникают. В статье I Used The Web For A Day With Just A Keyboard Крис Эштон приводит такой пример span, который должен быть ссылкой.
Ручное тестирование доступности
Не все пользователи с ограниченным зрением используют экранные дикторы – некоторые пользуются экранной лупой вроде ‘Zoom’ для MacOS или Magnifier для Windows. Расширение Spectrum позволяет проверить, как люди с разными нарушениями цветового восприятия (цветовой слепотой) видят наш сайт или приложение, и убедиться в достаточном контрасте разных элементов. Скорее всего, мы уже используем ESLint, поэтому издержки на этот плагин минимальны, и иногда он находит проблемы еще до того, как мы впервые увидим наш сайт или приложение в браузере. Эти простые изменения никак не повлияют на визуальные аспекты страницы, но сильно помогут тому, кто пользуется экранным чтецом! И их так легко внести, что все, кто может печатать и создавать пулл-реквесты, могут это сделать. Многие другие изменения – например, правильность порядка заголовков – тоже легко внедряются.
Контрольный список для тестирования доступности: что нужно проверить?
HTML5 Accessibility представляет собой список актуальных функций HTML и насколько они доступны для лиц с ограниченными возможностями при настройках браузера по умолчанию. Accessibility Support также предоставляет список атрибутов ARIA с информацией об их поддержке наиболее распространёнными комбинациями браузеров и средств чтения с экрана. Случается, что работа над проектом начинается вовсе без единой и согласованной цветовой палитры. Как только разработка переходит в активную стадию, постоянный импорт цветовых палитр в среду разработки может вызвать раздражение.
Проверка доступности сайта: обзор инструментов для accessibility testing
Отличается цвет от любого браузера, потому что это букмарклет. Инструмент тестирования заголовков отлично подходит для тестирования неправильных уровней заголовков и вложенности и не запускает страницу с элементом H1. Имеет старую платформу инструментов разработчика Google Accessibility, в которой есть неплохие тесты. Философия «без ложных срабатываний» означает, что вы не будете перегружены множеством ошибок доступности. Я могу использовать WAVE Online в Safari, когда тестирую публичный сайт. Нажимайте значки, которые появляются, и вы можете прочитать ошибки доступности или сообщения об успешности в подсказках значков.
Фильтр по уровню критичности особенно полезен, поскольку автоматизированное тестирование зачастую выдаёт ложноположительные результаты. Сервис WAVE от организации WebAIM — неотъемлемая часть моего набора инструментов. Он доступен в виде браузерного расширения, сервиса массового тестирования и API.
Требование 3: Заявленный уровень доступности поддерживается на протяжении всего процесса (цепочки страниц)
Это помогает пользователям с нарушениями зрения легче перемещаться по приложению и понимать иерархию контента. Тестирование можно провести с помощью программ чтения с экрана, чтобы убедиться в доступности и точности заголовков. В целом, тестирование доступности необходимо для обеспечения доступности цифрового контента для всех, независимо от их способностей. Включив тестирование доступности в процесс разработки приложений, разработчики могут гарантировать, что их продукты инклюзивны и могут использоваться кем угодно.
Дополнительный плюс ChromeLens в том, что он позволяет показать путь табуляции сквозь контент. В целом находит все те же проблемы, что и Lighthouse, но вы можете проинспектировать, исправить и перезапустить аудит, чтобы проверить исправит ли ваше изменение проблему или нет. Все расширения ниже приведены на примере использования в Google Chrome. Большой список для всевозможных браузеров вы можете найти в конце статьи. Для навигации можно пользоваться клавишами из шага 1, переходя между фокусируемыми элементами (ссылками, кнопками, полями), и курсор VoiceOver будет следовать за вами. Для передвижения курсора через все элементы, а не только фокусируемые, используйте VO + → / ←.
Как и любой другой вид, это тестирование может проводиться как вручную, так и с помощью средств автоматизации. Цель тестировщика должна заключаться только в том, чтобы проверить, выполняются ли рекомендации, и насколько легко и просто пользоваться приложением. CSS в основном используется для описания внешнего вида страницы. Отключив его, мы можем проверить цвет фона, стиль текста и внешний вид текста. Нужно изучать проблемы доступности приложений и проводить обучение сотрудников.
Но есть несколько пунктов для которых это критически необходимо. Без скринридеров достаточно тяжело понять будет ли функциональность действительно доступна для пользователей или нет. Так же часть пунктов прямо или косвенно подразумевают работу веб-приложения с вспомогающими устройствами (assistive technologies), такими как скринридеры. Автоматизированные инструменты не могут найти все проблемы – их количество варьирует от до 71%, если сравнивать результаты работы разных инструментов. Для поиска оставшихся проблем нужно задуматься о том, как люди с ограниченными возможностями пользуются сетью. В следующем шаге мы разберемся со вспомогательными технологиями и начнем пользоваться одной из них.
Во время ручного чтения экрана и тестирования доступности только на клавиатуре также можно запускать автоматические инструменты тестирования из расширений браузера и букмарклетов, чтобы найти больше проблем. Гораздо проще узнать, как использовать простой инструмент тестирования специальных возможностей, чем программное обеспечение вспомогательных технологий. Чтение экрана очень сложный процесс, и иногда тестеры могут сообщать ложноположительные ошибки доступности, основанные на недоразумениях относительно нормального поведения считывателя.
IT курсы онлайн от лучших специалистов в своей отросли https://deveducation.com/ here.
Leave a comment