Это 2020-е годы, поэтому нам больше не нужно отстаивать доступность. Доступный сайт означает, что вы обращаетесь к большему количеству людей, людям, с которыми вы общаетесь (даже с ограниченными возможностями), будет легче использовать ваш сайт, и вам не будут предъявлены иски. А с инструментами и ресурсами, доступными разработчикам и дизайнерам, теперь стало проще, чем когда-либо, обеспечить доступность вашего сайта.
В Polypane доступность — одна из трех основных областей, на которых мы фокусируемся, две другие — производительность и адаптивный дизайн. Если вы не знакомы с Polypane, это веб-браузер, специально предназначенный для веб-разработчиков. В нем есть всевозможные инструменты, которые вы не найдете в обычных браузерах, — инструменты, которые делают вас более эффективными и действенными. Чтобы узнать больше о Polypane, ознакомьтесь с вводной статьей.
В этой статье мы сосредоточимся на нескольких распространенных проблемах доступности и найдем способы их аудита и исправления на вашем сайте, чтобы сделать его максимально доступным. Вот на что мы посмотрим:
- Достаточно ли контрастности у моего текста, а где нет, как это исправить?
- Как мой сайт ищет людей с нарушениями зрения, такими как дальтонизм или дальнозоркость? А как насчет ситуационных нарушений, таких как яркий солнечный свет или устройство с ночным режимом?
- Имеет ли смысл структура моей страницы для людей, которые от нее зависят?
- Как мне убедиться, что у меня нет проблем с качеством кода на моем сайте, и действительно ли помогают мои действия по повышению доступности?
- Мой сайт хорошо работает на маленьких экранах?
- Как убедиться, что мой сайт хорошо работает для пользователей, которые предпочитают темные цвета или плохо переносят движение?
Контраст
Достаточно ли контрастности у моего текста, а где нет, как это исправить?
В идеале контрастность текста решается во время дизайна, а такие инструменты, как Stark, упрощают тестирование отдельных пар текста и фона. Но, к сожалению, это не всегда так. Хотя в Интернете есть множество мест, где можно проверить заданный цвет текста и заданный фон (мы даже создали наш собственный онлайн-тестер цветового контраста ), ваши веб-страницы, вероятно, имеют много разных цветов и фонов, и для любого достаточно сложного сайта вы можете не знать все комбинации заранее.
И это позволяет очень легко пропустить тот серый текст, который обычно отображается на белом фоне, но есть одно место, где он находится на светло-сером, или темный цвет текста с непрозрачностью, который работает только для определенных фонов.
В Polypane почти все взаимодействия с элементом будут выполнять быструю проверку контраста для этого конкретного элемента. Наш алгоритм определяет реальные цвета текста и фона с учетом цвета, прозрачности и всех цветов фона. Затем мы объединяем это с фактическим воспринимаемым цветом текста и фона и сравниваем это.
Мы покажем результат во всплывающей подсказке элемента и на панели элементов вместе с другой информацией, такой как семейство шрифтов и размер шрифта. Таким образом, контраст вашего текста всегда будет заметным.
Однако это все еще зависит от случая, поэтому у Polypane также есть наложение цветового контраста. Это будет проходить через всю вашу страницу и находить все уникальные комбинации текста и фона, проверять их все и добавлять ярлыки к каждому элементу. Все проходящие пары контрастов получают одну метку с контрастом, а любой неудачный контраст получает предупреждающую метку для каждого экземпляра, поэтому вы не пропустите ни одного.
Мы упростили поиск проблем с контрастом. Но как их исправить?
Если вам повезет, вы можете использовать другой цвет из своей дизайн-системы, но если у вас его нет или это разовая цветовая пара, вам придется вернуться к своему дизайнеру или использовать онлайн-тестер контрастности. и сам найди другой цвет — утомительный и трудоемкий процесс, и я хотел кое-что сделать.
Для каждой пары недостающих контрастов Polypane вычисляет цвет текста, который имеет достаточный контраст с фоном, и предлагает его вам для облегчения копирования. Вы даже можете просмотреть его, просто наведя на него курсор. (Упомянутая нами онлайн-программа проверки контрастности также предлагает вам улучшенные цвета.)
Нарушения зрения и ситуации
Как мой сайт ищет людей с нарушениями зрения, такими как дальтонизм или дальнозоркость? А как насчет ситуационных нарушений, таких как яркий солнечный свет или устройство с ночным режимом?
Не у всех, кто посещает ваш сайт, будет идеальное зрение. Фактически, большое количество ваших посетителей определенно будет иметь какую-либо форму нарушения зрения. И хотя вы можете быть уверены, что соблюдаете правила относительно минимального размера текста и ничего не сообщаете только с помощью цветов, проблему можно легко упустить. Лучший способ вызвать сочувствие — это попытаться смоделировать, как другие люди воспринимают ваш сайт.
Дальтоник
От 8 до 10% мужчин во всем мире страдают дальтонизмом (женщины намного реже — 0,5%), и они попадают в три разные группы: красно-зеленая дальтонизм, сине-желтая дальтонизм и полная дальтонизм. Polypane позволяет моделировать все это с помощью наших наложений специальных возможностей.
Вам следует протестировать эти симуляторы, чтобы убедиться, что вы не полагаетесь только на цвет для передачи сообщений. Например, если вы просто сделаете границу поля ввода красной, когда сделаете ошибку, вы обнаружите, что это едва заметно или незаметно при включенном любом из этих симуляторов. Вместо этого вы должны предоставить второй, не цветной индикатор, например сообщение об ошибке, чтобы сообщить о проблеме вашему пользователю.
Красно-зеленая дальтонизм является наиболее распространенным заболеванием, и у подавляющего большинства людей с дальтонизмом оно есть. В Polypane мы предлагаем четыре разных симулятора: Дейтеранопия, Дейтераномалия, Протанопия и Протаномалия. -Anomaly варианты здесь являются менее серьезными версия, в то время как -opia варианты будут классифицироваться как «полный» красно-зеленой цветовой слепоты.
Как следует из названия, люди с этим типом дальтонизма с трудом видят разницу между красным и зеленым, а также коричневым и оранжевым, а также некоторыми оттенками синего и фиолетового. Вы можете увидеть, как, например, обычная окраска элементов «зеленый — хорошо, красный — плохо» может стать проблемой.
Сине-желтая цветовая слепота встречается гораздо реже, всего у 0,0002% мужчин во всем мире. Техническое название этого явления — «тританопия», а тританомалия — менее серьезная версия. Этот тип дальтонизма делает людей менее чувствительными к синему свету, делая синюю частью чего-либо серого.
И наконец, полная дальтонизм — самая редкая форма у 0,00003% мужчин во всем мире. Его собственное название — «Ахроматопсия», причем «ахроматомалия» — это менее серьезная версия, когда люди видят какой-то цвет, но он сильно тускнеет.
Стоит отметить, что симуляторы в Polypane (да и вообще любой симулятор) являются приблизительными. В частности, менее серьезные варианты бывают в диапазоне от почти незаметных до близких к полной, и поэтому симулятор выбирает здесь золотую середину.
Затуманенное зрение
Это цветовая слепота, но гораздо больше людей во всем мире страдают той или иной формой дальнозоркости (примерно 10% в мире), из-за которой экраны могут выглядеть размытыми. Это может быть «обычная» дальнозоркость или другие нарушения зрения, приводящие к нечеткости зрения, такие как катаракта и глаукома.
Катаракта — основная причина слепоты. Он постепенно затуманивает хрусталик глаза. Глаукома является второй по частоте причиной слепоты и снижает периферическое зрение, за которым следует центральное зрение. Иногда это называют туннельным зрением, хотя это общий термин для ряда различных нарушений.
Используя эти симуляторы, вы заметите, насколько сложно читать обычный текст. Люди с нечетким зрением обычно могут компенсировать это с помощью очков или увеличения, но это все же помогает убедиться, что ваша страница остается доступной для сканирования. Убедитесь, что ваши заголовки достаточно большие, чтобы их можно было читать с помощью этих симуляторов. Это гарантирует, что вашу страницу можно будет сканировать без излишнего напряжения.
Ситуационные нарушения
Не все нарушения зрения являются физическими. Некоторые из них также ситуативны: они возникают только тогда, когда вы находитесь в определенной ситуации. Polypane позволяет моделировать два из них: яркий солнечный свет и ночной режим.
Экран плохо читается при ярком солнечном свете. Они блекнут, появляются блики, и остается читаемым только самый большой контраст. Возможно, не все сайты предназначены для использования при ярком солнечном свете, но если у вас есть мобильный или адаптивный сайт, в какой-то момент он будет отображаться на экране при ярком солнечном свете. Это хороший симулятор, чтобы проверить, не слишком ли тонки ваши приятные тонкие контрасты.
С другой стороны, ночной режим в последние несколько лет постепенно появился в большинстве операционных систем, на компьютерах и мобильных устройствах. Ночной режим уменьшает количество синего цвета на экране в ночное время, делая экраны более расслабляющими для ваших глаз и уменьшая подавление мелатонина. Мелатонин заставляет вас спать, и вы вырабатываете его больше в конце дня, когда естественный свет вокруг вас тускнеет. Если вы когда-либо продолжали работать на компьютере до 2 часов ночи, не чувствуя себя усталым, причина в подавленном мелатонине.
Ночные режимы в большинстве операционных систем предназначены для предотвращения любых проблем с тем, что отображается на экране, но если вы полагаетесь на желтый цвет для передачи смысла, он может потеряться, когда все будет слегка желтым.
Дислексия
Примерно от 5% до 10% людей во всем мире страдают той или иной формой дислексии, то есть нарушениями чтения. Хотя это не ситуационное нарушение, оно влияет на то, как люди воспринимают ваш сайт визуально.
Некоторые эксперты предполагают, что это может быть даже более 15%, потому что многие люди с нарушениями чтения не осознают, что у них это есть. Поскольку нет возможности сравнить наш опыт чтения с чьим-либо другим, трудно понять, когда ваш опыт существенно отличается.
Некоторые люди с дислексией описывают это как видение букв на экране, танцующих вокруг, и это то, что показывает наш симулятор дислексии. Буквы в каждом слове перемешиваются и меняются местами, когда вы смотрите на них. Они по-прежнему в основном читабельны, но требуют больше усилий, чем обычно.
Не все люди, страдающие дислексией, испытывают подобное чтение, и использование симулятора больше для достижения сочувствия, чем для чего-либо еще. Тем не менее, если вы застряли на запутанном слове, потому что оно очень длинное или буквы могут образовывать несколько слов, вы можете подумать о замене его на более простое и ясное слово.
Структура страницы
Имеет ли смысл структура моей страницы для людей, которые от нее зависят?
Ваша структура страницы, как ваши заголовки и ориентиры (элементы, такие как body, nav, main, asideи section) является более важной, чем вы думаете. Многие вспомогательные технологии, такие как программы чтения с экрана, позволяют пользователям открывать список всех ваших заголовков, ориентиров или ссылок, чтобы они могли быстро просмотреть, найдут ли они нужный раздел.
Важно иметь логический порядок на вашей странице, с заголовками, которые не пропускают уровень, и правильными ориентирами (такими как навигация, верхние и нижние колонтитулы). Когда ваш сайт состоит из множества компонентов и шаблонов, вы не сможете получить хороший обзор всех заголовков и их порядка, пока они не будут отображены на странице, и не все ваши ориентиры могут иметь соответствующий заголовок.
Панель Polypane Outline реализует алгоритм структуры HTML5 для визуализации структуры страницы и заголовка. Это позволяет легко увидеть, где вы пропустили уровень заголовка, и есть ли ориентиры с отсутствующим заголовком.
Качество кода
Как мне убедиться, что у меня нет проблем с качеством кода на моем сайте, и действительно ли помогают мои действия по повышению доступности?
Нельзя отрицать, что доступность — это большая область. В этой статье уже упоминались проблемы с контрастом, различные визуальные и ситуативные нарушения, а также структура документа, но это только поверхностные сведения. Есть много вещей, которые могут негативно повлиять на чей-то опыт работы с вашим сайтом, например, отсутствие altатрибутов для изображений, ссылки без текста и неопределенный язык страницы — и это лишь некоторые из них. Было бы неплохо, если бы вам не нужно было проходить огромный контрольный список для каждой страницы, а можно было бы просто выявить проблемы. В Polypane есть несколько способов сделать это: с помощью встроенной панели специальных возможностей и двух оверлеев — A11y.css и Tota11y.
A11y.css — это файл CSS, который выделяет возможные риски и ошибки на вашей странице — в основном для обеспечения доступности, но также и для ошибок, которые могут вызвать проблемы с доступностью, такие как отсутствие кодировки. Это может показаться вам немного неуместным, потому что он рисует толстые границы вокруг всего, что, по его мнению, вы должны проверить, даже если это сделано специально (например, пустые altатрибуты).
Tota11y от Khan Academy, с другой стороны, представляет собой набор из нескольких различных инструментов. Есть инструмент для составления списка заголовков и ориентиров (и выделения любых нарушений порядка), поиска проблем с контрастом (хотя и не столь тщательных, как встроенная в Polypane средство проверки цветового контраста) и выделения любых ссылок, изображений или меток, которые могут вызвать проблемы (из-за отсутствия содержимого., и отсутствующие или пустые атрибуты altили for).
Наконец, у Polypane есть собственная панель специальных возможностей, которая может запускать проверку доступности на основе популярного набора правил Axe. Когда вы запускаете тест, Polypane анализирует всю вашу страницу и перечисляет все проблемы по четырем отдельным категориям: критические, серьезные, умеренные и незначительные.
Критические и серьезные проблемы — это действительно важные проблемы, которые необходимо исправить. Критические проблемы — это отсутствие altтекста для изображений и неправильное использование ARIA.
Вы можете раскрыть каждую найденную проблему, чтобы получить дополнительную информацию о том, на какие элементы она влияет, и о конкретной проблеме с каждым элементом.
Для нас важно, чтобы с этими ошибками можно было принять меры: они не просто сообщали вам, что случилось, но также давали вам предложения и советы, как с ними бороться. Например, для изображений с отсутствующими altатрибутами мы объясняем разницу между содержимым и презентационными изображениями, а для проблем с цветовым контрастом мы предлагаем цвет, у которого действительно есть достаточный контраст.
На панели специальных возможностей вы можете щелкнуть любой элемент и отобразить его в инспекторе элементов, где обычно можно решить проблему, обновив атрибуты или стили. Как только вы это сделаете, скопируйте его в свой источник, и проблема будет решена!
Интересно, что при создании панели специальных возможностей и проверке с ее помощью множества различных веб-сайтов чаще было замечено злоупотребление ARIA как проблема, а не проблема отсутствия ARIA. Доступность — сложная тема, и легко подумать, что вы поступаете правильно, хотя на самом деле это немного усложняет. Личные знания и ручное тестирование неоценимы, но автоматические тесты обеспечивают отличную выборочную проверку.
Меньшие экраны
Мой сайт хорошо работает на маленьких экранах?
Об адаптивном дизайне уже много написано, но это также важная проблема доступности. Во-первых, создание горизонтальной полосы прокрутки на экранах шириной 320 пикселей запрещено в соответствии с правилом 1.4.10 WCAG. А на более широких экранах это не является нарушением, но может выглядеть довольно неприятно и сбивать с толку.
Поиск причины горизонтального переполнения может быть настоящей проблемой, поскольку в большинстве случаев не сразу понятно, какой элемент вызывает это. В конечном итоге вы случайным образом удаляете элементы в инструментах разработчика в надежде найти элемент. Это утомительная работа.
При включенном наложении «отладка макета» Polypane определяет наличие горизонтальной полосы прокрутки и находит элементы, вызывающие их. Затем он окрашивает их в красный цвет, чтобы вы могли их найти и исправить, например, убедившись, что у родительского элемента есть overflow: hidden, или убедившись, что ваш контент соответствует доступному пространству.
Несмотря на то, что мобильный экран меньше, чем ваш рабочий стол, с увеличением размеров экрана становится все труднее легко добраться до всех частей экрана, когда вы держите телефон в одной руке. С помощью наложения доступности мы показываем, какие части экрана легче или труднее достать, когда вы держите телефон в руке (правой или левой).
Держа телефон в одной руке, нижняя часть экрана обычно более доступна, чем верхняя, поэтому это зависит от вашего сайта. Размещение важных элементов внизу экрана может быть более удобным для пользователя. Размещение элементов в нижней части экрана очень распространено в приложениях, и мы видим, что все больше веб-сайтов и веб-приложений также переходят на этот шаблон.
Темный режим и движение
Как убедиться, что мой сайт хорошо работает для пользователей, которые предпочитают темные цвета или плохо переносят движение?
Темный режим, хотя и является модным, также является потенциальным помощником для людей, которым яркие экраны компьютеров кажутся болезненными или утомительными. Хороший темный режим может быть хорошей альтернативой чему-то вроде инвертированных цветов (функция на Mac) или принудительных цветов (функция в Edge и в Windows, которая заставляет все ваши цвета соответствовать указанной палитре, обычно со светлым текстом на черном фоне. фон).
Чтобы протестировать и реализовать свой темный режим с помощью «prefers-color-scheme: dark», вы можете переключить всю свою операционную систему в темный режим, погрузиться в инструменты разработчика браузера ( меню настроек > дополнительные инструменты > рендеринг > прокрутите вниз> выберите «Темный» в раскрывающемся списке эмуляции ) или в Polypane, вы можете открыть раскрывающийся список параметров и щелкнуть «темный», чтобы переключиться в темный режим для одной панели, чтобы его было легко увидеть рядом с вашим светлым дизайном.
Точно так же люди с вестибулярными расстройствами могут испытывать дискомфорт при движении на веб-сайтах, например, при больших анимациях и переходах. Для них решением может стать медиа-запрос «prefers-reduce-motion: reduce». Когда это установлено, важно уменьшить анимацию и переходы. Вам не нужно отключать всю анимацию (хотя это тоже работает), но постарайтесь сделать ее менее яркой и более тонкой. Точно так же, если у вас включена плавная прокрутка, это большое движение, поэтому убедитесь, что для свойства scroll-behavior установлено значение «auto», а не «smooth».
Проверить это в Polypane так же просто: откройте меню параметров и переключите параметр prefers-limited -motion на «уменьшить». Теперь вы можете протестировать его самостоятельно или вместе с обычным веб-сайтом.
