Проектирование для доступности и инклюзивности

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

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

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

«Хороший [доступный] дизайн получается, когда вы смотрите на свой [дизайн] с разных точек зрения или линз».

- Искусство игрового дизайна: книга линз

Линза — это «узкий фильтр, через который можно рассматривать или рассматривать тему». Часто используемые для изучения произведений искусства, литературы или кино, линзы просят нас оставить позади наше мировоззрение и вместо этого смотреть на мир через другой контекст.

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

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

Линзы доступности :

• Объектив анимации и эффектов
• Объектив аудио и видео
• Объектив цвета
• Объектив управления
• Линза шрифта
• Линза изображений и икон
• Объектив клавиатуры
• Объектив макета
• Линза материальной честности
• Объектив читабельности
• Объектив структуры
• Линза времени

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

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

Объектив анимации и эффектов

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

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

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

«Представьте себе мир, в котором ваш внутренний гироскоп не работает должным образом. Очень похоже на состояние опьянения: кажется, что вещи движутся сами по себе, ваши ноги никогда не кажутся устойчивыми под вами, а ваши чувства движутся быстрее или медленнее, чем ваше тело».

- Учебник по вестибулярным расстройствам

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

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

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

Чтобы использовать Линзу анимации и эффектов , задайте себе следующие вопросы:

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

Объектив аудио и видео

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

«Используйте автовоспроизведение с осторожностью. Автозапуск может быть мощным инструментом вовлечения, но он также может раздражать пользователей, если воспроизводится нежелательный звук или они воспринимают ненужное использование ресурсов (например, данных, батареи) как результат нежелательного воспроизведения видео».

- Рекомендации Google Autoplay

Теперь вы, вероятно, спросите: «А что, если я буду автоматически воспроизводить видео в фоновом режиме, но не буду его отключать?» Хотя использование видео в качестве фона может быть растущей тенденцией в современном веб-дизайне, фоновые видео страдают от тех же проблем, что и GIF-файлы и постоянно движущиеся анимации: они могут отвлекать. Таким образом, вы должны предоставить элементы управления или параметры для приостановки или отключения видео.

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

Чтобы использовать Линзу аудио и видео , задайте себе следующие вопросы:

• Есть ли какие-либо аудио или видео, которые могут раздражать при автовоспроизведении?
• Можно ли предоставить элементы управления для остановки, приостановки или скрытия любых аудио или видео, которые воспроизводятся автоматически?
• Есть ли у видео стенограммы и/или субтитры?

Объектив цвета

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

Дальтонизмом страдают примерно 1 из 12 мужчин и 1 из 200 женщин. Дейтеранопия (красно-зеленая цветовая слепота) является наиболее распространенной формой дальтонизма, поражающей около 6% мужчин. Пользователи с красно-зеленой цветовой слепотой обычно воспринимают красный, зеленый и оранжевый цвета как желтоватые.

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

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

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

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

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

Чтобы использовать Линзу цвета , задайте себе следующие вопросы:

• Если бы цвет был удален из дизайна, какой смысл был бы потерян?
• Как я могу передать значение, не используя цвет?
• Есть ли перенасыщенные цвета или высокая контрастность, которые могут вызывать у пользователей перевозбуждение или дискомфорт?
• Соответствует ли цвет переднего плана и фона всего текста, значков и индикаторов фокусировки рекомендациям по коэффициенту контрастности 4,5:1?

Объектив управления

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

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

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

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

Чтобы дать пользователям достаточно места для точного выбора элемента управления, рекомендуемый минимальный размер элемента управления составляет 34 на 34 пикселя, независимого от устройства, но Google рекомендует не менее 48 на 48 пикселей, а спецификация WCAG рекомендует не менее 44 на 44 пикселя. Этот размер также включает любые отступы, которые есть у элемента управления. Таким образом, элемент управления может визуально иметь размер 24 на 24 пикселя, но с дополнительными 10 пикселями отступа со всех сторон он увеличится до 44 на 44 пикселя.

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

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

Чтобы использовать Lens of Controls , задайте себе следующие вопросы:

• Есть ли какие-либо элементы управления недостаточно большими, чтобы кто-то мог их коснуться?
• Не находятся ли какие-либо элементы управления слишком близко друг к другу, из-за чего можно было бы легко коснуться не того?
• Есть ли какие-либо элементы управления внутри другого элемента управления или кликабельной области?
• Все ли элементы управления имеют видимую текстовую метку?

Объектив Шрифта

На заре Интернета мы разрабатывали веб-страницы с размером шрифта от 9 до 14 пикселей. В то время это работало просто отлично, поскольку у мониторов был относительно известный размер экрана. Мы разрабатывали, думая, что окно браузера является постоянным, что-то, что нельзя изменить.

Современные технологии сильно отличаются от тех, что были 20 лет назад. Сегодня браузеры можно использовать на любом устройстве любого размера, от маленьких часов до огромного экрана 4К. Мы больше не можем использовать фиксированные размеры шрифта для оформления наших сайтов. Размер шрифта должен быть таким же адаптивным, как и сам дизайн.

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

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

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

Чтобы использовать Lens of Font , задайте себе следующие вопросы:

• Является ли дизайн достаточно гибким, чтобы пользователь мог изменить шрифт до уровня, удобного для чтения?
• Легко ли читается стиль шрифта?

Объектив изображений и значков

Они говорят, что картинка стоит тысячи слов." Тем не менее, картина, которую вы не видите, теряет дар речи, верно?

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

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

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

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

- Пять золотых правил для совместимого альтернативного текста

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

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

Например, если бы вам нужно было описать это изображение для программы чтения с экрана, что бы вы сказали?

Поскольку мы описываем информацию об изображении, а не само изображение, описанием может быть «Звездная ночь » Винсента Ван Гога, поскольку нет никакого другого окружающего контекста, описывающего это. Чего вы не должны помещать, так это описания стиля картины или того, на что она похожа.

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

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

Если платформа, для которой вы разрабатываете дизайн, позволяет пользователям загружать изображения, вы должны предоставить пользователю возможность вводить замещающий текст вместе с изображением. Например, Twitter позволяет своим пользователям писать замещающий текст при загрузке изображения в твит.

Чтобы использовать Линзу изображений и значков , задайте себе следующие вопросы:

• Содержит ли какое-либо изображение информацию, которая была бы потеряна, если бы его нельзя было просмотреть?
• Как я могу предоставить информацию невизуальным способом?
• Если изображение контролируется пользователем, можно ли предоставить ему возможность ввести альтернативное текстовое описание?

Объектив клавиатуры

Доступность клавиатуры является одним из наиболее важных аспектов доступного дизайна, но в то же время одним из самых недооцененных.

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

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

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

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

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

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

Изменение внешнего вида индикатора фокуса по умолчанию иногда может улучшить работу пользователей. Хороший индикатор фокуса не зависит только от цвета для указания фокуса (Lens of Color) и должен быть достаточно четким, чтобы пользователь мог легко его найти. Например, синее кольцо фокусировки вокруг синей кнопки аналогичного цвета может быть визуально неразличимо, чтобы понять, что оно сфокусировано.

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

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

Чтобы использовать Lens of Keyboard , задайте себе следующие вопросы:

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

Объектив макета

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

С появлением CSS Grid изменить макет, чтобы сделать его более значимым в зависимости от доступного пространства, стало проще, чем когда-либо. Однако изменение визуального макета создает проблемы для пользователей, которые полагаются на структурный макет страницы.

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

Макет должен иметь изменяемый размер и быть гибким минимум до 320 пикселей без горизонтальных полос прокрутки, чтобы его можно было удобно просматривать на телефоне. Макет также должен быть достаточно гибким, чтобы его можно было увеличить до 400% (также без горизонтальных полос прокрутки) для пользователей, которым необходимо увеличить размер шрифта для лучшего чтения.

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

Чтобы использовать Lens of Layout , задайте себе следующие вопросы:

• Имеет ли макет осмысленную и логичную последовательность?
• Что должно произойти с макетом, когда он просматривается на маленьком экране или увеличивается до 400%?
• Находится ли контент, который связан или изменяется из-за взаимодействия с пользователем, в непосредственной близости друг от друга?

Объектив материальной честности

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

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

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

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

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

Когда ссылка выглядит как кнопка или наоборот, пользователь может запутаться, поскольку она ведет себя и функционирует не так, как выглядит. Если «кнопка» неожиданно уводит пользователя, он может расстроиться, потеряв данные в процессе.

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

— Устойчивый веб-дизайн

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

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

Автозаполнение используется, чтобы предложить или предсказать остальную часть слова, которое набирает пользователь. Меню автозаполнения позволяет пользователю выбирать из большого списка параметров, когда не все параметры могут быть показаны.

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

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

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

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

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

Чтобы использовать Линзу материальной честности , задайте себе следующие вопросы:

• Является ли дизайн честным для пользователя?
• Есть ли элементы, которые ведут себя, выглядят или функционируют как другие элементы?
• Существуют ли какие-либо компоненты, которые объединяют разные модели поведения в один компонент? Делает ли это компонент существенно нечестным?

Объектив читабельности

Вы когда-нибудь брали книгу только для того, чтобы прочитать несколько абзацев или страниц, и хотели бы бросить ее, потому что текст был слишком трудным для чтения? Трудночитаемый контент утомляет и утомляет ум.

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

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

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

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

- Типография: руководство по дизайну

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

Чтобы использовать линзу читабельности , задайте себе следующие вопросы:

• Язык простой и понятный?
• Сосредоточен ли каждый абзац на одной идее?
• Есть ли длинные абзацы или длинные блоки непрерывного текста?
• Являются ли все заголовки, ссылки, элементы управления и метки четкими и описательными?

Объектив структуры

Как упоминалось в Lens of Layout, структурный макет — это то, что используется программами чтения с экрана и пользователями, использующими клавиатуру. В то время как объектив макета фокусируется на визуальном макете, объектив структуры фокусируется на структурном макете или базовом HTML и семантике дизайна.

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

Возьмем, к примеру, дизайн сетки турнира на выбывание.

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

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

«Джордж, Фред, Линус, Люси, Джек, Джилл, Фред, Джинджер, Джордж, Люси, Джек, Джинджер, Джордж, Джинджер, Джинджер».

Если бы все, что у вас было, это список, казалось бы, случайных имен, как бы вы интерпретировали результаты турнира? Не могли бы вы сказать, кто выиграл турнир? Или кто выиграл игру 6?

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

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

• Элементы ориентира (заголовок, навигация, основной и нижний колонтитулы)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”