6 шагов, чтобы сделать ваш веб-дизайн доступным

Статьи по дизайну

Мы живем в мире, где все больше и больше мы зависим от Интернета. Подумайте об этом: где вы нашли свою последнюю работу? Как вы подали заявку на эту работу? Как вы занимаетесь банковским делом? Где вы делаете покупки? Как вы поддерживаете связь со своими друзьями и близкими?

Иллюстрация женщины-врача, сидящей за столом с тремя экранами над головой, на каждом из которых отображается свое приложение "width =" 1841 "height =" 1304 "/> <figcaption> Мы используем Интернет почти для всего и это не изменится. Дизайн приложения Spoon Lancer. </figcaption></figure> <p> Интернет может быть постоянным ресурсом для большинства людей, но для тех, кто живет с ограниченными возможностями, подключение не всегда Это программы и устройства, которые позволяют людям с ограниченными возможностями получить доступ ко всему вашему веб-сайту, например программы чтения с экрана, но это только часть решения. </p> <p> Другая часть уравнения заключается в разработке веб-сайтов и приложений таким образом, чтобы сделать их доступными для людей с ограниченными возможностями либо с помощью вспомогательных устройств, либо просто с помощью продуманного дизайна. </p> <h2> Почему доступность в веб-дизайне важна <br /> — </h2> <figure data-id= круговая диаграмма с выделением 15 процентов от всей ширины "width =" 2000 "height =" 2000 "/> <figcaption> Это процент людей на Земле, которые живут с какой-либо инвалидностью. Via Wikimedia Commons . </figcaption></figure> <p> Согласно данным за 2012 год, почти каждый пятый американец живет с инвалидностью какого-либо типа. Во всем мире примерно один миллиард человек, или 15 процентов населения мира, живет с инвалидностью. </p> <p> Не все виды инвалидности не позволяют людям читать с экрана и пользоваться Интернетом. Например, эти цифры включают людей, которые полагаются на ходунки и инвалидные коляски. Но другие условия, такие как ухудшение зрения, трудности с захватом предметов, аутизм и глухота, и это лишь некоторые из них, могут серьезно ограничить способность человека пользоваться компьютером или смартфоном без приспособлений. </p> <h2> Доступность в веб-дизайне: в некоторых местах это предложение, в других — закон <br /> — </h2> <p> Если вы находитесь в Соединенных Штатах, вы, вероятно, знакомы со стандартами веб-соответствия, которые являются частью Закона об американцах-инвалидах (ADA). Во многих других странах по всему миру действуют аналогичные руководящие принципы, такие как Закон о дискриминации в отношении инвалидов в Австралии, Закон о доступности Бразилии и План действий Европейского союза в отношении Европы. </p> <div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'> <!-- Yandex.RTB R-A-268541-2 --> <div id=

Многие из руководящих принципов, включенных в эти законы и инициативы, взяты из глобальных Руководящих принципов доступности веб-контента (WCAG), набора руководящих принципов, созданных и поддерживаемых Консорциумом всемирной паутины (W3C) посредством его Инициативы обеспечения доступности веб-сайтов (WAI). Достаточно сокращений для тебя?

Тим Бернерс-Ли взволнованно смотрит на экран компьютера "width =" 1023 "height =" 1291 "/> <figcaption> Человек, стоящий за глобальной инициативой сделать сеть доступной для всех. Via Wikimedia Commons. </figcaption></figure> <p> W3C был основан в 1994 году Тимом Бернерсом-Ли, да, <em>который </em> Тимом Бернерсом-Ли, с целью создания руководящих принципов и протоколов, способствующих долгосрочной, устойчивой рост Всемирной паутины. Сегодня в нее входят более 400 организаций, многие из которых участвуют в WAI. Самая последняя версия руководств, которую она опубликовала, — WCAG 2.1, вышедшая в 2018 году. </p> <p> WCAG 2.1 включает в себя все последние руководящие принципы и передовые практики, которым должны следовать веб-дизайнеры, чтобы их сайты были доступны для всех пользователей. Это длинный, плотный документ, состоящий из множества технических терминов. Вместо того, чтобы погрузиться в течение следующих двух месяцев, чтобы прочитать все это, создайте свой веб-сайт с учетом следующих принципов доступности. Затем попросите разработчика проверить ваш код, чтобы привести ваш дизайн, ориентированный на доступность, к полному соответствию. </p> <h2> Дайте вашим изображениям альтернативные теги <br /> — </h2> <p> Alt-теги — это краткие описания изображений, которые вы используете, которые скрыты в html сайта. Большинство пользователей никогда не видят эти описания, но посетители сайта, использующие программы чтения с экрана, полагаются на них, чтобы узнать, что находится на изображениях на вашем сайте. Хороший тег alt — это короткое, креативное описание, которое точно описывает изображение, к которому он прикреплен. </p> <figure data-id= реалистичная иллюстрация рыбных и хлебных хлебов в корзине "width =" 1535 "height =" 1316 "/> <figcaption> Мы будем использовать это изображение, чтобы проиллюстрировать, что является хорошим, а что нет. tag. Иллюстрация BATHI. </figcaption></figure> <p> Посмотрите на изображение слева. Вот пример хорошего альтернативного тега для этого изображения: r <em> эалистическая иллюстрация рыбы и хлебных буханок в корзина. </em> </p> <p> А вот альтернативный тег, который не так хорош: <em> хлеб и рыба </em> </p> <p> Видите разницу? </p> <p> Alt-теги предназначены не только для пользователей с нарушениями зрения; они тоже для вашей выгоды. Хорошо продуманные alt-теги улучшают SEO вашего сайта, что означает увеличение релевантного трафика сайта и, в конечном итоге, больше конверсий. </p> <h2> Сохраняйте предсказуемость навигации <br /> — </h2> <figure data-id= Коллекция иконок для мобильного приложения "width =" 2026 "height =" 1169 "/> <figcaption> Значки, которые вы используете, и способ их использования имеют значение. Дизайн иконок @alexanderk. </figcaption></figure> <p> Навигационная система, которую использует ваш веб-сайт, должна быть согласованной по всем его страницам, включая используемые вами значки и то, как посетители попадают на разные страницы сайта. Например, если ваша домашняя страница имеет верхнюю панель заголовка с выпадающие меню, каждая из ваших других страниц должна иметь такую ​​же компоновку. </p> <p> Точно так же значки, которые вы используете на своем сайте, должны быть согласованными. У вас нет телефонной трубки для значка «свяжитесь с нами» на домашней странице, а также значок смартфона на странице «О нас». Это сбивает с толку и может затруднить доступ к вашему сайту для программ доступности. Вам также следует избегать любых видов автоматической навигации и автоматического воспроизведения музыки и видео. </p> <p> Почему? Поскольку они не только раздражают, но и пользователю с программой чтения с экрана трудно определить, как их приостановить. А когда слайд-шоу или карусель прокручивают контент с высокой скоростью, пользователи могут запутаться и расстроиться. </p> <h2> Избегайте содержимого, которое может вызвать физические реакции <br /> — </h2> <figure data-id= Мультяшный шмель в защитном снаряжении с надписью «Саймон говорит: безопасность всегда на первом месте» "width =" 2000 "height =" 2000 "/> <figcaption> Всегда делайте свой сайт безопасным для любого пользователя, который может Посетите его. Дизайн персонажей Хосе Рекены. </figcaption></figure> <p> Вспомните эпизод с покемонами, который привел к тому, что около 700 детей были доставлены в больницу, потому что это вызвало приступы у них? Приходите с фоточувствительными предупреждениями об изъятиях. Некоторые люди подвержены судорогам при воздействии быстро мигающих огней и движущихся моделей. Избегайте подобных видов анимации на своем веб-сайте, чтобы обеспечить их безопасность для каждого пользователя. </p> <h2> Сделайте свой текст большим, жирным и организованным <br /> — </h2> <figure data-id= Текст с засечками и без засечек "width =" 768 "height =" 512 "/> <figcaption> Шрифты без засечек проще для чтения и, следовательно, доступны для выбора. Через Design Hack. </figcaption></figure> <p> Сделайте ваш веб-сайт доступным для людей с ограниченным зрением, сделав текст большим. В основном, сделайте его эквивалентом большой печатной книги. 16px — это, как правило, хороший размер для основного текста с большими заголовками. </p> <p> Сделать текст более читабельным, чем сделать его большим, — это больше. Используйте шрифт, который читается и легко читается пользователями с дислексией. Министерство здравоохранения и социальных служб США рекомендует использовать шрифты Times New Roman, Arial, Helvetica, Tahoma, Calibri и Verdana в качестве доступных шрифтов. Вы можете рисковать, выбрав один из них, или найти другой шрифт, который подойдет всем посетителям вашего сайта. Самые простые для чтения шрифты — это шрифты, которые: </p> <ul> <li> Не имеют засечек </li> <li> имеют фиксированную ширину между буквами </li> <li> Используйте жирные буквы </li> </ul> <figure data-id= кофейная чашка с пальмой, выходящей из нее с надписью «Belt Road. Выросли здесь Здесь нет информации »" width = "2000" height = "2000" /> <figcaption> Выбор высококонтрастной палитры может показаться простым выбором, но он имеет огромное значение для многих пользователей. Разработка логотипа Frisheid. </figcaption></figure> <p> Ваш текст также должен быть организован понятным, логичным способом. Разбейте текст на более мелкие разделы, разделенные на заголовки и подзаголовки. Это не только делает ваш текст более аккуратным, но и облегчает его для программ чтения с экрана, чтобы расшифровать для своих пользователей. </p> <p> Наконец, ваш текст должен иметь высокую контрастность на фоне. Текст, который слишком похож по цвету на фон, трудно читать многим пользователям компьютера, особенно тем, кто страдает дальтонизмом. Воспользуйтесь онлайн-инструментом, таким как Contrast Checker, чтобы увидеть, как ваши запланированные цвета шрифта и фона работают вместе. </p> <h2> Сделайте так, чтобы он работал только с клавиатурой (и без нее) <br /> — </h2> <figure data-id= человек, использующий систему прямого доступа движением головы, чтобы играть в игру на ноутбуке "width =" 2100 "height =" 1749 "/> <figcaption> А для тех, кто не может использовать клавиатуру, есть другие способы навигации в Интернете. С помощью Instructables. </figcaption></figure> <p> Некоторые пользователи не могут удерживать мышь или держать руку на сенсорной панели ноутбука. Эти пользователи полагаются на свои клавиатуры для навигации по веб-сайтам, поэтому вы можете использовать их в своих целях. для них, создав его таким образом, чтобы сделать его полностью функциональным с помощью только клавиатуры. </p> <p> Есть также пользователи, которые не могут использовать клавиатуру и полагаться на другие средства навигации по веб-сайтам, такие как программы распознавания речи и наведение головы. Ваш веб-сайт также должен быть совместим с такими программами, потому что без них люди без использования их рук не смогут использовать ваш сайт. </p> <h2> Проверьте свой код (или сделайте это сами) <br /> — </h2> <p> Не публикуйте свой веб-сайт в мире, пока весь код не будет проверен компетентным разработчиком, знакомым с последними рекомендациями по обеспечению доступности веб-сайтов. Кроме того, вы можете использовать инструмент аудита, такой как инструмент Google Chrome WAVE, который найдет места в вашем коде, где вам не хватает ключевых функций доступности. Никогда не повредит, чтобы разработчик-человек проверял ваш код после того, как вы запустили его с помощью такого инструмента, как WAVE, чтобы убедиться, что ничего не пропущено или не вырвано из контекста. </p> <h2> <span style= Предоставьте всем возможность использовать ваш сайт
—
Рисование линии большой группы людей разного цвета в силуэте "width =" 1920 "height =" 1161 "/> <figcaption> Когда ваш сайт доступен, каждый может использовать его одинаково. Через Arts People. </figcaption></figure> <p> Помните, почему вы делаете такой выбор дизайна: устраняйте любые барьеры, которые могут помешать людям использовать ваш сайт. Конечно, вы также хотите соблюдать закон и избегать создания ситуации, когда Вы несете ответственность за ущерб, нанесенный дискриминацией пользователя, но всегда помните причину, по которой следует соблюдать руководящие принципы: если ваш сайт разработан с учетом всех потребностей пользователей, никто не останется в стороне. </p> <div class=

Хотите узнать больше о веб-дизайне?
Ознакомьтесь с нашим полным руководством по созданию веб-сайта!