Advertisement
  1. Web Design
  2. Style Guides

Использование руководств по оформлению для доступности

by
Read Time:5 minsLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Начнем с того, что мы зададим несколько вопросов.

Что такое руководство по стилю?

Руководство по оформлению — это проектный документ, который может использоваться для установления набора стандартов при объединении второстепенных или пользовательских интерфейсов для бизнеса — в основном любого продукта или изделия, созданного для бизнеса.

Кто использует руководство по стилю (оформлению)?

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

Что такое доступность?

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

Зачем использовать руководство по оформлению для доступности?

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

1. Задайте направление

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

2. SEO

SEO это ещё одна причина, по которой дизайнеры должны знать о доступности. Например, размещение текста на изображении означает, что «экранные читатели» не смогут получить к нему доступ, а Google оштрафует ваш сайт за плохо размеченный контент. Есть польза для SEO в том, чтобы сделать ваш веб-сайт доступным.

3. Пользовательский опыт

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

4. Hand Off (режим «без рук»)

Режим «без рук» это прекрасный пример того, когда вы хотели бы использовать руководство по оформлению доступности. Вы можете работать на контрактной основе и надеяться связать вещи со следующим подрядчиком или агентством, которые приходят, чтобы взять то, на чём вы остановились. Дайте следующим работникам некоторое понимание вашего мышления с точки зрения доступности.

Начинаем с основ

Формы

Формы имеют ряд эвристик или эмпирических правил, связанных с доступностью. Очень важно то, как созданы формы. Когда вы последний раз добавляли элемент <legend> для <fieldset>? Такие детали разметки действительно полезны для вспомогательных технологий.

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

Зона касания

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

Цветовой контраст

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

Размер текста

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

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

Изящное вырождение

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

Сделайте это релевантным

Если вы проводите оценку удобства использования, вы можете использовать то, что вы наблюдали; проблемы доступности в вашей системе могут помочь в определении правил доступности в вашем руководстве по оформлению. Например, если вы используете тест для показа критических ошибок, и обнаруживаете, что они происходят из-за проблем с цветовым контрастом, размером зоны касания или любой другой проблемы с доступностью, включите её в руководство по оформлению для доступности. Самые уместные примеры с большей вероятностью позволят вашему документу получить бо́льшую достоверность, на которую «купятся» посредники.

Заключение и выводы

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

  • Подумайте сначала о неотъемлемой части. Включите только уместную информацию в руководство по оформлению для доступности.
  • Не думайте, что всем всё понятно. Вы принимаете, как само собой разумеющееся, знание, которое вы накапливаете на протяжении многих лет. Не бойтесь описывать вещи, которые вы можете принимать так, как должное.
  • Форма придерживается назначения. Если ваше руководство по дизайну пересекается с руководством по оформлению для доступности, возможно, пора вернуться и попытаться исправить оба (смотрите пример сравнения цветов выше).
  • Начните с проблем, которые вы уже определили при эвристических оценках. С какими проблемы с удобством использования вы столкнулись? В частности, часто встречающиеся проблемы и проблемы с высокой степенью серьезности?

Что ещё почитать

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.