Как поместить красоту в глаза смотрящего, если они сломались?
И дело не в хреновом восприятии эстетики. Что если это реально незрячий человек? Как тому, кто не видит, описать произведение визуального искусства? Или всё, пусть своего Моцарта слушает, а картины по умолчанию неинклюзивны?
У нас всю команду Госуслуг вот уже год таращит на тему доступности и инклюзии. Активно движемся к тому, чтоб однажды огромный портал стал доступным для людей с любыми ограничениями... Но про это как-нибудь потом, когда пофиксим критичное.
Сейчас я это всё к тому, что мы регулярно находим разные статьи, видео и примеры про доступность и шэрим друг другу в рабочем чатике. И вчера на выставке авангардистов я аж пискнула. И бросилась фоткать, чтоб скорее показать.
Не знаю, насколько снимок отражает реальные ощущения... Но, посоны, там на стендах выпуклые репродукции картин! Это же гениально.
Мы даже тестировали друг на друге. Подводили с закрытыми глазами к стендам и просили угадать наощупь, что изображено.
Получилось даже без спецнавыков. Хотя очевидно, что у незрячих людей тактильная чувствительность ещё более развита.
Озвучку про цвета, композицию, стиль и настроение такое не заменит. Но дополнение восхитительное. Скажите же?
#ux_вещей #доступность
И дело не в хреновом восприятии эстетики. Что если это реально незрячий человек? Как тому, кто не видит, описать произведение визуального искусства? Или всё, пусть своего Моцарта слушает, а картины по умолчанию неинклюзивны?
У нас всю команду Госуслуг вот уже год таращит на тему доступности и инклюзии. Активно движемся к тому, чтоб однажды огромный портал стал доступным для людей с любыми ограничениями... Но про это как-нибудь потом, когда пофиксим критичное.
Сейчас я это всё к тому, что мы регулярно находим разные статьи, видео и примеры про доступность и шэрим друг другу в рабочем чатике. И вчера на выставке авангардистов я аж пискнула. И бросилась фоткать, чтоб скорее показать.
Не знаю, насколько снимок отражает реальные ощущения... Но, посоны, там на стендах выпуклые репродукции картин! Это же гениально.
Мы даже тестировали друг на друге. Подводили с закрытыми глазами к стендам и просили угадать наощупь, что изображено.
Получилось даже без спецнавыков. Хотя очевидно, что у незрячих людей тактильная чувствительность ещё более развита.
Озвучку про цвета, композицию, стиль и настроение такое не заменит. Но дополнение восхитительное. Скажите же?
#ux_вещей #доступность
Долбаный контраст и отдолбанный мизинчик
На фото — кровать в отельном номере, установщик которой проклят мной неоднократно и, наверняка, уже погиб от такой мощной насланной порчи.
Дело в том, что каркас шире матраса, а его цвет практически идентичен цвету пола... поэтому незаметен, на что я попадаюсь каждый долбаный раз.
И совсем не мизинчик
В интерфейсах мы постоянно утыкаемся в то же самое: нравящиеся, нам интересные и креативные сочетания фона и цвета шрифта не всегда контрастны. Просто потому что не у всех последний макбук или свежий телефон. А ещё не всегда полная яркость экрана.
Плюс банальная усталость и мутность взгляда под вечер.
И это я не говорю о тех, у кого базовые проблемы с визуальным восприятием из-за проблем со здоровьем.
Как быть
Чтобы все важные элементы были заметны, а шрифт читабелен, давно разработы стандарты контрастности интерфейсов. Достаточно просто знать коды цветов фона и элемента, чтобы удостовериться, что нужные штуки будут заметны всем.
И нет, для этого не нужно пихать красный вырвиглазный шрифт на кислотно-зелёный фон... Кстати, есть нарушения цветовосприятия, где даже такие противоположные цвета сливаются.
Диапазоны оттенков в стандарте вполне приемлемые. Можно делать и красиво, и контрастно.
Полезности
Если вдруг кто не в теме, стандарт задан документацией WCAG
А готовые чекеры работают в плагинах «Фигмы». Например, «Contrast» или «A11y Color Contrast Checker»
Бонус: файл «Accessible Colour Palettes» с готовыми палитрами по WCAG.
#доступность
#ux_вещей
На фото — кровать в отельном номере, установщик которой проклят мной неоднократно и, наверняка, уже погиб от такой мощной насланной порчи.
Дело в том, что каркас шире матраса, а его цвет практически идентичен цвету пола... поэтому незаметен, на что я попадаюсь каждый долбаный раз.
И совсем не мизинчик
В интерфейсах мы постоянно утыкаемся в то же самое: нравящиеся, нам интересные и креативные сочетания фона и цвета шрифта не всегда контрастны. Просто потому что не у всех последний макбук или свежий телефон. А ещё не всегда полная яркость экрана.
Плюс банальная усталость и мутность взгляда под вечер.
И это я не говорю о тех, у кого базовые проблемы с визуальным восприятием из-за проблем со здоровьем.
Как быть
Чтобы все важные элементы были заметны, а шрифт читабелен, давно разработы стандарты контрастности интерфейсов. Достаточно просто знать коды цветов фона и элемента, чтобы удостовериться, что нужные штуки будут заметны всем.
И нет, для этого не нужно пихать красный вырвиглазный шрифт на кислотно-зелёный фон... Кстати, есть нарушения цветовосприятия, где даже такие противоположные цвета сливаются.
Диапазоны оттенков в стандарте вполне приемлемые. Можно делать и красиво, и контрастно.
Полезности
Если вдруг кто не в теме, стандарт задан документацией WCAG
А готовые чекеры работают в плагинах «Фигмы». Например, «Contrast» или «A11y Color Contrast Checker»
Бонус: файл «Accessible Colour Palettes» с готовыми палитрами по WCAG.
#доступность
#ux_вещей
Доступность — в самое сердешко
Всю нашу команду интерфейсов Госуслуг прям таращит от темы цифровой доступности. Двойная мотивация от того, что это поддерживается на уровне Минцифры.
Например, вчера замминистра Дмитрий Огуряев очно вручил нашим котикам, занимающимся изучением и развитием доступности Госуслуг, дипломы. Сказал, какое это крутое и важное дело, а ещё сравнил продвижение в нём игрой в «Героев меча и магии»: когда ты один герой на коне, вокруг только туман, а твоя смелость в освоении нового позволяет получать опыт и ресурсы 💓
В общем, доступность — это важно и нужно.
Вот вам немного воодушевляющих материалов из нашего рабочего чатиках по доступности, чтобы просто проникнуться или углубить знания
Обзорная сатья от нашего лида доступности
Доказательство важности внедрения доступности от VK
Рассказ самого известного незрячего разработчика о доступности в Яндексе
Видос про тифлокомментарии
UX субтитров
Книга про доступность на iOS
и видос от её автора
Правила создания alt-описаний
и о том, какое именно содержимое в них должно быть
Аксесабилити в фигме
Про ненужность отдельной версии сайта для слабовидящих
Классные примеры про области тапа, ментальные модели и дизайн-системы
Яндекс Go для незрячих
Сбер для незрячих
Пачка статеек с тегом A11y про доступность в разных разрезах
#доступность
Дополняйте список своими полезным материалами по accessibility 🤗
@uxksenia_channel
Всю нашу команду интерфейсов Госуслуг прям таращит от темы цифровой доступности. Двойная мотивация от того, что это поддерживается на уровне Минцифры.
Например, вчера замминистра Дмитрий Огуряев очно вручил нашим котикам, занимающимся изучением и развитием доступности Госуслуг, дипломы. Сказал, какое это крутое и важное дело, а ещё сравнил продвижение в нём игрой в «Героев меча и магии»: когда ты один герой на коне, вокруг только туман, а твоя смелость в освоении нового позволяет получать опыт и ресурсы 💓
В общем, доступность — это важно и нужно.
Вот вам немного воодушевляющих материалов из нашего рабочего чатиках по доступности, чтобы просто проникнуться или углубить знания
Обзорная сатья от нашего лида доступности
Доказательство важности внедрения доступности от VK
Рассказ самого известного незрячего разработчика о доступности в Яндексе
Видос про тифлокомментарии
UX субтитров
Книга про доступность на iOS
и видос от её автора
Правила создания alt-описаний
и о том, какое именно содержимое в них должно быть
Аксесабилити в фигме
Про ненужность отдельной версии сайта для слабовидящих
Классные примеры про области тапа, ментальные модели и дизайн-системы
Яндекс Go для незрячих
Сбер для незрячих
Пачка статеек с тегом A11y про доступность в разных разрезах
#доступность
Дополняйте список своими полезным материалами по accessibility 🤗
@uxksenia_channel
Важность контраста
#доступность
Видите белые стрелки на жёлтом фоне? 👆 Я — да, но только на фотке. В реальности с аэропортовым светом они несчитываемы совсем. На самом деле, есть даже такой критерий представления визуала — минимальный контраст. И это совсем не эфимерная штука, а довольно измеримый параметр. Правда, для интернета. Хотя для физического мира такое тоже не помешает применять.
Вцаг!
Параметры подходящей контрастности описаны во WCAG — Web Content Accessibility Guidelines. Их составили в 1999 году ребята из W3C — Консорциума всемирной сети. Организация, которая зародилась в MIT при поддержке чуваков из ARPANET — предшественника современного интернета... Чуете пафос и мощный бэкграунд? 😎
В общем, эти товарищи сначала организовали WAI — инициативу по обеспечению доступности Интернета. И в рамках этой активности написали гайд по доступности — WCAG.
Прастити, W3C, WAI, WCAG... Слишком много аббревиатур на W 🙈
Детали
Сейчас у вцага версия 2.1 от 2018 года. Оригинал на английском, но есть официальная русская версия, правда 2.0.
Там 4 ключевых части про воспринимаемость, управляемость, понятность и надёжность. И вот в первой части, в пункте 1.4.3, как раз, есть требования к контрасту.
Коэффициент контрастности должен составлять в худшем случае 4,5:1, а в идеале — 7:1.
Что это значит
1:1 — это очень плохой контраст, буквально белое на белом.
21:1 — это супер-контраст, чёрное на белом фоне.
Обычно первое значение — это текст, а второе — фон. Но вообще важно, чтоб, как в примере на картинке, ключевые элементы были контрастны с фоном, на котором располагаются.
Что с этим делать
Использовать инструменты и сразу проверять на соответствие вцагу все сомнительные элементы.
Обычно вводятся цвет фона и цвет акцентного элемента. А в результате отображается тот самый коэффициент.
— Можно использовать плагин Фигмы: Contrast или A11y
— Вводить коды цветов онлайн
— Выбирать из палитры
— Загружать картинку
— Чекать прогой на винде или маке
@uxksenia_channel
#доступность
Видите белые стрелки на жёлтом фоне? 👆 Я — да, но только на фотке. В реальности с аэропортовым светом они несчитываемы совсем. На самом деле, есть даже такой критерий представления визуала — минимальный контраст. И это совсем не эфимерная штука, а довольно измеримый параметр. Правда, для интернета. Хотя для физического мира такое тоже не помешает применять.
Вцаг!
Параметры подходящей контрастности описаны во WCAG — Web Content Accessibility Guidelines. Их составили в 1999 году ребята из W3C — Консорциума всемирной сети. Организация, которая зародилась в MIT при поддержке чуваков из ARPANET — предшественника современного интернета... Чуете пафос и мощный бэкграунд? 😎
В общем, эти товарищи сначала организовали WAI — инициативу по обеспечению доступности Интернета. И в рамках этой активности написали гайд по доступности — WCAG.
Прастити, W3C, WAI, WCAG... Слишком много аббревиатур на W 🙈
Детали
Сейчас у вцага версия 2.1 от 2018 года. Оригинал на английском, но есть официальная русская версия, правда 2.0.
Там 4 ключевых части про воспринимаемость, управляемость, понятность и надёжность. И вот в первой части, в пункте 1.4.3, как раз, есть требования к контрасту.
Коэффициент контрастности должен составлять в худшем случае 4,5:1, а в идеале — 7:1.
Что это значит
1:1 — это очень плохой контраст, буквально белое на белом.
21:1 — это супер-контраст, чёрное на белом фоне.
Обычно первое значение — это текст, а второе — фон. Но вообще важно, чтоб, как в примере на картинке, ключевые элементы были контрастны с фоном, на котором располагаются.
Что с этим делать
Использовать инструменты и сразу проверять на соответствие вцагу все сомнительные элементы.
Обычно вводятся цвет фона и цвет акцентного элемента. А в результате отображается тот самый коэффициент.
— Можно использовать плагин Фигмы: Contrast или A11y
— Вводить коды цветов онлайн
— Выбирать из палитры
— Загружать картинку
— Чекать прогой на винде или маке
@uxksenia_channel
Больше чем разметка
#доступность
Уже говорила, как нашу команду Госуслуг прёт на тему a11y и как мы всё шире распространяем на других понимание важности доступности: и реального мира, и цифровой.
В чатик таких вот «обдоступненных» недавно скинули фотку из поликлиники 👆 Мы пообсуждали, что видим такое впервые. И я принялась гуглить.
Тактильная разметка
Ну, знаете, вот эти жёлтые выпуклые плитки на полу. Впервые появились в Японии в 1965. В России начали вводиться с 2011, а закрепились в гостах в 2017.
Что с перилами
Засечки на фотке означают количество лесенок, оставшееся до конца спуска.
Как справедливо заметили в том нашем чате, незрячие нередко пользуются тростью. Но в материале про умную трость, найденном на Хабре, приводятся примеры использования только вестибулярной чувствительности, светоощущения и эхолокации или перемещения с собакой-поводырём.
По лестнице без глаз
Попробуйте закрыть глаза и спуститься по лестнице. Когда со мной провели такой эксперимент в универе, попросив пройтись с закрытыми глазами по коридору в перемену, я потом почти плакала. Это было очень стрёмно.
Примерно такие же чувства, кстати, испытывают коллеги, когда мы просим попробовать их прочитать свой интерфейс при помощи экраного диктора для незрячих.
Так вот. Спускаться по лестнице, не видя её — дико опасно и ужасно дискомфортно. И такие засечки — классный вспомогательный элемент.
Из Кореи — в Россию
Идею наклеек на перила придумали южнокорейские дизайнеры в концепте Safety Dot ещё в 2010-х годах. Они предлагали оснастить такими штуками поручни всех лестниц-эскалаторов-траволаторов, чтобы предупреждать заранее о крае конструкции.
Вне лестничных гайдов
Нагуглила пачку методичек разных лет. Но больше всего впечатлила статья про лестницы — вы только гляньте, сколько, оказывается нюансов!
Но даже там, кстати, нет ничего про такие наклейки. Не говоря уже об официальных гостах.
Получается, такая перилловая забота — не из под палки, а реально осозанная. Кажется, у этого социума ещё не всё потеряно)
#доступность
Уже говорила, как нашу команду Госуслуг прёт на тему a11y и как мы всё шире распространяем на других понимание важности доступности: и реального мира, и цифровой.
В чатик таких вот «обдоступненных» недавно скинули фотку из поликлиники 👆 Мы пообсуждали, что видим такое впервые. И я принялась гуглить.
Тактильная разметка
Ну, знаете, вот эти жёлтые выпуклые плитки на полу. Впервые появились в Японии в 1965. В России начали вводиться с 2011, а закрепились в гостах в 2017.
Что с перилами
Засечки на фотке означают количество лесенок, оставшееся до конца спуска.
Как справедливо заметили в том нашем чате, незрячие нередко пользуются тростью. Но в материале про умную трость, найденном на Хабре, приводятся примеры использования только вестибулярной чувствительности, светоощущения и эхолокации или перемещения с собакой-поводырём.
По лестнице без глаз
Попробуйте закрыть глаза и спуститься по лестнице. Когда со мной провели такой эксперимент в универе, попросив пройтись с закрытыми глазами по коридору в перемену, я потом почти плакала. Это было очень стрёмно.
Примерно такие же чувства, кстати, испытывают коллеги, когда мы просим попробовать их прочитать свой интерфейс при помощи экраного диктора для незрячих.
Так вот. Спускаться по лестнице, не видя её — дико опасно и ужасно дискомфортно. И такие засечки — классный вспомогательный элемент.
Из Кореи — в Россию
Идею наклеек на перила придумали южнокорейские дизайнеры в концепте Safety Dot ещё в 2010-х годах. Они предлагали оснастить такими штуками поручни всех лестниц-эскалаторов-траволаторов, чтобы предупреждать заранее о крае конструкции.
Вне лестничных гайдов
Нагуглила пачку методичек разных лет. Но больше всего впечатлила статья про лестницы — вы только гляньте, сколько, оказывается нюансов!
Но даже там, кстати, нет ничего про такие наклейки. Не говоря уже об официальных гостах.
Получается, такая перилловая забота — не из под палки, а реально осозанная. Кажется, у этого социума ещё не всё потеряно)
По теме доступности
В прошлом посте говорила про доступность и ссылалась на материалы по теме.
Извините, тут сейчас будет очень много раз повторено слово «Доступность» 🤭
Наблюдаю, что вопросы a11y всё больше волнуют умы диджитал-спецов. Поэтому вот вам для закладочек всякого по теме в очередной раз.
Мои посты
— Подборка статей по теме доступности
— Плагины и сервисы для проверки контраста
Статьи нашей команды Госуслуг
— Как проверить доступность сервиса
— Экспресс-тестирование доступности
— Внедрение доступности
— Внутренняя стажировка на примере доступности
— Выгода от обеспечения доступности сервисов
Митап Юзабилитилаб и Госуслуг
Запись
Танюша Миронова, наш лид доступности и качества, вещает про их обеспечение в Госуслугах
@uxksenia_channel
#доступность
В прошлом посте говорила про доступность и ссылалась на материалы по теме.
Извините, тут сейчас будет очень много раз повторено слово «Доступность» 🤭
Наблюдаю, что вопросы a11y всё больше волнуют умы диджитал-спецов. Поэтому вот вам для закладочек всякого по теме в очередной раз.
Мои посты
— Подборка статей по теме доступности
— Плагины и сервисы для проверки контраста
Статьи нашей команды Госуслуг
— Как проверить доступность сервиса
— Экспресс-тестирование доступности
— Внедрение доступности
— Внутренняя стажировка на примере доступности
— Выгода от обеспечения доступности сервисов
Митап Юзабилитилаб и Госуслуг
Запись
Танюша Миронова, наш лид доступности и качества, вещает про их обеспечение в Госуслугах
@uxksenia_channel
#доступность
Закреп для навигации
Салют, я Ксюша Морозова, дизайн-директор Госуслуг. Уже 12 лет обожаю свою профессию ux-проектировщика и удовольствием делюсь интересным тут.
Вот подборка самых полезных и интересных статей
Основное
#ux_вещей
#недиджитал_юикс
Применение юикса в жизни и быту
#управление_впечатлениями
#юикс_движа
Интересное про подачу информации и работу с впечатлениями людей
#круто_или_тупо
Совместное обсуждение ux-решений
#рисёрч
Годнота про исследования
#учу_юиксу
Анонсы и материалы с разных образовательных движух, книги, курсы
#карьера
Советы по росту в должности и доходе
Соседние сферы
#текст
UX-тексты и просто здравый смысл
#пикчи
Полезное про графику и иллюстрации
#доступность
Подборки статей, инструментов и интересные наблюдения
Медиа
#видевоподкаст
Интервью с классными коллегами из диджитала
#uxksenia_подкаст
Шкодные рассказы про работу
Всякое
#fun
Забавные пикчи
#жисть
Бытовые заметки
#госуслуги
Наблюдения и ништяки с работы
💙
Салют, я Ксюша Морозова, дизайн-директор Госуслуг. Уже 12 лет обожаю свою профессию ux-проектировщика и удовольствием делюсь интересным тут.
Вот подборка самых полезных и интересных статей
Основное
#ux_вещей
#недиджитал_юикс
Применение юикса в жизни и быту
#управление_впечатлениями
#юикс_движа
Интересное про подачу информации и работу с впечатлениями людей
#круто_или_тупо
Совместное обсуждение ux-решений
#рисёрч
Годнота про исследования
#учу_юиксу
Анонсы и материалы с разных образовательных движух, книги, курсы
#карьера
Советы по росту в должности и доходе
Соседние сферы
#текст
UX-тексты и просто здравый смысл
#пикчи
Полезное про графику и иллюстрации
#доступность
Подборки статей, инструментов и интересные наблюдения
Медиа
#видевоподкаст
Интервью с классными коллегами из диджитала
#uxksenia_подкаст
Шкодные рассказы про работу
Всякое
#fun
Забавные пикчи
#жисть
Бытовые заметки
#госуслуги
Наблюдения и ништяки с работы
💙