Изготовление сайтов в Краснодаре, на Кубани. Как найти и исправить распространенные проблемы с доступностью веб-сайта

На дворе 2020-е, поэтому нам больше не нужно доказывать доступность. Доступный сайт означает, что вы достигаете большего числа людей, людям, которых вы достигаете (даже способным), всем легче использовать ваш сайт, и вы не будете привлечены к ответственности. А благодаря инструментам и ресурсам, доступным разработчикам и дизайнерам, теперь проще, чем когда-либо, убедиться, что у вас есть доступный сайт.

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

В этой статье мы сосредоточимся на нескольких распространенных проблемах доступности и найдем способы проверить и исправить их на вашем сайте, чтобы убедиться, что он максимально доступен. Вот что мы рассмотрим:

Достаточно ли контрастен мой текст, а если нет, как это исправить?

Как мой сайт ищет людей с нарушениями зрения, такими как дальтонизм или дальнозоркость? Как быть с ситуативными нарушениями вроде яркого солнечного света или устройства с ночным режимом?

Имеет ли структура моей страницы смысл для людей, которые от нее зависят?

Как мне убедиться, что у меня нет проблем с качеством кода на моем сайте, и действительно ли помогают то, что я сделал для улучшения доступности?

Хорошо ли мой сайт работает на небольших экранах?

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

Контраст

Достаточно ли контрастен мой текст, а если нет, как это исправить?

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

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

В Polypane почти все взаимодействия с элементом будут выполнять быструю проверку контраста для этого конкретного элемента. Наш алгоритм определяет реальные цвета текста и фона с учетом цвета, непрозрачности и всех цветов фона. Затем мы объединяем это с реальным воспринимаемым цветом текста и фона и сравниваем их.

сравнение цвета текста и фона

Мы покажем результат во всплывающей подсказке элемента и на панели элементов вместе с другой информацией, такой как семейство шрифтов и размер шрифта. Таким образом, контраст вашего текста всегда заметен.

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

пропускные и предупреждающие надписи на веб-сайте

Мы упростили поиск проблем с контрастом. Но как их исправить?

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

GIF-файл, показывающий, что допустимые параметры цвета появляются при наведении указателя мыши на предупреждающую метку.

Для каждой неудачной пары контрастности Polypane вычисляет цвет текста, который имеет достаточный контраст с фоном, и предлагает его вам для легкого копирования. Вы даже можете просмотреть его, просто наведя на него курсор. (Онлайн-проверка контрастности, о которой мы упоминали, также предлагает вам улучшенные цвета.)

Зрительные и ситуационные нарушения

Как мой сайт ищет людей с нарушениями зрения, такими как дальтонизм или дальнозоркость? Как быть с ситуативными нарушениями вроде яркого солнечного света или устройства с ночным режимом?

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

Наглядное изображение, показывающее результаты нескольких тестов для страницы на основе ухудшения

Дальтонизм

От 8 до 10% мужчин во всем мире являются дальтониками (женщины гораздо меньше — 0,5%), и они попадают в три разные группы: дальтонизм на красно-зеленый цвет, дальтонизм на сине-желтый цвет и полную дальтонизм. Polypane позволяет имитировать все это с помощью наших наложений специальных возможностей.

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

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

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

Сине-желтая цветовая слепота встречается гораздо реже, всего у 0,0002% мужчин во всем мире. Техническое название для этого — «тританопия», а тританомалия — менее тяжелая версия. Этот тип дальтонизма делает людей менее чувствительными к синему свету, делая синюю часть чего-либо серой.

Наконец, полная дальтонизм встречается наиболее редко и составляет 0,00003% мужчин во всем мире. Его правильное название — «ахроматопсия», а «ахроматомалия» — менее тяжелая версия, при которой люди видят какой-то цвет, но он сильно тусклый.

Стоит отметить, что симуляторы в Polypane (да и вообще в любом симуляторе) являются приблизительными. В частности, менее серьезные варианты находятся в диапазоне от почти незаметного до почти полного, и поэтому симулятор выбирает здесь золотую середину.

различные состояния домашней страницы SitePoint

Затуманенное зрение

Итак, это дальтонизм, но гораздо больше людей во всем мире имеют ту или иную форму дальнозоркости (примерно 10% по всему миру), из-за которой экраны выглядят размытыми. Это может быть «обычная» дальнозоркость или другие нарушения зрения, которые затуманивают зрение, такие как катаракта и глаукома.

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

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

Ситуационные нарушения

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

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

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

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

дислексия

От 5% до 10% людей во всем мире страдают той или иной формой дислексии, то есть нарушением чтения. Хотя это не ситуационное ухудшение, оно влияет на то, как люди воспринимают ваш сайт визуально.

Некоторые эксперты предполагают, что он может быть даже выше 15%, потому что многие люди с нарушениями чтения не осознают, что они у них есть. Поскольку нет никакого способа сравнить наш опыт чтения с чьим-либо еще, трудно понять, когда ваш опыт значительно отличается.

Анимированный GIF-файл, показывающий опыт чтения текста с дислексией, когда буквы случайным образом скрещиваются.

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

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

Структура страницы

Имеет ли структура моей страницы смысл для людей, которые от нее зависят?

Структура вашей страницы, например заголовки и ориентиры (такие элементы, как, и body) navважнее main, чем вы думаете. Многие вспомогательные технологии, такие как программы для чтения с экрана, позволяют пользователям открывать список всех ваших заголовков, ориентиров или ссылок, чтобы они могли быстро просмотреть их и посмотреть, найдут ли они нужный раздел.asidesection

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

Показать структуру домашней страницы SitePoint

Панель Polypane Outline реализует алгоритм структуры HTML5 для визуализации структуры страницы и заголовков. Это позволяет легко увидеть, где вы пропускаете уровень заголовка, и есть ли ориентиры с отсутствующим заголовком.

Качество кода

Как мне убедиться, что у меня нет проблем с качеством кода на моем сайте, и действительно ли помогают то, что я сделал для улучшения доступности?

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

Сайт с несколькими наложениями предупреждений

A11y.css — это файл CSS, который выделяет возможные риски и ошибки на вашей странице — в основном для доступности, но также и для ошибок, которые могут вызвать проблемы с доступностью, такие как отсутствующая кодировка. Это может быть немного неприлично, потому что он рисует толстые границы вокруг всего, что, по его мнению, вы должны проверить, даже для вещей, которые созданы специально (например, пустые altатрибуты).

Tota11y используется на домашней странице Vue.js

С другой стороны, Tota11y от Khan Academy представляет собой набор из нескольких разных инструментов. Существует инструмент для перечисления заголовков и ориентиров (и выделения любых нарушений порядка), поиска проблем с контрастом (хотя и не столь тщательного, как средство проверки цветового контраста, встроенное в Polypane) и выделения любых ссылок, изображений или меток, которые могут вызвать проблемы (из-за отсутствия контента)., а также отсутствуют или пусты altили forатрибуты).

Показаны проблемы со специальными возможностями

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

Критические и серьезные проблемы действительно важны для исправления. Критическими проблемами являются такие вещи, как отсутствие altтекста для изображений и неправильное использование ARIA.

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

Для нас важно, чтобы эти ошибки были действенными: чтобы они не только говорили вам, что не так, но и давали вам предложения и советы, как с ними бороться. Например, для изображений с отсутствующими altатрибутами мы объясним разницу между контентом и презентационными изображениями, а в случае проблем с цветовым контрастом мы предложим цвет с достаточным контрастом.

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

Интересно, что при создании панели специальных возможностей и проверке с ее помощью множества различных веб-сайтов чаще встречалось неправильное использование ARIA как проблема, чем отсутствие ARIA. Доступность — сложная тема, и легко думать, что вы поступаете правильно, а на самом деле все усложняете. Личные знания и ручное тестирование бесценны, но автоматизированные тесты обеспечивают отличную выборочную проверку.

Меньшие экраны

Хорошо ли мой сайт работает на небольших экранах?

Об адаптивном дизайне уже много написано, но это также важная проблема доступности. Во-первых, создание горизонтальной полосы прокрутки на экранах шириной 320 пикселей не допускается в соответствии с правилом 1.4.10 WCAG. А на более широких экранах, хотя это и не является нарушением, это может выглядеть довольно резко и запутанно.

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

Анимированный GIF-файл, показывающий идентифицируемый переполняющий элемент.

При включенном оверлее «отладка макета» Polypane определяет, есть ли горизонтальная полоса прокрутки, и находит элементы, вызывающие их. Затем он окрашивает их в красный цвет, чтобы вы могли найти и исправить их, например, убедившись, что родительский элемент имеет overflow: hidden, или убедившись, что ваш контент соответствует доступному пространству.

Отображение макета на нескольких небольших устройствах

Несмотря на то, что экран мобильного телефона меньше, чем экран вашего настольного компьютера, с увеличением размера экрана становится все труднее легко дотянуться до всех частей экрана, держа телефон в одной руке. С помощью наложения доступности мы показываем, какие части экрана легче или труднее достать, держа телефон в руке (правой или левой).

Держа телефон в одной руке, до нижней части экрана легче дотянуться, чем до верхней, что зависит от вашего сайта. Размещение важных элементов внизу экрана может быть более удобным для пользователя. Размещение элементов внизу экрана очень распространено в приложениях, и мы видим, что все больше веб-сайтов и веб-приложений переходят на этот шаблон.

Темный режим и движение

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

Темный режим, хотя и является модным, также является потенциальным помощником для людей, которым яркие компьютерные экраны неприятны или напрягают взгляд. Хороший темный режим может быть красивой альтернативой чему-то вроде инвертированных цветов (функция на Mac) или принудительных цветов (функция в Edge и в Windows, которая принудительно переводит все ваши цвета в указанную палитру, обычно со светлым текстом на черном фоне). фон).

Сравнение светлого и темного режимов бок о бок

Чтобы протестировать и реализовать свой темный режим с помощью «prefers-color-scheme: dark», вы можете переключить всю свою операционную систему в темный режим, глубоко погрузиться в инструменты разработчика браузера (меню настроек > дополнительные инструменты > рендеринг > прокрутите вниз> выберите «темный» в раскрывающемся списке эмуляции) или в Polypane, вы можете открыть раскрывающийся список параметров и нажать «темный», чтобы переключиться в темный режим для одной панели, чтобы его было легко увидеть рядом с вашим светлым дизайном.

Точно так же люди с вестибулярными расстройствами могут испытывать дискомфорт при перемещении по веб-сайтам, например при больших анимациях и переходах. Для них решением может стать медиа-запрос «prefers-reduced-motion: reduce». Когда это установлено, важно смягчить анимацию и переходы. Вам не нужно отключать всю анимацию (хотя это тоже работает), но постарайтесь сделать ее менее плавной и более тонкой. Точно так же, если у вас включена плавная прокрутка, это огромное движение, поэтому убедитесь, что для параметра «поведение прокрутки» установлено значение «авто», а не «плавная».

Проверить это в Polypane так же просто: откройте меню параметров и переключите параметр Preferences-Reduced-Motion на «уменьшить». Теперь вы можете протестировать его отдельно или вместе с вашим обычным веб-сайтом.