Чтобы пользователю было удобно, рамка фокуса элементов должна быть большой — иначе человеку будет сложнее по ним попасть. VoiceOver позволяет перемещать фокус с помощью касания, пользователь водит пальцем по экрану, а VoiceOver озвучивает элементы. Благодаря этому у интерфейса появятся структура и смысловые блоки. VoiceOver добавит элементам слово «заголовок», а пользователь сможет перемещаться по ним вертикальными свайпами с помощью ротора. С их помощью вы можете сделать так, чтобы VoiceOver озвучивал текст, рассказывал пользователю об обновлениях на экране или ставил фокус на другой элемент. Они помогают VoiceOver идентифицировать элемент, понять, как с ним взаимодействовать и определить, какую информацию в итоге зачитывать пользователю.
Также перед подробным аудитом рекомендуется провести технический и исправить самые очевидные проблемы с кодом. Тогда итоговый аудит будет стоить меньше и выявит более серьёзные и фундаментальные проблемы с юзабилити. Так вы избежите лишних трат на разработку и дизайн, а ещё уменьшите количество барьеров для пользователей.
К тому же наша идея понравилась и используется теперь и другими командами Заказчика. Мы все идём по одному пути, вместе ищем узкие места и улучшаем их, стараемся сделать процесс общим, удобным для каждого из его участников. Далее приведу немного обезличенный пример того, как это может выглядеть.
Атрибут Class В Html На Примерах
Если нужно провести юзабилити-тестирование, то сценарий хорошо составить таким образом, чтобы тест выявлял только проблемы с доступностью, а не общие проблемы юзабилити. К ручному идеально привлекать не только экспертов, но и пользователей вспомогательных технологий. А перед этим лучше исправить критичные ошибки, которые обнаружили автоматические инструменты.
- В гайде «Практик доступности» собраны самые важные рекомендации по доступности iOS-приложений.
- Интересно, что aXe достаточно умен, чтобы знать, что синяя коробка, содержащая нашу форму, имеет непрозрачность (0,9) с изображением за ней.
- Это поможет избежать многих проблем и не исправлять их каждый раз, когда что-то изменяется в интерфейсе.
- Многие аудиторские компании оценивают продукты для составления публичных заявлений, шаблонов добровольной доступности (VPAT) и отчётов о соответствии ей (ACR).
- Пробуйте различные инструменты и технологии, соберите набор для тестирования доступности, который подходит вам наилучшим образом.
Пришло время подобрать репрезентативные страницы, их состояния и пользовательские пути. На выбор влияют размеры сайта и его страниц, их новизна, сложность функциональности и другие похожие характеристики. WCAG-EM (Website Accessibility Conformance Evaluation Methodology, Методология оценки сайтов на соответствие доступности) — публичная методология W3C.
Voiceover
И задача каждой компании – сделать свой цифровой контент доступным для всех пользователей сети Интернет, включая людей с инвалидностью. Мы должны иметь возможность завершить все важные действия на сайте или в приложении, не дотрагиваясь до мышки, трекпада или тачскрина. В любой момент мы должны понимать, какой элемент находится в фокусе. В Windows есть встроенный диктор экрана – Narrator, но большая часть пользователей экранных дикторов для Windows устанавливает другие приложения – наиболее популярны NVDA и JAWS.
Прежде чем начать работу над доступным сайтом, необходимо четко определить конкретные потребности вашей целевой аудитории. Сайт должен быть приведен в соответствие с рекомендациями, изложенными в Руководстве по доступности веб-контента (WCAG). Эти тесты могут быть неплохим смоук-тестом доступности, убеждающимся, что мы не сломали сайт или приложение. Однако cypress-axe неудобен для анализа страниц, уже имеющих проблемы доступности.
Функция FastPass ищет две наиболее распространенных проблемы доступности, и это хороший шаг к улучшению доступности сайта или приложения. Это расширение отлично подходит для аудита доступности, но надо не забывать запускать его каждый раз, когда в приложении что-то добавляется или меняется. Иногда оно выдает ложноотрицательные результаты – например, если не может определить цвет фона и сообщает, что у текста недостаточный цветовой контраст. Выявление (и исправление) проблем доступности – важная часть навыков любого фронтэнд-разработчика, но зачастую сложно отделить полезные инструменты и техники от менее полезных. К тому же существует множество ложных представлений, поэтому я решил написать статью о тех инструментах и техниках, которыми пользуюсь сам, тестируя веб-доступность.
После его установки любой экран в любом приложении можно проверить на наличие проблем с accessibility. Это полномасштабный сервис автоматического тестирования на доступность, который существует в двух версиях – платной и бесплатной. Он полноправно заслужил быть в пятерке лучших дополнений тестирования. Я предпочитаю точный мастер / подробный вид, но SiteImprove делает все возможное с единственным ограничением столбца. SiteImprove очень популярен в водах, в которых мы плаваем (местное и центральное правительство, высшее образование, некоммерческое и т. д.). Поэтому очень полезно иметь инструмент SiteImprove для проверки доступности наших пользовательских интерфейсов.
Я считаю, что это ошибка, и я вернул ее в поддержку Tenon. После этих исправлений давайте возьмем их за другое вращение в инструментах тестирования. Из своего опыта мы знаем, что доступность крайне важна на любых ресурсах, ведь не угадаешь заранее, кто может начать пользоваться твоим ресурсом уже завтра.
Появление новых типов контента или выводов — сигнал о том, что случайная выборка получилась нерепрезентативной. В этом случае нужно вернуться к третьему и второму шагу, чтобы расширить выборку с учётом новых типов и состояний. Это нужно повторять до тех пор, пока обе выборки не будут хорошо отражать контент и структуру сайта. Вначале стоит убедиться, что выбранные страницы соответствуют всем рекомендациям. Проще это сделать, если их разбить на отдельные компоненты. Например, на заголовки разных уровней, меню в хедере и футере, строку поиска и другие.
Wave
Так мы и решили, познакомившись с крутыми ребятами из подразделения, лидирующего процесс улучшения доступности всех цифровых продуктов экосистемы. Они заложили нам в беклог зерно, из которого по сей день продолжает расти прекрасный цветок. Также можно организовать тренинги и внутренние митапы по доступности. Так повысите уровень знаний, не потеряете их вместе с уволившимися сотрудниками и эффективнее будете онбордить новых людей. Можно попросить помощи у экспертов по доступности с инвалидностью.
Более того, им понравилась идея менять толщину рамки, чтобы не только цветом, но и размером показывать изменение состояния элементов в фокусе. Собственно, таков был наш путь введения практики делать весь UI доступным. Отправной точкой для нас было использование семантики HTML5, поэтому в крупную клетку все заголовки и секции были уже доступны для быстрой навигации и использования. Я только вышел из продуктовой команды и попал в платформу (на тот момент скорее в core-команду), быстро ухватившись за библиотеку базовых компонентов, которая только-только начинала зарождаться.
Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен. Чтобы сделать сайт доступным, необходимо следовать ряду правил и критериев, установленных организацией W3C. Она создала стандарт доступности сайтов, его актуальная версия — WCAG 2.1. Улучшение accessibility вашего приложения – это возможность взглянуть на него с другой стороны, усовершенствовать общее качество вашего приложения и обеспечить всем вашим пользователям приятный опыт взаимодействия с ним. Хорошей новостью является то, что путем несложных телодвижений можно порой существенно улучшить ситуацию с accessibility без глобальных изменений вашего приложения. Это приложение созданное Google специально для поиска распространенных проблем с accessibility.
Если вам кажется, что навигация по сайту неприятна или раздражает – вы, скорее всего, не одиноки. Поверх интерфейса появится кнопка сканирования его на доступность. Как и в Accessibility Inspector появится список с найденными проблемами. Каждый из нас accessibility testing это хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.
Теперь он, например, по стрелочкам позволяет посмотреть конкретный день недели в месяце. А Slider был открыт для screen reader за 15 минут реализации задачи. Отныне у нас заблокировано внедрение компонентов, содержащих aria-hidden, если того не требует конкретное бизнес-требование. Относительно https://deveducation.com/ большим успехом для нас стало внедрение в UI-тесты этапа A11Y-тестов в CI этапе сборки. Суть реализации заключалась в том, чтобы сценарий отправил код Axe в браузер, запустил его там и вернул все vulnerabilities, и так для каждого состояния. Трудности встречались даже в самых простых компонентах – обычный тег img.
Axe-core – это библиотека, проверяющая доступность HTML в браузере. Она более мощная по сравнению со статическим анализом кода вроде ESLint, так как находит больше проблем – например, убеждается, что у текста достаточный цветовой контраст. Скорее всего, мы уже используем ESLint, поэтому издержки на этот плагин минимальны, и иногда он находит проблемы еще до того, как мы впервые увидим наш сайт или приложение в браузере.
Дабы извлечь из статьи максимум пользы, проделайте все это самостоятельно. На большинстве устройств приложение TalkBack уже предустановлено. Это программа чтения с экрана позволяет озвучивать элементы и управлять устройством с помощью жестов, а также печатать с помощью экранной клавиатуры Брайля. Это медленнее, чем тесты в браузере, но главное предостережение при передаче URL-адреса в версию браузера состоит в том, что для вашего сайта / интерфейса пользователь должен публично получить доступ к Tenon. Пока я просто собираюсь использовать ngrok для создания временного общедоступного URL-адреса для моего локального хоста и предоставить эту ссылку для Tenon. Lighthouse немного мягче, чем WAVE для этого образца пользовательского интерфейса, только жалуясь на проблемы с alt и tabindex .
Убедитесь, Что У Видео
Если сайт небольшой, то можно не искать специально страницы для выборки. Опционально можно поискать значимые страницы для людей с особыми потребностями. На них обычно находится информация о специальных возможностях, инструкции и отдельные контакты для обратной связи или помощи. Методология — это набор методов, правил и этапов, который помогает стандартизировать процесс аудита. Особенно, когда в команде нет специалистов по доступности.
Привлекайте к юзабилити-тестированию людей с разнообразными особыми потребностями и особенностями. К примеру, человек с когнитивными нарушениями не знает про доступность для людей с глухотой. Такое разнообразие респондентов поможет найти больше проблем с доступностью. Для отчётов об аудите инструментов для разработки и проверки доступности используют машиночитаемый формат EARL (Evaluation and Report Language, Язык для оценки и отчёта). На этом шаге оцениваем страницы из выборок на соответствие рекомендациям из чек-листа.
Важно учитывать, что существуют особенности зрения, которые проявляются в неверном восприятии цветов, например, дальтонизм. Поэтому рекомендуется добавлять состояния интерактивным элементам не только в виде изменения цвета, но и с помощью других визуальных средств. Выберите вариант «Принять», чтобы согласиться на подобное использование необязательных файлов cookie, или «Отклонить», чтобы отказаться от такого использования. Вы можете изменить свои предпочтения в любое время в разделе настроек. В некоторых случаях, функционала AccessibilityDelegateCompat может не хватать, и придется писать свой Accessibility service для логики вашего приложения.
Подробнее узнать о критериях доступности, инструментах проверки и научиться создавать доступные для каждого пользователя сайты, можно на нашем специализированном курсе. Доступность сайта должна учитываться на каждом этапе разработки. В процессе вёрстки рекомендуется постоянно проверять сайт на доступность и вносить изменения, чтобы не упустить ни один из критериев. Помимо проверки контрастности, есть сервисы для симуляции дальтонизма и других особенностей зрения, чтобы проверить, как видят сайт люди с другим цветовосприятием. Например, в Chrome DevTools есть встроенный симулятор особенностей зрения, в котором вы можете проверить любой сайт. Это можно сделать, добавив инструмент Rendering и выбрав в пункте Emulate imaginative and prescient deficiencies нужную особенность зрения.