В современном привлекательном и конкурентном мире «Web 2.0» и социальных сетях универсальный дизайн часто забывают. Вызывает недоумение, почему, поскольку существует множество социальных, технических, финансовых и юридических причин, которые поддерживают универсальные методы проектирования. Давайте обсудим некоторые из наиболее распространенных сегодня проблем на веб-сайтах и их связь с основными принципами универсального дизайна.
Принципы
Во-первых, давайте рассмотрим семь принципов универсального дизайна, включая некоторые примеры, связанные с Интернетом. Имейте в виду, что эти принципы применяются, конечно, ко многим отраслям, не связанным с компьютерами и сетью, таким как гражданское строительство (здания, пешеходные дорожки), развлечения (кинотеатры, тематические парки) и транспорт (автобусы, поезда).
- Справедливое использование: полезно и продается людям с различными способностями.
Пример: веб-сайт местного правительства разработан таким образом, чтобы он был доступен для тех, кто использует вспомогательные технологии, такие как программа чтения с экрана. - Гибкость в использовании: учитывает широкий спектр индивидуальных предпочтений и возможностей.
Пример: дизайн веб-сайта авиакомпании поддерживает визуальную эстетику в различных размерах компьютера. - Простой и интуитивно понятный: легко понять, независимо от опыта пользователя, знаний, языковых навыков или текущего уровня концентрации.
Пример. Основные элементы управления веб-приложения помечены как текстом, так и символами. - Воспринимаемая информация: эффективно передает необходимую информацию пользователю, независимо от условий окружающей среды или сенсорных способностей пользователя.
Пример: обучающее видео с подписями предоставляет возможность читать диалоги в дополнение к прослушиванию. - Допуск на ошибку: сводит к минимуму опасность и неблагоприятные последствия случайных или непреднамеренных действий.
Пример: техническая ошибка при отправке формы дает четкое объяснение и варианты продолжения. - Низкие физические усилия: могут использоваться эффективно и комфортно, с минимальным утомлением.
Пример: дизайн сайта имеет достаточный цветовой контраст и размер текста, что сводит к минимуму нагрузку на глаза. - Размер и пространство для подхода и использования. Соответствующие размеры и пространство предусмотрены для подхода, досягаемости, манипулирования и использования независимо от размера тела пользователя, его положения или подвижности.
Пример: веб-сайт разработан таким образом, чтобы физически ослабленный пользователь, который не может использовать мышь, мог по-прежнему получать доступ ко всему содержимому с клавиатуры (или экранной клавиатуры!).
Теперь, когда мы знакомы с принципами, давайте рассмотрим несколько вопросов, связанных с веб-дизайном.
Трудно читать
Первой популярной ошибкой в Universal Design является текстовый контент, который из-за его дизайна трудно читать многим. Это относится к Принципам 1, справедливое использование; и 6 — низкое физическое усилие, в частности, напряжение глаз. Обратите внимание, что трудности познавательного чтения — это отдельная проблема, выходящая за рамки данной статьи. Хорошая читаемость делает сайт более удобным и эстетичным. Кстати, проверьте веб-приложение Readability.com для супер легкого чтения.
Так в чем проблемы? Мелкий текст и низкий цветовой контраст — две ключевые проблемы, которые затрудняют чтение типографии в Интернете. В приведенном ниже примере основным текстовым содержимым является серый на черном фоне, который не проходит тесты « Разница в яркости» и « Разница в цвете» . Размер текста установлен в 12 пикселей, что довольно мало для многих пользователей, включая меня. При удалении размера текста из CSS , браузер отображает размер по умолчанию, который немного больше и гораздо более читабелен! Поэтому вместо того, чтобы установить текст по умолчанию 12px или .75em , попробуйте чуть выше, например 16px или .95em .
Еще одна лучшая практика, касающаяся текста, — это использовать относительные размеры в CSS (ems или проценты), а не фиксированные размеры (пиксели или точки), чтобы гарантировать, что пользователь сможет изменять размер текста в браузере по мере необходимости и иметь масштаб макета с текст. Другие хорошие рекомендации, включая предоставление удобных заголовков и достаточный межстрочный интервал.
Трудно определить текстовые ссылки
По умолчанию текст с гиперссылками отображается с подчеркиванием. Это давняя конвенция в веб-браузере. Удаление этого соглашения не только нарушает ожидания пользователей, но может сделать ссылку недоступной для людей с дальтонизмом или слабым зрением. Эта проблема часто усугубляется, когда ссылки обозначаются темным цветом среди черного текста. Подобно вышеприведенному вопросу, это относится к принципам 1 и 6.
Мой окулист говорит мне, что с 40 лет зрение мужчин начинает терять способность различать цвета. И мальчик, она права! Многие веб-сайты имеют темно-синие ссылки без подчеркивания, и я уверен, что должен напрячь глаза, чтобы определить текстовые ссылки. Пример ниже взят из новости. Вы видите текстовую ссылку? Это довольно сложно для меня.
Новостные сайты, похоже, печально известны тем, что используют синие ссылки с удаленными подчеркиваниями даже с выдающегося британского сайта The Telegraph . Чтобы решить, просто удалите барьер, возвращая подчеркивание. Блог Nomensa является хорошим примером. При желании можно использовать жирный текст или другое визуальное обозначение для текстовой ссылки, такой как цветной фон.
Визуальный шум
Разбросанные макеты и перегрузка контента не только визуально непривлекательны, но и не очень удобны в использовании и недоступны. Это напрямую относится к Принципу 3, простому и интуитивно понятному. На веб-странице местного правительства Калифорнии, показанной ниже, есть множество областей навигации, два больших изображения баннеров подразделов и просто неорганизованный, разбросанный вид. В результате основное содержание не начинается до «сгиба» страницы, что явно не идеально. Кроме того, здесь нет ни фокуса, ни визуальной иерархии, в результате чего пользователь с большей вероятностью лихорадочно ищет на странице то, что ему нужно.
Напротив, проверьте австралийское правительство и веб-сайты USA.gov ; гораздо более просторный и организованный, что создает более удобный опыт.
Еще примеры, которые создают «визуальный шум»:
- Навигация. Слишком много разделов навигации на странице (как в примере выше) и слишком много уровней навигации могут сбивать с толку, а также создавать кошмар.
- Избыточные всплывающие подсказки. Атрибуты заголовка в текстовых ссылках, содержание которых совпадает с содержанием самой ссылки, создают всплывающую подсказку, которая не нужна.
- Бессмысленные изображения: используйте изображение только в том случае, если оно имеет ценность; это должно передать значение, важное для текстового содержания.
Нет доступа с клавиатуры
Доступ с клавиатуры , способность перемещаться по экрану и взаимодействовать с фокусируемыми объектами с помощью одной клавиатуры, имеет важное значение. К сожалению, многие сайты не предоставляют этого. Точнее говоря, многие веб-сайты создают барьеры для пользователей клавиатуры, поскольку HTML по своей сути доступен с клавиатуры. Если вы разрабатываете для события мыши, не забудьте предоставить равный доступ для клавиатуры. Это создает независимость от устройства; это хорошая вещь! Этот вопрос относится к Принципам 1, справедливое использование; и 2, гибкость в использовании.
При кодировании веб-сайта необходимо учитывать несколько хороших методов. В CSS , если используется псевдокласс :hover , убедитесь, что также предусмотрено состояние :focus . Кроме того, никогда не следует удалять контур на элементе привязки, то a { outline: 0 } (будьте осторожны: большинство таблиц стилей сброса CSS удаляют контуры привязки — обязательно добавьте их обратно в свой собственный CSS позже!). Если это абсолютно необходимо, то какой-то визуальный эффект должен заменить его.
В JavaScript не используйте обработчик двойного щелчка ( onDblClick ), потому что клавиатура не может выполнить это поведение. Если используются onMouseOver JavaScript onMouseOver и onMouseOut события onFocus и onBlur также должны быть реализованы для обеспечения доступа с клавиатуры.
Отсутствует альтернативный текст для изображений
Если изображение содержит соответствующий контент, оно должно сопровождаться альтернативным текстом. Когда изображение не видно — как в случае с незрячими пользователями, пользователями нижнего диапазона и неработающими ссылками на изображения — тогда к «контенту» изображения все равно необходимо получить доступ. Эта проблема, как и выше, относится к принципам 1 и 2. Наиболее популярный способ предоставления альтернативного текста — это ввод текста в атрибут alt элемента изображения.
Многие изображения, такие как графические диаграммы, комиксы и инфографика в Интернете, не дают «длинного описания» в альтернативном тексте и поэтому блокируют многие пользователи его содержимого. Блог Web Axe исправляет некоторые примеры в серии « Fixing Alt ». Для получения более подробной информации о длинных описаниях см. Мою статью из двух частей: Longdesc & Other Long Image Description Solutions .
Вот несколько рекомендаций для альтернативного текста:
- Если текст встроен в изображение, добавьте его в атрибут alt.
- Если изображение является только декоративным, оно должно содержать пустой атрибут
alt. (например,<img src="decoration.png" alt=""/>). - Для некоторых изображений, таких как диаграммы и рисунки, требуются более длинные описания.
- Если изображение со ссылкой содержит контент, то альтернативный текст должен описывать функцию ссылки, а не само изображение.
Еда на вынос
Семь универсальных принципов дизайна являются отличным ресурсом при разработке веб-сайта, а также других продуктов. Люди по-разному используют компьютер и по-разному пользуются Интернетом. Придерживаясь этого мнения, веб-дизайнер будет более успешным в создании привлекательных, удобных и доступных для всех веб-сайтов.
Дальнейшее чтение
- Универсальный дизайн для веб-приложений (O’Reilly Media). Автор Wendy Chisholm, Matt May.
- Универсальное удобство использования , онлайн книга Сары Хортон.
- Универсальный дизайн обучения , программа DO-IT Университета Вашингтона.
- Принципы универсального дизайна , Колледж дизайна, Государственный университет Северной Каролины.
- Файл универсального дизайна: проектирование для людей всех возрастов и способностей (журнал). Авторы: Молли Стори, Джеймс Мюллер, Рон Мейс.