ASTY.PRO - full service digital agency.

Создание креативных интернет-проектов
и их последующее продвижение в Интернете

10
Январь

Инструменты веб-дизайна для улучшения уровня доступности сайтов

[ Мета-теги ] #веб дизайн

Это продолжение статьи о доступном веб-дизайне.

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

Sketch

Прекрасный Sketch-плагин для выполнения оконного моделирование разных видов дальтонизма – это Stark. С его помощью можно добиться оптимального соотношения контрастности между парой выбранных уровней.

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

Photoshop

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


цветовой профиль фотошоп


Web

  • Tanaguru является инструментом, который осуществляет поиск контрастов. При задании ему сочетания двух цветов, выполняется расчет показателя контрастности и предлагает схожие цвета, которые могут благоприятно повлиять на улучшение уровня доступности.
  • Colorblind Web Page Filter представляет собой программу, которая при осуществлении чтения страницы имитирует различные виды дальтонизма.
  • NoCoffee помогает обнаружить такие недостатки на сайте, как недостаточность резкости, плохой уровень контрастности и неудовлетворительная передача цветовой палитры.


IOS

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

Инструмент Color Oracle

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

Рекомендации веб-дизайнеру для создания доступного сайта

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

будь на шаг впереди

Семантическое HTML для обеспечения лучшего уровня доступности

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

С помощью элементов HTML5 слепой человек может не заниматься чтением всей страницы, а может пропустить те разделы, которые ему не нужны.

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

Использование изображений

Для людей, имеющих проблемы со зрением, картинки должны сопровождать alt-теги, которые объяснят пользователям, что на них изображено. Также для заполнения отсутствующего контента необходимо воспользоваться ярлычками и подписями. При осуществлении ввода данной информации рекомендуется ясное описание того, какую функцию выполняет графический элемент.
 

Использование аудио и видео

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

инструменты для веб дизайна

Заполнение форм

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

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

Обеспечение доступности в платформах Android и IOS

Компанией Apple уже на протяжении длительного времени осуществляется поддержка доступного дизайна. В последние годы они достигли нового уровня, внедрив новую возможность Display Zoom, Dynamic Type и некоторые другие, которые являются фундаментом для формирования доступного пользовательского интерфейса. Его преимуществами может воспользоваться каждый веб-дизайнер.

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

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

Заключение

Подытожив все, сказанное выше можно сделать следующие выводы:

  • Контрастность цветов является надежным инструментом и фундаментом современного дизайна с высоким уровнем доступности.
  • Недопустимо полностью рассчитывать только на цветовую палитру и иконки. С помощью текстовых ярлычков пользователи могут увидеть, на чем им остановить свой выбор.
  • Иконки с использованием заливки более понятны, нежели иконки, которые обведены с помощью тонкой линии. Если без контура никак не обойтись, то нужно использовать более толстые линии.
  • Место для клика должно быть окружено достаточным количеством свободного пространства, дабы пользователю было легче его найти.
  • Удобнее, если иконки обладают легко распознаваемыми силуэтами, поскольку они понятнее круглых иконок с содержащимися в них символами.
  • Выделение текстовых ссылок необходимо выполнять с помощью хорошо просматриваемого идентификатора. Это может быть подчеркивание ссылки.
  • Необходимо использовать кликабельные ярлычки и кнопки, но они не должны быть чересчур большими. Окружите их белым пространством для создания визуального баланса и, чтобы выделить область для нажимания.

Оставьте комментарий

Комментарии (0)

Предложить проект

Категории

Свежие записи