Гостевая неделя: enable_design
Привет! На этой неделе у нас в гостях Анжелика и Ася — дизайнеры интерфейсов из команды enable_design. Мы уже рассказывали об их учебном проекте про решение проблем людей с дислексией в приложении Duolingo. С тех пор команда на достигнутом не останавливалась и перевела на английский статью, кейс и даже отправила материалы в штаб-квартиру Duolingo. Кроме того, ребята сфокусированно пишут заметки про доступность и инклюзивность на своём канале, а недавно выступили на конференции Валерии Курмак, где рассказали про свои фейлы. Короче говоря, сомневаться в самоотверженности и самоотдаче девчат вообще не приходится)
Команда подготовила для вас серию заметок про a11y и будет рада отвечать на вопросы в комментариях. А если всё пройдёт гладко и посты будут набирать лайки, в конце недели мы вместе соберёмся на эфир и пообщаемся голосом о том, как правильно говорить об инклюзии и пиарить такие проекты.
#приветствие #гость #доступность
Привет! На этой неделе у нас в гостях Анжелика и Ася — дизайнеры интерфейсов из команды enable_design. Мы уже рассказывали об их учебном проекте про решение проблем людей с дислексией в приложении Duolingo. С тех пор команда на достигнутом не останавливалась и перевела на английский статью, кейс и даже отправила материалы в штаб-квартиру Duolingo. Кроме того, ребята сфокусированно пишут заметки про доступность и инклюзивность на своём канале, а недавно выступили на конференции Валерии Курмак, где рассказали про свои фейлы. Короче говоря, сомневаться в самоотверженности и самоотдаче девчат вообще не приходится)
Команда подготовила для вас серию заметок про a11y и будет рада отвечать на вопросы в комментариях. А если всё пройдёт гладко и посты будут набирать лайки, в конце недели мы вместе соберёмся на эфир и пообщаемся голосом о том, как правильно говорить об инклюзии и пиарить такие проекты.
#приветствие #гость #доступность
🔥10👍2❤1
Доступность важна каждому
Мы сталкиваемся с ограничениями везде: при ярком солнце не виден дисплей, с ребенком на руках не перелистнуть страницу, в шумном месте не слышно аудиосообщение. Но если для нас это просто неудобство, то, например, человек с инвалидностью не может воспользоваться приложением и вызвать скорую. Так вот цифровая доступность позволяет адаптировать интерфейс для разных ситуаций и людей, в том числе с разными особенностями здоровья.
Хороший интерфейс — понятный, быстрый и доступный. И начинается он именно с нас, дизайнеров: с ежедневной практики и обучения. Улучшаем понемногу и постепенно, не теряя мотивацию и делая то, что в ваших силах.
Где-то увидела статистику, что сейчас 98% веб-сайтов полностью недоступны. Так что у нас ещё много работы)
Всем привет, мы начинаем нашу гостевую неделю с такой вот глобальной мысли. Будем рады ответить на вопросы. Кстати, а поделитесь в комментариях: у кого какой был опыт внедрения a11y фичей в проекты? С какими сложностями столкнулись?
#заметка #гость #доступность
Мы сталкиваемся с ограничениями везде: при ярком солнце не виден дисплей, с ребенком на руках не перелистнуть страницу, в шумном месте не слышно аудиосообщение. Но если для нас это просто неудобство, то, например, человек с инвалидностью не может воспользоваться приложением и вызвать скорую. Так вот цифровая доступность позволяет адаптировать интерфейс для разных ситуаций и людей, в том числе с разными особенностями здоровья.
Хороший интерфейс — понятный, быстрый и доступный. И начинается он именно с нас, дизайнеров: с ежедневной практики и обучения. Улучшаем понемногу и постепенно, не теряя мотивацию и делая то, что в ваших силах.
Где-то увидела статистику, что сейчас 98% веб-сайтов полностью недоступны. Так что у нас ещё много работы)
Всем привет, мы начинаем нашу гостевую неделю с такой вот глобальной мысли. Будем рады ответить на вопросы. Кстати, а поделитесь в комментариях: у кого какой был опыт внедрения a11y фичей в проекты? С какими сложностями столкнулись?
#заметка #гость #доступность
❤9🔥4
База по 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?🧵
Сайт для проверки контрастности
Плагин для Фигмы для проверки контрастности
#заметка #гость #доступность
🔥13👍2
Как выбрать «доступный» шрифт?
Неразборчивый шрифт в книге — это не очень страшно, правда? А если на дорожном знаке, инструкции к лекарствам, дисплее самолёта? Применяя инклюзивный подход и ориентируясь на людей с ограниченными возможностями, мы можем создать доступную типографику для всех.
Небольшая пометка: мы сейчас говорим об информационном тексте, а не о спецпроектах с акцидентной типографикой.
Ниже и в карточках приводим семь советов по выбору «доступного» шрифта:
1. Используйте шрифты с большой высотой строчного знака
2. Подбирайте шрифт с более открытой апертурой
3. Шрифты с увеличенным внутрибуквенным просветом — более читаемые
3. Не используйте лигатуры
4. Ищите шрифты с различимыми символами и не зеркальными буквами
5. Обращайте внимание на правильные трекинг и кернинг
6. Ограничивайте использование ALL CAPS в тексте, предназначенном для чтения
Материалы по теме:
Анатомия шрифта
Кириллица, сестра латиницы
Кернинг
Очень серьезно о «доступных» шрифтах
#заметка #гость #шрифты #доступность
Неразборчивый шрифт в книге — это не очень страшно, правда? А если на дорожном знаке, инструкции к лекарствам, дисплее самолёта? Применяя инклюзивный подход и ориентируясь на людей с ограниченными возможностями, мы можем создать доступную типографику для всех.
Небольшая пометка: мы сейчас говорим об информационном тексте, а не о спецпроектах с акцидентной типографикой.
Ниже и в карточках приводим семь советов по выбору «доступного» шрифта:
1. Используйте шрифты с большой высотой строчного знака
2. Подбирайте шрифт с более открытой апертурой
3. Шрифты с увеличенным внутрибуквенным просветом — более читаемые
3. Не используйте лигатуры
4. Ищите шрифты с различимыми символами и не зеркальными буквами
5. Обращайте внимание на правильные трекинг и кернинг
6. Ограничивайте использование ALL CAPS в тексте, предназначенном для чтения
Материалы по теме:
Анатомия шрифта
Кириллица, сестра латиницы
Кернинг
Очень серьезно о «доступных» шрифтах
#заметка #гость #шрифты #доступность
🔥12👍3👌1
Что учитывать при проектировании 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)
#заметка #гость #доступность
🔥5👍1
Как говорить об инклюзии и пиарить кейсы на эту тематику?
В эту пятницу собираемся с командой @enable_design поговорить про их опыт работы над кейсом Duolingo для людей с дислексией и немаловажную часть процесса — продвижение кейса и статей.
Узнаем, как люди реагируют на эту тему, к кому лучше обращаться за помощью и так далее. Разговор хотим сделать максимально живым и непринуждённым.
Приходите задавать вопросы текстом и голосом, всех ждём!
Пятница, 08.09.2023 19:00 по МСК. Да, эфир проводим опять для самых неравнодушных) Но обязательно выложим запись 😊
#эфир #гость #анонс
В эту пятницу собираемся с командой @enable_design поговорить про их опыт работы над кейсом Duolingo для людей с дислексией и немаловажную часть процесса — продвижение кейса и статей.
Узнаем, как люди реагируют на эту тему, к кому лучше обращаться за помощью и так далее. Разговор хотим сделать максимально живым и непринуждённым.
Приходите задавать вопросы текстом и голосом, всех ждём!
Пятница, 08.09.2023 19:00 по МСК. Да, эфир проводим опять для самых неравнодушных) Но обязательно выложим запись 😊
#эфир #гость #анонс
❤10👍1
Начинаем через час! Поговорим о доступности, инклюзии, кейсах с данной тематикой и о дальнейших планах команды @enable_design. Задавать вопросы можно в комментариях под этим постом. Запись, конечно же будет!
Приходите на эфир, начнём ровно в 19:00 по мск
#доступность #эфир
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Явно.Дизайн
Как говорить об инклюзии и пиарить кейсы на эту тематику?
В эту пятницу собираемся с командой @enable_design поговорить про их опыт работы над кейсом Duolingo для людей с дислексией и немаловажную часть процесса — продвижение кейса и статей.
Узнаем, как…
В эту пятницу собираемся с командой @enable_design поговорить про их опыт работы над кейсом Duolingo для людей с дислексией и немаловажную часть процесса — продвижение кейса и статей.
Узнаем, как…