Forwarded from Явно.Дизайн
База по A11y: с чего начать улучшение Accessibility?
Accessibility (или A11y) подразумевает предоставление возможности как можно большему количеству людей пользоваться цифровой средой, даже если возможности этих людей каким-то образом ограничены.
Основная идея A11y: люди с ограниченными возможностями должны иметь такой же доступ к информации, как и люди без них.
Четыре главных принципа доступности цифрового контента согласно W3C:
Воспринимаемость — информация должна быть представлена пользователям в доступной для восприятия форме
Управляемость — компоненты пользовательского интерфейса и навигационные элементы должны быть управляемы
Понятность — информация и управление интерфейсом должны быть понятными
Надежность — контент должен быть таким, чтобы он мог быть представлен с помощью вспомогательных программ
Какие основные типы нарушений и ограничений нужно учитывать:
◆ визуальные
◆ слуховые
◆ заболевания нервной системы
◆ когнитивные нарушения
◆ двигательная инвалидность
Потеря дееспособности может быть не только врожденной, но и временной. Поэтому потенциальная целевая аудитория, для которой важна A11y — это все пользователи интернета.
В этих карточках мы даём практические рекомендации, с чего начать внедрение A11y в работу.
Использованные материалы и полезности:
Руководство по alt-text от слабовидящего веб-разработчика
Интерфейс доступный каждому: практические рекомендации
How-to: Use the tabindex attribute - The A11Y Project
Accessibility (A11y) why is it so important?🧵
Сайт для проверки контрастности
Плагин для Фигмы для проверки контрастности
#заметка #гость #доступность
Accessibility (или A11y) подразумевает предоставление возможности как можно большему количеству людей пользоваться цифровой средой, даже если возможности этих людей каким-то образом ограничены.
Основная идея A11y: люди с ограниченными возможностями должны иметь такой же доступ к информации, как и люди без них.
Четыре главных принципа доступности цифрового контента согласно W3C:
Воспринимаемость — информация должна быть представлена пользователям в доступной для восприятия форме
Управляемость — компоненты пользовательского интерфейса и навигационные элементы должны быть управляемы
Понятность — информация и управление интерфейсом должны быть понятными
Надежность — контент должен быть таким, чтобы он мог быть представлен с помощью вспомогательных программ
Какие основные типы нарушений и ограничений нужно учитывать:
◆ визуальные
◆ слуховые
◆ заболевания нервной системы
◆ когнитивные нарушения
◆ двигательная инвалидность
Потеря дееспособности может быть не только врожденной, но и временной. Поэтому потенциальная целевая аудитория, для которой важна A11y — это все пользователи интернета.
В этих карточках мы даём практические рекомендации, с чего начать внедрение A11y в работу.
Использованные материалы и полезности:
Руководство по alt-text от слабовидящего веб-разработчика
Интерфейс доступный каждому: практические рекомендации
How-to: Use the tabindex attribute - The A11Y Project
Accessibility (A11y) why is it so important?🧵
Сайт для проверки контрастности
Плагин для Фигмы для проверки контрастности
#заметка #гость #доступность
👍6🔥3❤1
Привет! Сегодня хотела бы поговорить о моей любимой типографике более детально, тема непростая и для самых внимательных и дотошных дизайнеров, ну а у нас тут других и нет 🙂
Если кто-то не помнит, что такое апертура, лигатура и тд, я оставила ссылку на имидж с анатомией шрифта, так будет проще разобраться.
Если кто-то не помнит, что такое апертура, лигатура и тд, я оставила ссылку на имидж с анатомией шрифта, так будет проще разобраться.
❤5
Forwarded from Явно.Дизайн
Как выбрать «доступный» шрифт?
Неразборчивый шрифт в книге — это не очень страшно, правда? А если на дорожном знаке, инструкции к лекарствам, дисплее самолёта? Применяя инклюзивный подход и ориентируясь на людей с ограниченными возможностями, мы можем создать доступную типографику для всех.
Небольшая пометка: мы сейчас говорим об информационном тексте, а не о спецпроектах с акцидентной типографикой.
Ниже и в карточках приводим семь советов по выбору «доступного» шрифта:
1. Используйте шрифты с большой высотой строчного знака
2. Подбирайте шрифт с более открытой апертурой
3. Шрифты с увеличенным внутрибуквенным просветом — более читаемые
3. Не используйте лигатуры
4. Ищите шрифты с различимыми символами и не зеркальными буквами
5. Обращайте внимание на правильные трекинг и кернинг
6. Ограничивайте использование ALL CAPS в тексте, предназначенном для чтения
Материалы по теме:
Анатомия шрифта
Кириллица, сестра латиницы
Кернинг
Очень серьезно о «доступных» шрифтах
#заметка #гость #шрифты #доступность
Неразборчивый шрифт в книге — это не очень страшно, правда? А если на дорожном знаке, инструкции к лекарствам, дисплее самолёта? Применяя инклюзивный подход и ориентируясь на людей с ограниченными возможностями, мы можем создать доступную типографику для всех.
Небольшая пометка: мы сейчас говорим об информационном тексте, а не о спецпроектах с акцидентной типографикой.
Ниже и в карточках приводим семь советов по выбору «доступного» шрифта:
1. Используйте шрифты с большой высотой строчного знака
2. Подбирайте шрифт с более открытой апертурой
3. Шрифты с увеличенным внутрибуквенным просветом — более читаемые
3. Не используйте лигатуры
4. Ищите шрифты с различимыми символами и не зеркальными буквами
5. Обращайте внимание на правильные трекинг и кернинг
6. Ограничивайте использование ALL CAPS в тексте, предназначенном для чтения
Материалы по теме:
Анатомия шрифта
Кириллица, сестра латиницы
Кернинг
Очень серьезно о «доступных» шрифтах
#заметка #гость #шрифты #доступность
👍7❤4🔥1
Доброе утро! Приглашаем вас сегодня в 19:00 мск на прямой эфир канала @yavnodesign. Ася расскажет, как говорить об инклюзии, а моя тема - это продвижение дизайн-кейсов с пошаговым алгоритмом.
Вчера с Асей и Антоном разговаривали об отклике на тему цифровой доступности. Многие отстраненно и с опаской относятся к инклюзии. Нам прилетел коммент: ну и что ради 3,5 аутистов новые концепции разрабатывать?! И ответ короткий: разрабатывать нужно для всех.
Приходите, будем очень рады поболтать! 🔮
Вчера с Асей и Антоном разговаривали об отклике на тему цифровой доступности. Многие отстраненно и с опаской относятся к инклюзии. Нам прилетел коммент: ну и что ради 3,5 аутистов новые концепции разрабатывать?! И ответ короткий: разрабатывать нужно для всех.
Приходите, будем очень рады поболтать! 🔮
❤🔥3👍2❤1🔥1
Forwarded from Явно.Дизайн
Начинаем через час! Поговорим о доступности, инклюзии, кейсах с данной тематикой и о дальнейших планах команды @enable_design. Задавать вопросы можно в комментариях под этим постом. Запись, конечно же будет!
Приходите на эфир, начнём ровно в 19:00 по мск
#доступность #эфир
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Явно.Дизайн
Как говорить об инклюзии и пиарить кейсы на эту тематику?
В эту пятницу собираемся с командой @enable_design поговорить про их опыт работы над кейсом Duolingo для людей с дислексией и немаловажную часть процесса — продвижение кейса и статей.
Узнаем, как…
В эту пятницу собираемся с командой @enable_design поговорить про их опыт работы над кейсом Duolingo для людей с дислексией и немаловажную часть процесса — продвижение кейса и статей.
Узнаем, как…
❤1
У нас эта неделя очень активная и интересная! Сегодня делимся постом Аси про скринридеры. Тема непростая, обширная, будем еще ее развивать.
❤1
Forwarded from Явно.Дизайн
Что учитывать при проектировании UI для скринридеров?
Скринридеры — это специальные программы для чтения с экрана, которые помогают незрячим пользоваться компьютером и телефоном.
В одном из американских законов о доступности озвучивается принцип: там, где предполагается визуальный отклик системы, продумайте также такой способ взаимодействия, для которого не будет требоваться наличия зрения.
Для слепых и слабовидящих людей доступность — это ключевой фактор: смогут они работать с сайтом или приложением или не смогут.
Как сделать интерфейс более читаемым для скринридера?
◆ Пишите релевантные alt-text для картинок
◆ Помечайте ссылки и кнопки и делайте их информативными: не «Нажмите здесь», а «Узнайте больше о том, кто мы такие»
◆ Используйте tab-index и убедитесь, что элементы попадают в фокус в правильном порядке. Чаще всего это слева направо, сверху вниз, но в зависимости от контекста порядок чтения и группировки элементов может поменяться
◆ Используйте корректные семантические HTML-теги:
◆ Сохраняйте иерархию заголовков: соблюдайте логическую последовательность заголовков от самого крупного h1 к самому мелкому h6
Чтобы протестировать доступность получившегося экрана, попробуйте озвучить его в скринридере. На этапе проектирования это поможет сделать программа VoiceOver Designer (есть версия для iOS и macOS).
Лучше один раз увидеть своими глазами, как это работает, поэтому вот видео об этой программе от её автора — Михаила Рубанова (Mobile Head at Dodo Brands)
#заметка #гость #доступность
Скринридеры — это специальные программы для чтения с экрана, которые помогают незрячим пользоваться компьютером и телефоном.
В одном из американских законов о доступности озвучивается принцип: там, где предполагается визуальный отклик системы, продумайте также такой способ взаимодействия, для которого не будет требоваться наличия зрения.
Для слепых и слабовидящих людей доступность — это ключевой фактор: смогут они работать с сайтом или приложением или не смогут.
Как сделать интерфейс более читаемым для скринридера?
◆ Пишите релевантные alt-text для картинок
◆ Помечайте ссылки и кнопки и делайте их информативными: не «Нажмите здесь», а «Узнайте больше о том, кто мы такие»
◆ Используйте tab-index и убедитесь, что элементы попадают в фокус в правильном порядке. Чаще всего это слева направо, сверху вниз, но в зависимости от контекста порядок чтения и группировки элементов может поменяться
◆ Используйте корректные семантические HTML-теги:
header — для шапки сайта;nav — для навигации;main — для основного контента;aside — для дополнительного контента;section — для разделения страницы на смысловые блоки;footer — для подвала сайта◆ Сохраняйте иерархию заголовков: соблюдайте логическую последовательность заголовков от самого крупного h1 к самому мелкому h6
Чтобы протестировать доступность получившегося экрана, попробуйте озвучить его в скринридере. На этапе проектирования это поможет сделать программа VoiceOver Designer (есть версия для iOS и macOS).
Лучше один раз увидеть своими глазами, как это работает, поэтому вот видео об этой программе от её автора — Михаила Рубанова (Mobile Head at Dodo Brands)
#заметка #гость #доступность
❤7👍2
Forwarded from Не исключение: об инклюзии в цифровом и физическом мире
Недавно была встреча клуба A11y Unity Alumni. Говорили о Мотивации. Решили, что поделимся, т.к. тема касается каждого из нас.
Набросали, какие контраргументы слышим чаще всего.
– нет ресурсов, дорого, долго
– не наша аудитория, продукт b2b, для нашей аудитории не актуально, таких мало
– какой будет эффект, сколько заработаем
– не буду мешать, но и не буду помогать
– сначала сделаем, а потом накрутим доступность
– нет компетенций, надо учиться, некому лидить
Очень важно понимать, с какими вопросами вы столкнётесь. Не стоит расстраиваться или сердиться, когда люди задают вам такие вопросы. Когда вы знаете, что вам их зададут, вести диалог гораздо проще. Кстати, если вы пропустили обязательно послушайте последний выпуск Инклюзивного ананаса, где подробно разбираются ответы на многие контраргументы.
Как мотивируем коллег
– “а ты попробуй”. Действительно, у страха глаза велики, на практике все оказывается проще.
– обогатить резюме. Специалистов со знанием accessibility на рынке сейчас довольно мало, спросите у любого менеджера.
– аудитория шире, чем люди с инвалидностью
– показываем на примерах результаты
– просвещаю, рассказываю, обучаю, демонстрирую
– требую: новые фичи не выпускаем в прод без доступности
– признак зрелости компании и люяльность пользователей
– работаем с потенциальными юридическими рисками
– мое любимое: хвалю и говорю спасибо!
– “Я буду твоим тимлидом”: мы все хотим работать с самыми самыми
И наконец, что движет каждым из нас.
– интересно: каждый раз новый опыт и задачи, узнаю мир, люблю учиться
– не могу не делать
– помогаю себе будущему, был опыт временной disability
– делаю жизнь проще/лучше, помогаю людям
– каждый имеет право на доступность
– не хочу отставать от рынка
– получаю фидбек от пользователей
– люблю учить: “Обожаю удивленные взгляды коллег, когда рассказываю про доступность”
Я верю, что нет людей, которые против инклюзии. Но мир большой и впихнуть в себя все невозможно. Поэтому нужно искать точки, где наша мотивация пересекается с мотивацией наших коллег и компании в целом.
Набросали, какие контраргументы слышим чаще всего.
– нет ресурсов, дорого, долго
– не наша аудитория, продукт b2b, для нашей аудитории не актуально, таких мало
– какой будет эффект, сколько заработаем
– не буду мешать, но и не буду помогать
– сначала сделаем, а потом накрутим доступность
– нет компетенций, надо учиться, некому лидить
Очень важно понимать, с какими вопросами вы столкнётесь. Не стоит расстраиваться или сердиться, когда люди задают вам такие вопросы. Когда вы знаете, что вам их зададут, вести диалог гораздо проще. Кстати, если вы пропустили обязательно послушайте последний выпуск Инклюзивного ананаса, где подробно разбираются ответы на многие контраргументы.
Как мотивируем коллег
– “а ты попробуй”. Действительно, у страха глаза велики, на практике все оказывается проще.
– обогатить резюме. Специалистов со знанием accessibility на рынке сейчас довольно мало, спросите у любого менеджера.
– аудитория шире, чем люди с инвалидностью
– показываем на примерах результаты
– просвещаю, рассказываю, обучаю, демонстрирую
– требую: новые фичи не выпускаем в прод без доступности
– признак зрелости компании и люяльность пользователей
– работаем с потенциальными юридическими рисками
– мое любимое: хвалю и говорю спасибо!
– “Я буду твоим тимлидом”: мы все хотим работать с самыми самыми
И наконец, что движет каждым из нас.
– интересно: каждый раз новый опыт и задачи, узнаю мир, люблю учиться
– не могу не делать
– помогаю себе будущему, был опыт временной disability
– делаю жизнь проще/лучше, помогаю людям
– каждый имеет право на доступность
– не хочу отставать от рынка
– получаю фидбек от пользователей
– люблю учить: “Обожаю удивленные взгляды коллег, когда рассказываю про доступность”
Я верю, что нет людей, которые против инклюзии. Но мир большой и впихнуть в себя все невозможно. Поэтому нужно искать точки, где наша мотивация пересекается с мотивацией наших коллег и компании в целом.
🙏6❤1
Представляете, мы вошли в Short-list премии G8 Creative Awards со своей работой по Duolingo. Я отправляла эту работу без надежды, просто хотела, чтобы было больше кейсов с инклюзивностью, а получилось вот так 🔮
Работы на конкурсе есть просто потрясающие - https://g8.art/ru/works?nomination_stage=winners
Спасибо @G8FESTIVAL Это очень приятно!
Работы на конкурсе есть просто потрясающие - https://g8.art/ru/works?nomination_stage=winners
Спасибо @G8FESTIVAL Это очень приятно!
🔥18😍7❤5👍1
Доступностью могут заниматься только «специальные» люди «специальных» профессий? А вот и нет)
Миша Рубанов поделился кейсом о сотруднице Додо Пиццы — Айгунь. Она сделала форму для заказа оффлайн, которую можно заполнить, если нет возможности сделать заказ голосом.
Подробнее о ходе работы и результате можно узнать из интервью с Айгунь https://vk.com/@dodo_tlt-znakomtes-eto-aigun
Мне нравится, что человек сделал шаг навстречу инклюзивности и реализовал свою инициативу, хотя это не входило в его «обязанности по должности». Это вдохновляет перенимать такой подход для любой работы)
en<able> - о дизайне
#Ася
Миша Рубанов поделился кейсом о сотруднице Додо Пиццы — Айгунь. Она сделала форму для заказа оффлайн, которую можно заполнить, если нет возможности сделать заказ голосом.
Подробнее о ходе работы и результате можно узнать из интервью с Айгунь https://vk.com/@dodo_tlt-znakomtes-eto-aigun
Мне нравится, что человек сделал шаг навстречу инклюзивности и реализовал свою инициативу, хотя это не входило в его «обязанности по должности». Это вдохновляет перенимать такой подход для любой работы)
en<able> - о дизайне
#Ася
❤20👏1
WordPress Accessibility Day 2023
с 27 по 28 сентября будет проходить 24-часовое мероприятие с интересными докладами по цифровой доступности для дизайнеров и разработчиков.
Я хочу послушать такие темы:
✦ Accessibility Beyond Blindness
✦ Complex Data Visualizations and the Accessibility Phenomena
✦ Immersive Audio Description
✦ Alt Text in the Age of Automation: How's it Actually Going?
Регистрация по ссылке https://2023.wpaccessibility.day/schedule/
en<able> - о дизайне
с 27 по 28 сентября будет проходить 24-часовое мероприятие с интересными докладами по цифровой доступности для дизайнеров и разработчиков.
Я хочу послушать такие темы:
✦ Accessibility Beyond Blindness
✦ Complex Data Visualizations and the Accessibility Phenomena
✦ Immersive Audio Description
✦ Alt Text in the Age of Automation: How's it Actually Going?
Регистрация по ссылке https://2023.wpaccessibility.day/schedule/
en<able> - о дизайне
👍5❤1🔥1
И немного лично-учебного ) У нас уже прошло 2 занятия на курсе цифровой доступности у Валерии Курмак и ее команды. Мне очень нравится ) Записала все темы, которые хочу изучить глубже и они превратятся в посты для канала, а пока выбираю сайт для практики.
Я обожаю искусство и остановилась на Третьяковской галерее https://www.tretyakovgallery.ru. Сейчас все перерисую ручками в фигме, пройдусь плагином контрастности, скринридером и тд. Интересный факт, что у Третьяковки нет версии для слабовидящих, хотя это требование законодательства. И сегодня как раз говорили о том, что чаще всего эта версия не помогает, а иногда и усложняет. Это тоже тема для отдельного поста ))
На лекции был слабовидящий Дима и Денис с травмой позвоночника. Ребята рассказывали о том, как они взаимодействуют с интерфейсами, на что обращать внимание. Хочу поделиться с вами ссылкой на вебинар с Димой и Лерой "Цифровая доступность: пять ключевых проблем в интерфейсах" https://www.youtube.com/watch?v=SU_7czaXMXw
Вот так проходит учебный выходной и я рада, давно не училась ) Мой первый и последний курс по дизайну был в 2019 году, училась у Миши Розова. В основном, я самоучка с background переводчика 🔮 Практика, youtube и не бояться задавать вопросы - это залог успеха ))
en<able> - о дизайне
#Анжелика #учеба
Я обожаю искусство и остановилась на Третьяковской галерее https://www.tretyakovgallery.ru. Сейчас все перерисую ручками в фигме, пройдусь плагином контрастности, скринридером и тд. Интересный факт, что у Третьяковки нет версии для слабовидящих, хотя это требование законодательства. И сегодня как раз говорили о том, что чаще всего эта версия не помогает, а иногда и усложняет. Это тоже тема для отдельного поста ))
На лекции был слабовидящий Дима и Денис с травмой позвоночника. Ребята рассказывали о том, как они взаимодействуют с интерфейсами, на что обращать внимание. Хочу поделиться с вами ссылкой на вебинар с Димой и Лерой "Цифровая доступность: пять ключевых проблем в интерфейсах" https://www.youtube.com/watch?v=SU_7czaXMXw
Вот так проходит учебный выходной и я рада, давно не училась ) Мой первый и последний курс по дизайну был в 2019 году, училась у Миши Розова. В основном, я самоучка с background переводчика 🔮 Практика, youtube и не бояться задавать вопросы - это залог успеха ))
en<able> - о дизайне
#Анжелика #учеба
👍10❤4