Это тематическое исследование того, почему и как я создал свой недавний боковой проект- Отчет о доступности для менеджеров . Часть 1 рассказывает об идее, стоящей за ней, и о том, как был создан фронт.
Доступность является очень важным аспектом любого продукта. Если ваш продукт недоступен для каждого возможного пользователя, то вы просто теряете потенциальных пользователей. За последние несколько лет я все больше и больше заботился о доступности в каждой работе, которую я делаю, не только в веб -разработке, но и все. С этим также возникает разочарование, чтобы увидеть все эти веб -сайты, которые нарушают даже основные правила доступности.
Недостаток знаний, безусловно, является причиной плохой доступности на веб -сайтах. Но это не всегда просто отсутствие знаний разработчиков. Я чувствую, что бывают случаи, когда разработчики хотят уделить время, чтобы улучшить доступность в своей работе, поскольку они постепенно изучают новые и новые вещи, но им не всегда дают свободу делать это. Опять же, это отсутствие знаний и сочувствия, но в другом наборе людей, которые управляют этими разработчиками. Вот почему доступность, и в этом отношении любая часть веб -сайта – это не просто работа разработчика. Это должна быть ценность компании, которая начинается с ранней стадии концептуализации идеи, проектирования, разработки, управления продуктами, маркетинга и за ее пределами.
Идея «Отчет о доступности для менеджеров»
Самый распространенный аргумент, который мы слышим от людей, которые пытаются убедиться в том, чтобы сосредоточиться на доступности, – это:
Эй, у нас действительно есть такие пользователи? Кто -нибудь когда -нибудь жаловался на то, что наш веб -сайт не доступен? — Менеджер
Это дало мне идею – почему бы не сделать приложение, которое дает этим людям то, что они хотят – настоящие отзывы от реальных пользователей. Но потом я подумал, что основной целью здесь является «настоящая обратная связь», а не «настоящие пользователи» 😉 Это привело к всей концепции «Отчет о доступности для менеджеров» – веб -сайт, где вы можете ввести любой URL -адрес веб -сайта и генерировать отчет, полный фиктивных отзывов о фактических вопросах доступности на этом веб -сайте, фиктивными пользователями 🙂 Вы передаете этот отчет своему менеджеру кто все это время просил реальных отзывов клиентов, и вуаля!
Отказ от ответственности : Идея здесь совсем не заключается в том, чтобы уменьшить важность фактического тестирования доступности и обратной связи, представленных реальными пользователями. Это в наиболее важном. Это приложение – просто забавная попытка привлечь другую перспективу, чтобы рассмотреть реальные проблемы доступности.
Реальная ценность
Хорошо, забавная часть в стороне. Отчет о доступности для менеджеров Не просто забавный непрактичный веб -сайт для создания этих поддельных отзывов. Я понял, что это служит более практичной цели. Это приложение в основном дает вам совсем другое, ориентированное на клиента представление о проблемах доступности, представленных на вашем веб -сайте. Сравните это с чтением истории и фактически увидеть/услышать ту же историю в фильме. Аналогичным образом, текстовый список проблем, полученных из Линтера, не создаст такого же количества эмпатии внутри читателя, что, вероятно, твит от разочарованного пользователя, показывающего скриншот чего -то сломанного на веб -сайте.
Например, сравните эти два:
Линтер : Цвет контраст не достаточно. Это должно быть не менее 4,5: 1. Отзывы пользователя : Привет, веб -администратор, я просматривал ваш сайт, чтобы выполнить работу, но в некоторых местах мне действительно трудно прочитать текст, вероятно, из -за плохого контраста цвета.
Я надеюсь, что вы увидите огромную разницу между ними. Я чувствую, что последний дает очень понятный взгляд на ту же проблему.
TL; DR: Создание приложения
Это приложение, хотя и, казалось бы, маленькое, имеет довольно много компонентов за кулисами. И лучшая часть, как разработчик Frontend, я мог бы написать все это в JavaScript и запустить, фактически не настраивая и не управляя сервером. Эти вещи действительно волнуют меня, и эта серия статьи является попыткой поделиться всем процессом создания такого приложения со всеми последними технологиями. Давайте начнем с технического стека, используемого в приложении.
Примечание: приложение Открытый исходный код на GitHub Анкет
Компонент 1 – фронт
Я выбрал Preact написать фронт этого приложения. Preact – это чрезвычайно легкая (всего 3 КБ GZIPPED) альтернатива для реагирования практически с тем же API. Он идеально подходит для сценария, в котором у вас есть такое маленькое приложение, и вы не хотите перегружать его с помощью Framework. Я использовал Preact’s preact-cli который делает базовые леса для предварительного прогрессивного веб -приложения. Нет другой зависимости от Frontend, кроме Preact.
CSS написан старомодным способом – один файл CSS.
Компонент 2 – бэкэнд
Бэкэнд в основном представляет собой набор функций без серверов, который создает 2 конечных точка для фронта. Опять же, все они написаны в JavaScript (Nodejs).
- Есть одна конечная точка API, чтобы получить фактические проблемы на данной странице, которая использует pa11y пакет для извлечения всех проблем.
- Вторая конечная точка API – получить снимок экрана затронутых областей. Это делается с использованием Кукольник Чтобы получить скриншот конкретных элементов на странице.
Компонент 3 – развертывание
Оба, фронт и бэкэнд, сейчас размещены на Zeit. Он просто включает в себя написание конфигурации развертывания для ваших компонентов, и все развернуто с помощью одной команды без управления каким -либо сервером!
Фронт
Примечание : Пока мы не доберемся до бэкэнда, предположим, что у нас есть бэкэнд API. Мы можем отправить любой URL -адрес API, и он возвращает нам список вопросов доступности.
Структура
Я люблю реагировать. Но если проект, над которым я работаю, не слишком требовательный с точки зрения функций, и я единственный, кто работает над ним, я предпочитаю использовать Preact – которая является альтернативой 3KB для реагирования. Такое ощущение, что я отправляю приложение JS Vanilla, получая такую же легкость, как и в React.
У Preact также есть CLI, который строит базовое прогрессивное приложение.
Создание поддельных твитов – контент
Как я уже упоминал, наш API дает нам список вопросов доступности (найденный через pa11y ) Прежде всего, нам нужно превратить их в твиты. Каждая проблема в списке имеет следующую структуру:
{
code: "WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1",
message: "Iframe element requires a non-empty title attribute that identifies the frame.",
type: "error",
selector: "#77c8c1c1-74e9-4d61-be2e-c1e39ffe02a0"
}
код является уникальным идентификатором для конкретного руководства по доступности, который не соблюдался, кратко объяснил в Сообщение ценность. Основная суть этого приложения – превратить технические руководства в, казалось бы, реальную обратную связь от реального пользователя. Вот почему мне нужно преобразовать это в твит. И один и тот же твит всегда для конкретного типа проблемы будет выглядеть нереально и скучно. Поэтому я поддерживаю 3-4 различных твита для каждого типа выпуска и выбираю его случайным образом. Вот так:
const supportedRules = {
INSUFFICIENT_CONTRAST: "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail",
MISSING_LABEL_ON_FORM_CONTROL: "WCAG2AA.Principle1.Guideline1_3.1_3_1.F68"
};
function generateFeedback(issue, url) {
switch (issue.code) {
case supportedRules.MISSING_LABEL_ON_FORM_CONTROL: {
return {
message: [
`Dear Web Developer, I cannot see and browse the web using a screen reader. And websites like ${url} on which you don't label your form elements are completely unusable to people like me. #fixtheweb #a11y`,
`Oh God! It's a disaster browsing websites where the developer simply didn't care to put a label on form controls!! Encountered one such site -> ${url} #accessibility.`
][random(0, 2)]
};
}
case supportedRules.INSUFFICIENT_CONTRAST: {
return {
message: [
`Hello! I was browsing through your website ${url} and facing issues with reading few texts. I guess it could get a lil' better for people like me if the text color had some more contrast with the background.`,
`It's such a difficult task to read websites these days. Eg. Missing text contrast here -> ${url} Someone please fix the web. #accessibility`
][random(0, 2)]
};
}
}
}
Здесь происходит, я сделал перечисление для поддерживаемых кодов руководства доступности, чтобы прояснить их при их ссылке. Тогда есть GenerateFeedback функция, которая выполняет Переключение по вопросу доступности код и возвращает случайную обратную связь из списка отзывов, соответствующих этому вопросу.
Еще одна вещь, которую нужно отметить, это то, что я передаю URL -адрес веб -сайта, отчет которого генерируется, к GenerateFeedback функция Этот принятый аргумент используется в $ {url} Заполнитель в строках обратной связи, которые на самом деле Шаблоны литералы Анкет
Создание фальшивых твитов – фальшивые пользователи
Это интересно! Затем нам нужны фальшивые пользователи, чтобы показать в наших твитах отзывов. Я много искал услуги, которые предоставили бы мне случайные пользовательские данные и, наконец, установились на https://randomuser.me Анкет Это бесплатно, быстро и дал мне данные, которые я хотел ( например. имя, фото и т. Д.). У него есть API с всевозможными вариантами, но тот, кто представляет наш интерес здесь, – это Результаты вариант. Вы можете пройти счет в Результаты Параметр и API вернет вам это количество поддельных пользователей. Сладкий, верно!
Таким образом, весь процесс генерации отчетов до сих пор выглядит следующим образом:
- Я получаю список проблем от API
- Список проблем преобразуется в поддельные твиты обратной связи (только в поддержку вопросов)
- Согласно количеству отзывов, которые мы генерируем, мы получаем это количество поддельного пользователя из https://randomuser.me
Создание фальшивых твитов – Твиттер рубает
Чтобы завершить наш фальшивый твит с обратной связью, нам нужно показать ручки в Твиттере (имя пользователя) наших поддельных пользователей. Теперь мы могли бы просто создать случайные строки из чисел и алфавитов, но это снова будет выглядеть нереально. И как весело делать нереальные вещи! Итак, вот что я делаю вместо этого:
- Для каждого пользователя у нас есть полное имя пользователя.
- Я извлекаю какую -то часть имени пользователя ( f ) и какую -то часть их фамилии ( l ).
- Затем с вероятностью 50%, Я концентрирую F и L с подчеркиванием. Остальные 50% раз я сразу же. Потому что люди обычно связываются с их именами и фамилиями, чтобы создать свои ручки.
- Далее, с вероятностью 30%, я добавляю несколько цифр (максимум 3) после результата шага 3. Почему? Потому что не все в Twitter-verse получают свою ручку по выбору. Они добавляют случайные числа, чтобы сделать его уникальным:)
- Результат добавляется к символу «@».
И у нас есть ручка готова! Если вам интересно, как мы делаем что -то с вероятностью x%, это может быть легко сделано, проверив результат Math.random () Анкет Например: чтобы запустить код с вероятностью 70%, мы могли бы использовать Math.random ()> 0,3 Анкет Это условие означает, что мы хотим, чтобы номер был возвращен Math.random () быть больше 0,3. И Math.random () Вернуться от 0 до 1. Таким образом, в основном мы проверяем, что возвращаемое число должно быть от 0,3 до 0,1. Это приводит к наличию 70% шансов:
0 – 0,3 → 30%, вероятно, результаты 0,3 – 1 → 70%, вероятно, результаты
Вот как выглядит полная функция:
function getHandleFromName(fname, lname) {
// Concatenating extracts from first and last name, with _ maybe?
let handle = [
`${fname.substr(0, random(1, fname.length - 1))}`,
Math.random() > 0.5 ? "_" : "",
`${lname.substr(0, random(1, lname.length - 1))}`
].join("");
// Add some digits?
if (Math.random() > 0.7) {
handle = `${handle}${random(0, 999)}`;
}
// Append to @
return `@${handle}`;
}
Создание фальшивых твитов – окончательные предметы
Ко всем приведенным выше данным мы добавляем случайный «как», подсчет и дата твита. Еще одна вещь, которую показывает твит, – это изображение элемента на веб -сайте, которое провалило руководство доступности. Помните структуру проблемы, которую мы получаем от API? У него был ключ под названием Селектор является селектором CSS соответствующего элемента. Я создал еще один API, которому я передаю селектор CSS и URL -адрес веб -сайта, и он возвращает мне скриншот этого элемента. Подробнее об этом позже.
И комбинируя все поддельные данные, мы генерируем этот красивый твит с поддельными обратной связью:
Твитнуть скриншот фальшивого пользователя, жалующегося на пользователь Color Contrast
Вот и для этой статьи. В Следующая статья Я пройду через бэкэнд приложения и как оно развернуто.
Оригинал: “https://dev.to/chinchang/case-study-accessibility-for-managers-part-1-862”