Явно.Дизайн
5.08K subscribers
940 photos
57 videos
586 links
Сообщество дизайнеров с терапевтическим эффектом. Помогаем дизайнерам не потерять себя.

Рекламы нет! Коллабы да @antonyagupov
Download Telegram
Гостевая неделя: enable_design

Привет! На этой неделе у нас в гостях Анжелика и Ася — дизайнеры интерфейсов из команды enable_design. Мы уже рассказывали об их учебном проекте про решение проблем людей с дислексией в приложении Duolingo. С тех пор команда на достигнутом не останавливалась и перевела на английский статью, кейс и даже отправила материалы в штаб-квартиру Duolingo. Кроме того, ребята сфокусированно пишут заметки про доступность и инклюзивность на своём канале, а недавно выступили на конференции Валерии Курмак, где рассказали про свои фейлы. Короче говоря, сомневаться в самоотверженности и самоотдаче девчат вообще не приходится)

Команда подготовила для вас серию заметок про a11y и будет рада отвечать на вопросы в комментариях. А если всё пройдёт гладко и посты будут набирать лайки, в конце недели мы вместе соберёмся на эфир и пообщаемся голосом о том, как правильно говорить об инклюзии и пиарить такие проекты.

#приветствие #гость #доступность
🔥10👍21
Доступность важна каждому

Мы сталкиваемся с ограничениями везде: при ярком солнце не виден дисплей, с ребенком на руках не перелистнуть страницу, в шумном месте не слышно аудиосообщение. Но если для нас это просто неудобство, то, например, человек с инвалидностью не может воспользоваться приложением и вызвать скорую. Так вот цифровая доступность позволяет адаптировать интерфейс для разных ситуаций и людей, в том числе с разными особенностями здоровья.

Хороший интерфейс — понятный, быстрый и доступный. И начинается он именно с нас, дизайнеров: с ежедневной практики и обучения. Улучшаем понемногу и постепенно, не теряя мотивацию и делая то, что в ваших силах.

Где-то увидела статистику, что сейчас 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?🧵

Сайт для проверки контрастности

Плагин для Фигмы для проверки контрастности

#заметка #гость #доступность
🔥13👍2
Как выбрать «доступный» шрифт?

Неразборчивый шрифт в книге — это не очень страшно, правда? А если на дорожном знаке, инструкции к лекарствам, дисплее самолёта? Применяя инклюзивный подход и ориентируясь на людей с ограниченными возможностями, мы можем создать доступную типографику для всех.

Небольшая пометка: мы сейчас говорим об информационном тексте, а не о спецпроектах с акцидентной типографикой.

Ниже и в карточках приводим семь советов по выбору «доступного» шрифта:

1. Используйте шрифты с большой высотой строчного знака

2. Подбирайте шрифт с более открытой апертурой

3. Шрифты с увеличенным внутрибуквенным просветом — более читаемые

3. Не используйте лигатуры

4. Ищите шрифты с различимыми символами и не зеркальными буквами

5. Обращайте внимание на правильные трекинг и кернинг

6. Ограничивайте использование ALL CAPS в тексте, предназначенном для чтения

Материалы по теме:

Анатомия шрифта

Кириллица, сестра латиницы

Кернинг

Очень серьезно о «доступных» шрифтах

#заметка #гость #шрифты #доступность
🔥12👍3👌1
Что учитывать при проектировании UI для скринридеров?

Скринридеры — это специальные программы для чтения с экрана, которые помогают незрячим пользоваться компьютером и телефоном.

В одном из американских законов о доступности озвучивается принцип: там, где предполагается визуальный отклик системы, продумайте также такой способ взаимодействия, для которого не будет требоваться наличия зрения.

Для слепых и слабовидящих людей доступность — это ключевой фактор: смогут они работать с сайтом или приложением или не смогут.

Как сделать интерфейс более читаемым для скринридера?

◆ Пишите релевантные 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 по МСК. Да, эфир проводим опять для самых неравнодушных) Но обязательно выложим запись 😊

#эфир #гость #анонс
10👍1
Live stream scheduled for
Live stream started