Дилемма доступности

Критерии успеха для веб-доступности в соответствии с WCAG 2.1 (Руководство по доступности веб-контента) могут быть ошеломляющими, если рассматривать их только с точки зрения учебника. По моему опыту, разработчики и менеджеры почти единогласно реагируют на проекты веб-доступности. Такие как: надо ли нам читать «все это», это просто «так скучно», «просто запустите валидатор»… сверчки и перекати-поле, чтобы подытожить.

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

Но что именно нам нужно «испытать»?

Что мы бессознательно делаем большую часть времени: путешествие пользователя .

Как мы это делаем?

Сознательно сопереживая инвалидности наших пользователей, другими словами, симулировать или подражать.

Разве недостаточно проверить мой сайт с помощью валидатора?

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

Конкретную аналогию, пожалуйста?

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

Доступность витрины

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

Предпосылки

Давайте проиллюстрируем процесс на примере, но сначала установим некоторые предпосылки:

1. Основная цель витрины — позволить пользователям оформлять заказы.
2. Элементы интерфейса должны облегчать пользователю процесс оформления заказа, включая пользователей с ограниченными возможностями.
3. Разработчики и специалисты по обеспечению качества часто тестируют, представляя, что пользователь может успешно перейти из точки А в точку Б или Я в интерфейсе. Эти же люди должны также проверить, могут ли пользователи с ограниченными возможностями добраться до тех же точек.
4. Успешное попадание из точки А в точку Б или Я в тесте при имитации личности с ограниченными возможностями приведет к успешному выполнению ряда критериев доступности.

Прежде чем перейти к тому, что такое Персона , давайте проясним, что такое эмпатия . Звучит так, как будто это легко сделать, мы слышали это много раз: «поставить себя на чье-то место», насколько это может быть сложно? Что ж, оказывается, у людей разный уровень эмпатии, и обычно на них влияет их собственный жизненный опыт… так что это не так просто.

Сочувствие — это НЕ сопереживание

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

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

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

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

Сопротивление эмпатии

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

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

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

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

Люди с ограниченными возможностями

Прежде чем закрыть глаза , давайте определим, что такое Персона ; В контексте дизайна пользовательского опыта (UX) « персонажи » — это архетипические пользователи, чьи цели и характеристики отражают потребности и ограничения большей группы пользователей. Да, обращение к пользователям помогает в процессе эмпатии, погуглив «персонажи для доступности», мы можем найти много доступных персонажей для использования, но тогда да, больше чтения… снова сверчки и перекати-поле.

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

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

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

Путь критического пользователя

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

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

Нажмите Tab в поле поиска > введите «Женский желтый шарф»> перейдите к первому продукту (притворяясь желтым шарфом)> Начните процесс оформления заказа.

Эмулировать или симулировать?

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

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

Взаимодействие с клавиатурой

• Вкладка
• SHIFT+ТАБ
• КОСМОС
• ВХОДИТЬ
• Клавиши со стрелками.

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

Подражание Джейн

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

Подражание Джону

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

Общие проблемы

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

Соответствие критериям

Уточнение терминов: критерии множественного числа; критерий единственный.

Теперь, если вам удалось успешно завершить процесс оформления заказа, подражая Джейн и Джону , то эта витрина соответствует следующим критериям WCAG 2.0 .

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

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

В заключении

1. Мы можем проверить доступность витрины магазина, «идя пешком» с сочувствием.
2. При планировании, разработке и тестировании витрины интернет-магазина любые усилия по устранению ошибок, связанных с 16 критериями, указанными выше, облегчат оформление заказа для пользователей с ограниченными возможностями.
3. Веб-разработчик должен убедиться, что доступное критическое путешествие пользователя действительно работает, прежде чем передать его тестировщику качества.
4. Лучший инструмент проверки — эмпатия.
5. Иногда, закрыв глаза, мы можем «увидеть», где проблема.
6. Покупатели с ограниченными возможностями должны иметь возможность совершать покупки в Интернете, как в обычных магазинах.
7. Никто не освобождается от инвалидности на протяжении всей жизни, в лучшем случае: мы все стареем.
8. Веб-доступность следует рассматривать как возможность для бизнеса в любой стратегии, направленной на получение денежных средств , прежде чем она станет сценарием , ведущим к судебному процессу .