Улучшения UX для доступности клавиатуры

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

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

Надеемся, вам понравится вебинар так же, как и нам!

Аарон Перлман: Вы должны увидеть мой экран. Хорошо, прямо сейчас, позвольте мне просто... Вот так, очень хорошо. Ну привет всем. Как я уже сказал, я Аарон Перлман, главный дизайнер пользовательского опыта в Deque. И я думаю — э-э, позвольте мне двигаться — Zoom имеет тенденцию немного мешать пользовательскому интерфейсу, поэтому я извиняюсь, если я выгляжу так, как будто я лихорадочно двигаюсь, а мышь, надеюсь, не отображается. Итак, сегодня мы поговорим о типах оптимизации, которые вы можете сделать для пользователей, использующих только клавиатуру и вспомогательные технологии. Как я упомянул минуту назад, такого рода оптимизации, такого рода вещи не помешают кому-либо еще использовать ваши… они также не останутся без использования другими людьми. Просто это, как правило, вещи, которые будут более выгодными для пользователей, которые в основном используют систему с технологией поддержки только пользователя с клавиатурой.

Аарон Перлман: Для тех, кто не знаком с тем, что это значит, поясню, что такое вспомогательная технология для пользователей только с клавиатурой: пользователем, работающим только с клавиатурой, будет тот, кто обычно использует вашу клавиатуру для перемещения по системе. Таким образом, они будут часто использовать вкладку и Shift, а также клавиши со стрелками для перемещения по вашей системе, поэтому для них очень важна фокусировка. Вы можете обнаружить, что у этого человека могут быть проблемы с моторикой, могут быть проблемы со зрением, пользователи, использующие только клавиатуру, а затем пользователи вспомогательных технологий также используют клавиатуру для перемещения по вашей системе, они также могут использовать другие вспомогательные технологии, такие как экран метров, таких как VoiceOver, программа для чтения по Брайлю или что-то в этом роде.

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

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

Аарон Перлман: Для начала я подумал, что мы могли бы сделать небольшой обзор процесса проектирования UX. Я был на разных семинарах и тому подобном, я обнаружил, что там есть множество разных людей, которые представляют множество разных дисциплин, не все являются дизайнерами пользовательского опыта, поэтому они могут быть не так хорошо знакомы с процессом, который используют многие UX-дизайнеры. Итак, я подумал, что мы просто кратко рассмотрим это, мы не собираемся тратить на это огромное количество времени, но я считаю, что это заслуживает краткого рассмотрения. Кроме того, потому что это также будет связано с доступным дизайном. Таким образом, большая часть UX-дизайна имеет тенденцию проходить через процесс, называемый открытием, это не всегда называется открытием, иногда это называется быстрым формированием идей, быстрой итерацией. Многие люди называют его по-разному, но суть в том, что это часть процесса проектирования, где происходит большая часть производства.

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

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

Аарон Перлман: Просто знайте, что со временем вы будете учиться. Конечно, я все еще ошибаюсь в доступности, и все, над чем я работаю, направлено на то, чтобы стать лучше. Итак, [неразборчиво], потому что я всегда проектирую доступным образом. Итак, одна небольшая заглушка, хотя и имеющая отношение к тому, над чем мы будем работать сегодня, называется Trane. Это наша полностью доступная библиотека шаблонов в Deque, мы используем ее для создания собственных продуктов. Это интерфейсная структура HTML, CSS и JavaScript, очень похожая на Bootstrap, если вы когда-либо использовали что-то подобное. У нас также есть библиотека реагирования, которая также является сестринской библиотекой. Наша команда развивается в реакции. Но сегодня мы рассмотрим несколько вещей в качестве примеров. Но это с открытым исходным кодом, он доступен, ссылка на него будет в конце этой колоды, которую я сделаю доступной для всех.

Аарон Перлман: И вы можете бесплатно использовать и получать ветки get и использовать их в свое удовольствие или вносить в них свой вклад, мы также хотели бы увидеть вклад в это. Так что просто небольшая заглушка, но мы будем ссылаться на нее по ходу дела. Итак, первое, что мы собираемся рассмотреть, это пропуск ссылок. А для тех, кто, возможно, не знаком с тем, что такое ссылка для пропуска, ссылки для пропуска — это небольшие ссылки, которые, как правило, отображаются в качестве самой первой позиции табуляции в веб-приложении или на веб-сайте. И то, что они позволяют вам делать, это то, что они позволяют вам обходить части веб-сайта. Почему вы хотите это сделать?

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

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

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

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

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

Аарон Перлман: А потом я пойду вперед и введу один из них, чтобы вы могли его увидеть. И что происходит в этот момент, когда я выбираю его, он отправляет меня в область рабочей области и фактически фокусирует эту область рабочей области. Что вы увидите во многих веб-приложениях, так это то, что они на самом деле не показывают сам фокус, мы хотели показать, что в наших приложениях это не фокус элементов, так сказать, но это то, что может занять некоторое время. фокус. И затем отсюда мы собираемся сфокусироваться, а затем мы можем перейти к различным элементам внутри, которые являются фокусом всех элементов, которые находятся внутри, к элементам [неразборчиво 00:12:28]. Итак, это примеры нескольких различных способов пропуска ссылок.

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

Аарон Перлман: Но иногда могут быть и другие случаи, когда ссылка с пропуском потенциально может быть полезной. Я видел, что это может быть потенциально полезным. Вы можете представить себе пример, когда большое рабочее пространство вашего сайта может быть кучей результатов поиска, и он делает ленивую оценку, когда вы прокручиваете вниз, а затем он загружает больше результатов, и прокручивает вниз, и это ll загрузит больше результатов, вы прокрутите вниз, и он загрузит больше результатов.

Аарон Перлман: Ну, а как добраться до нижнего колонтитула? И у меня была эта проблема на самом деле раньше, когда я обращался к поисковым системам и никогда не мог добраться до нижнего колонтитула. И что было бы неплохо, так это ссылка для пропуска, которая фактически позволяла мне перейти к нижнему колонтитулу, потому что я искал информацию в нижнем колонтитуле. Таким образом, есть способы, которыми пропуск ссылок может быть полезен для этого. Это не единственный способ решить эту проблему. Конечно, вы также можете использовать аппаратные клавиши или контекстные меню. Есть много различных методов для достижения этих целей, но это тот, в котором пропуск ссылок, как правило, очень хорош [неразборчиво 00:14:13]. Некоторые вещи, о которых следует помнить при разработке ссылки для пропуска, это то, что, как правило, это будет самая первая позиция табуляции в веб-приложении вашего веб-сайта.

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

Аарон Перлман: В общем, это крайне необычно. Большинство ссылок для пропуска всегда находятся на самых первых позициях табуляции. В общем, не делайте этого. Я думаю, что технически вы можете, но я бы сказал, что нет. И, наконец, это интерактивный элемент, и это прошлый цветовой контраст, поэтому убедитесь, что он работает. правильное доступное имя вместе с ним. В общем, большинство людей используют тексты и ссылки, поэтому это будет помечено как ссылка. Просто убедитесь, что он пропускает цветовой контраст так, чтобы он [неразборчиво 00:16:07]. Отлично. Вот вроде и все, что у нас есть для пропуска ссылок.

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

Аарон Перлман: Но некоторые общие вещи, которые я вижу, проявляются в большем количестве вещей, которые мы можем исправить, пока не появятся некоторые оптимизации, которые мы можем сделать, чтобы сделать его более удобным для пользователей, использующих только клавиатуру и вспомогательные технологии. И вообще, я думаю, что ваш модал намного лучше. Одна вещь, которую я хотел бы показать здесь очень быстро, это одна важная вещь, которую должен делать модальный объект, — он должен иметь возможность улавливать фокус внутри себя. Я хотел показать пример… вот он. Между прочим, я люблю дриблинг, так что это не раскопки против них. Здесь, наверное, просто небольшая оплошность. Я использовал их все время как восхитительный сайт, и на нем есть замечательные вещи.

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

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

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

Аарон Перлман: Я собираюсь открыть это очень быстро. Отлично. Итак, модальное окно, которое у них есть для этого, я думаю, это сайт с одеждой прямо здесь. А произошло то, что он сфокусировался на теле, и я могу показать это лучше всего… Я очень быстро включу VoiceOver. Я собираюсь поднять его.

VoiceOver: VoiceOver в Chrome.] Бонобо, [неразборчиво 00:20:10]-

Аарон Перлман: И вы не сможете это услышать…

VoiceOver: Google Chrome, [email protected]

Аарон Перлман: Но вы сможете это увидеть.

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

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

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

Аарон Перлман: И отсюда, когда я нажимаю клавишу табуляции, если бы этот заголовок был табулятором, он бы переходил туда, но мы решили этого не делать. Вместо этого мы подходим к завершению, и причина, по которой мы это делаем, заключается в том, что если кто-то использовал Voice Over, поскольку вы, возможно, видели что-то из того, что писалось, и в то же время попадало мне в уши, это было на самом деле очень немного. отвлекает, потому что говорит очень быстро, немного болтлив. И поэтому одна из оптимизаций, которую мы хотели сделать для этого опыта, заключалась в том, чтобы сделать его немного менее болтливым. Так что да, мы объявляем об этом, мы программно фокусируем модальное с формой, когда они впервые туда попадают, так что это позволяет им понять, что модальное, которое они вызвали, на самом деле является тем, на чем они в настоящее время сосредоточены.

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

Аарон Перлман: Говоря об управлении фокусом, последнее, что мы собираемся рассмотреть, — это само управление фокусом. И мы видели один пример этого, что может произойти, если фокус может потеряться при определенных типах обработки? Но вместо того, чтобы быть просто чем-то, что может быть серьезной проблемой, способ, которым вы управляете фокусом, может значительно изменить опыт, который будет иметь человек. На самом деле правило обработки фокуса, особенно с двумя случаями, которые мы собираемся рассмотреть прямо сейчас, а именно с удалением и добавлением элементов в ваше рабочее пространство или с чем вы работаете, заключается в следующем… Это определенно может изменить то, как кто-то взаимодействует с ним. И поэтому мы хотим, чтобы он соответствовал ожидаемому опыту, который вы получили бы от кого-то, кто использует только мышь или зрячий пользователь, я должен сказать, пользователь только с мышью.

Аарон Перлман: В данном случае мы собираемся рассмотреть… здесь мы собираемся рассмотреть… Хорошо, позвольте мне протянуть это. Задержитесь на одну секунду. Я собираюсь временно забрать это отсюда. Ну вот. Таким образом, вы не должны видеть пример модального окна, которое я разработал, на самом деле это одно модальное окно, у нас есть два вида его изображений, и только одно просто показывает то, что находится ниже сгиба, а не делает одно действительное. , действительно неправильно, или я просто разделил его, чтобы вы могли видеть, что было ниже в сгибе. А с правой стороны, если вы посмотрите, есть значок корзины, который в данный момент находится в фокусе. И поэтому, когда мы нажимаем на значок корзины, предполагая, что нет диалога, который говорит: «Вы уверены, что хотите его удалить?»

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

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

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

Аарон Перлман: По той же причине мы не обязательно хотели бы бросить это на одну из этих ссылок здесь, потому что у нас была бы противоположная проблема, когда они также случайно добавляли бы что-то. И мы не обязательно хотим, чтобы он попадал в тело, потому что мы идем в тело, и ваш пользователь Voice Over, ваш пользователь Assistant Technology, просто снова начнет болтать о модальном окне или вместо того, чтобы позволить вам продолжать взаимодействовать и делай то, что собирался.

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

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

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

Аарон Перлман: И опять же, мы не обязательно захотим сосредоточиться на другом ингредиенте по той же причине, по которой, если они снова нажмут «вернуться», мы не захотим добавить два ингредиента вместо одного. Это должно быть противоположно проблеме предыдущего примера. И последний, последний пример, который я хотел показать, потому что я думаю, что его стоит показать… на самом деле у меня есть этот пример, я могу его немного доработать. Но я могу описать это довольно точно, если у вас есть, что вы делаете, когда вызываете модальное выражение? Например, вы что-то сохранили, модальное окно исчезло, куда теперь направляется фокус и что мы обычно делаем, но эмпирическое правило заключается в том, что вы хотите отправить его обратно любому элементу [неразборчиво 00:31:03] получает.

Аарон Перлман: Итак, если вы представите, что у вас есть маленький карандаш для редактирования, и вы выбираете его, открываете модальное окно, заполняете это модальное окно, нажимаете «Сохранить», вы бы хотели перенаправить фокус обратно на этот интерактивный элемент, который, как правило, …или делаем. Могут быть случаи, когда вы хотите отправить его куда-то еще. Если это волшебник и после этого он уходит куда-то еще, опять же на усмотрение дизайнера, к какому нарративу, который вы пытаетесь нам подсказать, куда идти. Но для вещей, подобных тому… экземпляру, который я только что описал, который встречается очень часто. Вы вызываете модальное окно или что-то с ним делаете, и в результате оно отбрасывается, и контекст не обязательно меняется.

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

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

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

Аарон Перлман: Он должен исчезнуть. Кроме того, если они используют Voice Over, это тоже будет уловлено. Если вы взаимодействуете с чем-то, и оно вносит изменения где-то в другом месте, например, как будто вы что-то сделали, а затем оно где-то изменило некоторые показатели, например, вы, вероятно, захотите использовать активный регион, который делает что-то вежливо, чтобы позволить им знаю, что это случилось. Это то, что выходит за рамки того, чем вы конкретно занимаетесь. Я надеюсь, что это отвечает на ваш вопрос. Это может быть погружение во что-то более техническое. Возможно, мне придется немного доработать некоторые из них, если мы собираемся углубиться в детали технической реализации.

Скотт: Отлично.

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

Скотт: Отлично. Итак, да, постарайтесь сосредоточить внимание на вопросах, связанных с пользовательским опытом. Итак, с точки зрения взаимодействия с пользователем, как бы вы управляли фокусом для уведомлений?

Аарон Перлман: Фокус для уведомления? Я могу показать вам один, если вы хотите увидеть.

Скотт: Конечно.

Аарон Перлман: Мы можем выбирать случайным образом, потому что у нас есть всплывающие уведомления, которые являются уведомлениями. Итак, я собираюсь открыть тосты здесь. Так что это на самом деле сосредоточено прямо сейчас. Этот тост вызывается, и он находится в фокусе прямо сейчас, и вы действительно можете, как вы видите, вы можете перейти к пункту прямо здесь. So, it depends. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Skip to main content.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. It's totally free. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

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

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

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

Аарон Перлман: Конечно. Это была одна из моих первоначальных реакций на потребность в доступном дизайне: кто-то фактически надел на меня наручники и сказал: «Ты должен иметь возможность работать в гораздо меньшей коробке». Это правда, что доступное проектирование означает, что может быть больше проблем, потому что есть больше правил, которым вы должны следовать. Но, в конце концов, я обнаружил, что опыт в конечном итоге стал лучше, а я нет… Как только я убрал это неправильное название и начал делать все более и более доступные проекты, которые были доступны WCAG 2.0 AA, я заметил, что могу делать практически все. что я хотел сделать.

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

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

Аарон Перлман: Градиентный материал под ним — просто украшение, и пока он не прерывает переход цветового контраста между этим и линиями осей y и x, все в порядке. Эти строки позади него были в порядке, но в итоге я добавил галочки внизу, чтобы обозначить это. А затем, когда я навел курсор и сфокусировался, потому что иногда вы можете навести курсор, и он добавит точку к части линейного графика, просто убедившись, что сама точка передает цвет. контраст. Я сделал это, сделав что-то вроде пончика, когда вы кладете белую точку на другую точку, или, я должен сказать, это похоже на большой штрих снаружи.

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

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

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

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

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

Скотт: Да. Справедливо. Ну, на этой ноте, у нас мало времени, Аарон. Большое спасибо за ваше время и—

Аарон Перлман: Это было здорово. Я прекрасно провел время.

Скотт: Я думаю, ты будешь на следующих нескольких конференциях Smashing.

Аарон Перлман: Я буду в Нью-Йорке. Я буду на вечеринке в Нью-Йорке.

Скотт: Хорошо. И вы, ребята, проводите там мастер-класс?

Аарон Перлман: Да, мы.

Скотт: Хорошо. Потрясающий. Что ж, еще раз спасибо за ваше время, и просто чтобы показать участникам, которые все еще смотрят, у нас есть два вебинара на следующей неделе. Первый — «Сила цифровых людей» с Кристиной Поднар. И затем у нас есть номер три в нашей серии с Эндрю Кларком, Inspired Designs Decisions, номер три, вдохновленный Ernest Journal. Большое спасибо всем за участие сегодня. И снова, эта запись будет доступна на панели рассылки, как только мы закончим ее редактирование, и мы надеемся увидеть вас на следующей неделе. Так что еще раз спасибо, Эрин.

Это упаковка!

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

Мы очень рады приветствовать Аарона на нашей предстоящей SmashingConf New York (15-16 октября) — мы тоже будем рады видеть вас там!

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