Недавняя статья Джорджины Лейдлоу о стиле дизайна плоского пользовательского интерфейса заставила меня задуматься о последствиях доступности этой тенденции, и особенно о том, как она влияет на использование цвета для передачи информации .
Поэтому я подумал, что было бы полезно проанализировать эти последствия, взглянуть на требования к доступности, касающиеся использования цвета, и обсудить некоторые способы их удовлетворения.
Доступность цветовой информации
На самом деле в WCAG 2 есть два разных принципа, которые касаются использования цвета для передачи информации. Каждый из этих принципов влияет на различные группы пользователей и учитывается по-разному.
Люди, которые не видят цветовых различий
Первая группа затронутых пользователей — это люди, которые не видят цветовых различий , но могут видеть другие виды визуальной информации ( принцип 1.4.1 ):
- Люди, которые имеют форму дальтонизма, что означает, что они не могут отличить определенные цвета, такие как красный от зеленого или синий от желтого.
- Люди, которые переопределяют стили страницы по причинам доступности, таким как отключение авторских цветов и шрифтов или применение высококонтрастной таблицы стилей.
- Люди с плохим зрением могут иметь ограниченное цветовое зрение, поскольку им трудно различить похожие оттенки или схожие интенсивности цвета.
- Люди, которые используют монохромный дисплей, как читатель электронных книг низкого уровня (хотя, возможно, это выходит за рамки чистой доступности).
Мы можем обслуживать эту группу пользователей с помощью визуальных подсказок, не зависящих от цвета, таких как значки, стрелки и маркеры, текстовые эффекты, такие как жирный шрифт, курсив и заглавные буквы, и, конечно же, использование самого текста и контекста текста для передачи информации.
Например, некоторое время назад я создал таблицу данных для документирования, когда элементы фокусируются , и я использовал красный, зеленый и оранжевый для обозначения положительных, отрицательных и условных результатов. Но цвета были не единственной вещью, которая передавала эту информацию, поскольку ячейки также использовали буквенные коды для передачи тех же данных. Таким образом, пользователи, которые не могут или не могут воспринимать цвета, все равно получат информацию.
Другим, гораздо более распространенным примером, является способ представления ошибок проверки формы, используя красный для обозначения ошибки, а также жирный шрифт или курсив (или оба) для визуального выделения сообщения и часто префикс, такой как ОШИБКА:
для указания его значение. Местоположение сообщения также передает информацию — добавляя ее непосредственно перед <input>
Таким образом, этот принцип не означает, что цвет вообще не может использоваться для передачи информации, он просто означает, что на цвет нельзя полагаться как на единственный способ представления визуальной информации .
Даже для пользователей с дальтонизмом, которые видят (например) красный и зеленый как коричнево-черный, все же возможно использовать эти цветовые комбинации, если контраст между ними достаточно высок. Так что очень светло-зеленый, например, будет легко отличить от очень темно-красного, для людей с дальтонизмом или если смотреть в монохромном режиме.
Люди, которые вообще не видят
Вторая группа затронутых пользователей — это люди, которые не видят никакой визуальной информации ( принцип 1.3.1 ):
- Люди, которые слепы и пользуются навигацией, используя программу чтения с экрана, систему Брайля или другую технологию доступа.
Мы можем обслуживать эту группу пользователей семантической информацией — используя правильную разметку, добавляя роли и другие атрибуты ARIA, где это необходимо, и (как и в предыдущей группе) используя сам текст для передачи информации.
Чтобы снова взглянуть на примеры из предыдущего раздела — таблица данных размечена как <table><th>scope Таблица также имеет атрибут summaryHTML5 , потому что спецификация неправильно понимает значение этого атрибута. ( summaryструктуру таблицы исключительно для удобства программ чтения с экрана, тогда как <caption>содержимое таблицы для удобства всех пользователей; таблица данных должна иметь и то и другое — спецификация неверна.)
Для сообщений проверки формы использование <strong><em> Но также неплохо добавить aria-invalid="true"<input>aria-describedbyID
Достаточно сказать, что семантическая разметка — это ключ к доступности программы чтения с экрана , в частности, использование заголовков и разделов для создания логической структуры и выбор элементов в соответствии с их значением (т. Е. Если он выглядит как кнопка и щелкает как кнопка, тогда это должна быть <button>
Подводные камни и потенциал плоского дизайна
Некоторые из самых сильных визуальных подсказок, которые мы использовали в течение многих лет, сейчас теряются в тенденции плоского дизайна пользовательского интерфейса . Использование эффектов глубины на кнопках для их четкой дифференциации, использование text-shadowнедостаточно указывать на их функцию (именно поэтому я лично считаю, что подчеркивание ссылок священно — слишком важно, чтобы его можно было потерять для простой эстетики).
Меня беспокоит то, что мы отбрасываем компоненты дизайна, которые на самом деле служили важной цели — мощные и хорошо понятные визуальные подсказки, такие как границы, скосы и тени. Реакция дизайна на это неизбежно будет больше полагаться на цвет и типографику, а это, в свою очередь, может привести к большему количеству проблем с доступностью.
Есть также места, где удобство использования влияет на доступность, особенно когда речь идет о людях с когнитивными нарушениями. Самая большая проблема со многими из плоских конструкций, которые я видел, состоит в том, что труднее определить, какие интерактивные элементы. И если я нахожу это сложным (как человеку, у которого нет когнитивной инвалидности), то для человека, у которого есть такая инвалидность, это может быть намного сложнее.
Хотя здесь может быть и положительная обратная сторона, и потенциальная возможность этой тенденции дизайна улучшить доступность — поскольку в плоских проектах, как правило, используются более крупные шрифты и более простые значки, оба из которых полезны для людей с когнитивными нарушениями. И если изучение плоской эстетики вынуждает нас заново изобретать общие визуальные подсказки, то конечным результатом может быть лучший, более простой набор соглашений. Пользователям может потребоваться некоторое время, чтобы понять их, но все хорошие вещи требуют времени.
Пока я могу сказать дизайнерам, что они должны делать, или предположить, что эта тенденция неизбежно приведет к плохой доступности; Я действительно просто хотел повторить и объяснить этот важный принцип — мы не можем полагаться только на цвет для передачи информации .