Что такое доступный дизайн. Часть вторая

10 April

Это цикл статей про доступный дизайн от веб-студии ADCI Solutions. Напомним, что в первой части мы разбирались с основными понятиями о доступном дизайне. Теперь посмотрим, как на фоне друг друга выглядят доступный и недоступный дизайн.

Доступный или нет? Ситуации и примеры

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

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

Основные группы физических недостатков и их тяжесть
Основные группы физических недостатков и их тяжесть

Давайте разберём два примера удачного применения стандартов доступности и их отсутствия. В галерее ниже — два скриншота страниц сайта: до и после применений правил Accessibility.

Скриншот страницы сайта, выполненной до применения правил Accessibility
Скриншот страницы сайта, выполненной до применения правил Accessibility
Скриншот страницы сайта, выполненной после применения правил Accessibility
Скриншот страницы сайта, выполненной до применения правил Accessibility

Обратите внимание на второй скриншот. В левом вертикальном блоке раздел, на странице с которым сейчас находится пользователь, выделен белым цветом, у каждой группы с вопросами свой лейбл (Favorite Park, Greenest City и т. д.), а подсказки сформулированы более конкретно («Выберите город из списка»).

И ещё один пример.

Страница с продажей билетов до и после применения стандартов a11y
Страница с продажей билетов до и после применения стандартов a11y
Страница с продажей билетов до и после применения стандартов a11y

На странице с доступным дизайном выше контрастность текста, больше отступ между строками, сокращения расшифрованы полностью, поля в таблице Concert Dates перегруппированы и озаглавлены, а номер телефона для покупки билетов набран стандартным шрифтом.

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

Возникли вопросы о том, как ADCI Solutions соблюдает принципы доступного дизайна при разработке сайтов? Пишите на почту: hello@adcillc.com.

Подписывайтесь на наш блог в Яндекс Дзене и следите за нами на Medium, ВКонтакте и инстаграме.