Доступность в Chrome DevTools
Опубликовано: 2022-03-10Я провожу много времени в DevTools, и при этом я узнал о некоторых более «скрытых» функциях в DevTools и хотел бы поделиться некоторыми из них с вами в этой статье — особенно в отношении специальных возможностей.
В этой статье используется Google Chrome, так как это браузер, который я использую и чувствую себя комфортно. При этом Firefox, Safari и Edge добились больших успехов в своих инструментах разработчика, и у них определенно есть некоторые отличные собственные функции, связанные с доступностью.
Возможно, вы уже знакомы с DevTools, но вот краткое напоминание о том, как проверить элемент на веб-странице:
- Откройте интересующую вас веб-страницу в Google Chrome.
- Используйте сочетание клавиш Cmd + Shift + C ( Ctrl + Shift + C в Windows)
- Ваш указатель находится в режиме проверки элемента, продолжайте и щелкните элемент на веб-странице.
Таким образом, вы открыли DevTools и начали проверять элементы. Разные панели соответствуют разным функциям, например, отладке JavaScript, производительности и так далее.
Повсюду разбросаны функции, связанные с доступностью, поэтому давайте рассмотрим, что они делают, где находятся и как их использовать.
Контрастность
Это функция для проверки того, имеет ли проверяемый текст удовлетворительный цветовой контраст по отношению к цвету фона.
Как правило, высокий уровень контраста между цветом текста и основным фоновым цветом означает более разборчивый текст для пользователей с разными способностями. Кроме того, это помогает поддерживать пользователей, читающих ваш текст в различных условиях окружающей среды, рассмотрите эти примеры, которые могут повлиять на то, как пользователь воспринимает разборчивость текста:
- Глядя на экран на улице с большим количеством солнечного света
- Мобильное устройство полностью понизило яркость экрана, чтобы продлить срок службы батареи.
«Намерение состоит в том, чтобы обеспечить достаточный контраст между текстом и его фоном, чтобы его могли читать люди с умеренно слабым зрением».
- Понимание критерия успеха 1.4.3: контраст (минимум)
Использование инструмента коэффициента контрастности может дать нам немедленный ответ «да/нет» на вопрос: соответствует ли этот текст минимальному стандарту контрастности. Использование этого инструмента может помочь повлиять на дизайн и цветовую схему вашего веб-сайта, что может сделать контент более удобочитаемым для пользователей с плохим зрением.
Функция коэффициента контрастности, доступная в инструменте выбора цвета, может информировать вас о том, были ли соблюдены минимальные требования к контрастности. Чтобы получить доступ к этой функции:
- Проверка текстового элемента с помощью DevTools
- Найдите свойство цвета на панели «Стили» и щелкните маленький цветной квадрат, чтобы открыть инструмент выбора цвета.
- Нажмите на текст с надписью «Коэффициент контрастности», который представляет дополнительную информацию по этому вопросу.
Три коэффициента представляют собой:
- Ваш текущий коэффициент контрастности
- Минимальный коэффициент контрастности (AA)
- Повышенный коэффициент контрастности (AAA)
В качестве упражнения для себя: перетащите круглую палитру цветов по цветовому спектру и отметьте точки, в которых удовлетворяются минимальная контрастность и повышенная контрастность.
Об этой функции также можно сообщить вам через отчет Lighthouse, описанный в разделе Lighthouse этой статьи.
Инспектор доступности
Это относится к панели DevTools, которая позволяет просматривать различные свойства специальных возможностей и информацию ARIA для узлов DOM.
ARIA относится к набору свойств, обычно используемых в HTML, что, в свою очередь, делает ваш веб-сайт более доступным для людей с разными способностями. Его абсолютно стоит использовать на ваших собственных веб-сайтах, но для этого требуется понимание основ веб-доступности, чтобы убедиться, что вы используете его таким образом, который поможет вашим пользователям.
Например, рассмотрим следующий фрагмент HTML:
<p class="alert" role="alert"> That transaction was successful </p> Вспомогательное устройство, например программа чтения с экрана, может использовать свойство role="alert" для оповещения пользователя об этой информации. Панель специальных возможностей в DevTools может выбрать такое свойство ( role ) и представить его вам, чтобы было ясно, какие свойства, связанные со специальными возможностями, имеет элемент.
Проверка информации, которую вы видите на этой панели, может помочь ответить на вопрос: «Я неправильно кодирую специальные возможности», будь то синтаксически или структурно, просто имейте в виду, что применение методов специальных возможностей с правильным синтаксисом и наличие доступного веб-сайта — это две разные вещи. вещи!
Чтобы начать использовать это, вы можете открыть панель специальных возможностей с проверяемым элементом:
- Проверяйте любой элемент на странице, например гиперссылку или окно поиска.
- Откройте панель специальных возможностей, которая находится на панели элементов.
Дополнительный совет : вместо того, чтобы находить панель (она не открыта по умолчанию), я ищу «Показать специальные возможности» в меню команд ( Cmd + Shift + P ).
Здесь вы найдете кучу информации, например:
- Дерево доступности (подмножество дерева DOM)
- Атрибуты ARIA
- Вычисляемые свойства доступности (например, есть ли что-то фокусируемое, редактируемое, проходит ли проверка формы)
В зависимости от проверяемого элемента часть этой информации может быть неприменима, например, может быть, что элементу на законных основаниях не требуются атрибуты ARIA.
Как и в случае с большинством функций в DevTools, то, что вы видите на этой панели, является «живым» — изменения, которые вы делаете в дереве DOM панели «Элементы», немедленно отражаются обратно на эту панель, что делает ее полезной, например, для исправления атрибута ARIA с ошибкой.
Если вы уверены в своем использовании специальных возможностей, возможно, потому, что вы используете альтернативный инструмент автоматического тестирования, такой как топор, то вы можете не использовать эту панель очень часто, и это нормально.
Если вам интересно узнать больше при просмотре реальных веб-сайтов, я сделал 14-минутное видео об отладке специальных возможностей с помощью Chrome DevTools.
Маяк
Lighthouse — это автоматизированная программа проверки веб-сайтов, которая может сканировать передовые практики, доступность, безопасность и многое другое.
Если вы ознакомились с теорией доступности и хотите научиться эффективно применять ее на своем собственном веб-сайте, это отличный инструмент для использования, поскольку он буквально представляет собой интерфейс «укажи и щелкни» — установка не требуется. Кроме того, все его аудиты очень поучительны, информируя вас о том, что не удалось, и почему что-то не удалось.
Следование рекомендациям этого инструмента почти наверняка поможет улучшить доступность вашего сайта.
При проверке на безопасность, общие рекомендации в Интернете, производительность полезна. Давайте сосредоточимся на том, как провести аудит доступности в Lighthouse:
- Перейдите на панель Lighthouse в DevTools.
- Снимите флажки со всех категорий, но не снимайте флажок «Специальные возможности».
- Нажмите «Создать отчет».
- В полученном отчете щелкните различные предложения, чтобы узнать о них больше.
Если вы хотите узнать больше о специальных возможностях (я, конечно, хочу!), просмотр неудачных, но даже пройденных аудитов — отличный способ узнать, поскольку почти каждый аудит связан со специальной документацией веб-разработчика по самому аудиту и тому, почему это важно.
По большей части страницы аудиторской документации очень лаконичны, и я настоятельно рекомендую их. Давайте взглянем на документацию по аудиту, чтобы убедиться, что элемент <title> присутствует. В нем указано:
- Как проваливается аудит названия Lighthouse
- Как добавить заголовок
- Советы по созданию отличных заголовков
- Пример заголовка, который не следует использовать, а также заголовок, который стоит использовать
А в случае с документацией по названию документа потребовалось всего 300 слов, чтобы объяснить эти 4 пункта выше.
Следует отметить одну интересную вещь: в отличие от панели «Доступность», аудиты Lighthouse по умолчанию очень информативны, что делает панель Lighthouse отличным местом для посещения, когда вы только начинаете.
По мере того, как вы становитесь более продвинутыми в создании специальных страниц, вы можете отказаться от предопределенных проверок и проводить больше времени на панели специальных возможностей.
“
Эмулируйте недостатки зрения
Это функция DevTools для применения недостатков зрения, таких как размытое зрение, к текущей странице.
«Во всем мире примерно 1 из 12 мужчин (8%) и 1 из 200 женщин имеют нарушения цветового зрения».
— Требования доступности для людей с плохим зрением
Вы захотите использовать эту функцию, чтобы убедиться, что ваш веб-сайт отвечает потребностям ваших пользователей. Если на вашем веб-сайте отображается важное изображение, вы можете обнаружить, что это изображение трудно понять человеку с тританопией (нарушение синего и желтого зрения) или даже человеку с нечетким зрением.
«Некоторую низкую остроту зрения можно исправить с помощью очков, контактных линз или хирургического вмешательства, а некоторые нельзя. Поэтому у некоторых людей зрение будет нечетким (низкая острота зрения), несмотря ни на что».
— Требования доступности для людей с плохим зрением
Например, в случае с изображением вы можете обнаружить, что существует изображение с более высоким разрешением, доступное для загрузки при эмуляции размытого зрения с помощью DevTools, а не пользователь с размытым зрением, который может использовать и, в свою очередь, понять, что показывает изображение. Это потребует некоторых навыков решения проблем на основе дизайна/UX — возможно, от вас / ваших коллег — но это может быть разницей между удовлетворением потребностей ваших пользователей или не удовлетворением их потребностей.
️ Обратите внимание : следующее изображение частично размыто, чтобы продемонстрировать функцию эмуляции «Размытое зрение» в DevTools.
Вы можете попробовать эту функцию, выполнив следующие действия:
- Откройте меню команд ( Cmd + Shift + P или Ctrl + Shift + P в Windows)
- Найдите и выберите «Показать рендеринг».
- Выберите недостаток зрения, например «Размытое зрение», в разделе «Эмуляция недостатков зрения» на панели «Визуализация».
Вот несколько примеров недостатков зрения, которые вы можете исправить с помощью DevTools:
- Затуманенное зрение
Где зрение менее точное - протанопия
Дальтонизм в результате нечувствительности к красному свету - Тританопия
Нарушение синего и желтого зрения
Подобные функции эмуляции не будут полностью учитывать тонкие различия в том, как такие недостатки проявляются у отдельных людей, не говоря уже о широком спектре недостатков зрения. При этом эта функция все еще может помочь нам, как веб-разработчикам, понять и улучшить доступность наших страниц.
Подсказка "Проверить элемент"
Эта функция относится к улучшенной всплывающей подсказке, которая теперь отображает информацию, связанную с доступностью, при использовании функции «Проверить элемент». Это тонкая, но все же очень важная функция, поскольку она может информировать вас о том, насколько доступны элементы, с первого взгляда.
Я говорю, что это важно, потому что в случае четырех других функций, упомянутых в этой статье, они требуют преднамеренных действий с нашей стороны (нажмите кнопку создания отчета, перейдите на панель специальных возможностей, откройте инструмент выбора цвета и т. д.). Однако эта функция проявляется в одном из наиболее распространенных действий DevTools при проверке элемента.
В качестве небольшого задания для себя взгляните на следующие два скриншота. Они демонстрируют улучшенную всплывающую подсказку DevTools Inspect Element, в которой теперь есть раздел специальных возможностей. Можете ли вы определить, что представляют свойства в этом разделе?
Вы можете заметить, что это те же самые фрагменты информации, которые мы видели ранее — как часть раздела «Коэффициент контрастности» и инспектора специальных возможностей. Это те же свойства, но они появились (надеюсь) более простым способом.
Примечание. В этой подсказке также есть свойство «Фокусировка клавиатуры» (самый последний элемент). Указывает, доступен ли элемент с клавиатуры. Если это правда, это обычно предполагает, что рассматриваемый элемент можно сфокусировать, нажав на него.
Как я это вижу: Inspect Element — чрезвычайно распространенный вариант использования в браузерных DevTools, поэтому выбор полезных свойств, связанных с доступностью, для всплывающей подсказки Inspect Element может послужить полезным напоминанием и побудить нас, как веб-разработчиков, к дальнейшему исследованию и обеспечению то, что мы строим, доступно.
Заключение
Инструменты веб-разработчиков для повышения доступности с годами быстро совершенствовались, но иногда эти инструменты скрыты или просто не задокументированы. В этой статье мы рассмотрели некоторые из этих функций, которые, как мы надеемся, могут помочь нам при применении лучших практик доступности к веб-сайтам, которые мы создаем.
Напоминаем, что мы рассмотрели:
- Контрастность
Проверьте, имеет ли проверяемый текстовый элемент удовлетворительный коэффициент контрастности. - Инспектор доступности
Просмотрите различные свойства специальных возможностей и информацию ARIA. - Маяк
Средство проверки веб-сайтов, которое охватывает лучшие практики, доступность и многое другое. - Имитация недостатков зрения
Инструмент для применения недостатков зрения (например, нечеткости зрения) к странице. - Подсказка «Проверить элемент»
Улучшенная всплывающая подсказка, которая отображает информацию, связанную с доступностью.
Я создаю список рассылки Dev Tips, если вы хотите быть в курсе более 200 советов по веб-разработке! Я также публикую множество бонусных ресурсов по веб-разработке в своем Twitter.
Это все на данный момент! Спасибо за чтение.