Ребят, сегодня в рамках конференции, где мы с Асей выступали, будет презентовать свой доклад Света, она очень классная, вообще не понимаю, почему она волнуется? )) Это тот человек, который на практике внедряет доступность! Мы бы хотели ее поддержать и сказать, что все пройдет классно! Главное, закрой чат в youtube )))
Света @unlimited_possibilities, мы с тобой ))
Ссылка https://kurmakinfo.timepad.ru/event/2548560/
Начало в 19:00
Света @unlimited_possibilities, мы с тобой ))
Ссылка https://kurmakinfo.timepad.ru/event/2548560/
Начало в 19:00
❤5🥰1🤣1👀1
Ася подготовила пост про то, как дизайнеры могут улучшить цифровую доступность
❤🔥1
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