Доступен ли ваш сайт?

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

Согласно отчету ВОЗ об инвалидности за 2011 год, более 1 миллиарда человек в мире имеют ту или иную форму инвалидности. Это соответствует примерно 15% населения мира. Это число будет только расти по мере старения населения и увеличения риска / доли инвалидности у пожилых людей.

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

Затем в 2019 году был сформирован Европейский закон о доступности. Еще в 1990 году Закон об инвалидах Америки охватывал вопросы, которые сейчас решаются на веб-сайтах. В некоторых ситуациях компании сейчас предстают перед судом и проигрывают, например, в деле Domino's Pizza.

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

Цель

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

Мало того, что сайт станет проще в использовании для всех, но мы потенциально сможем привлечь больше потенциальных клиентов. Фунт Click away заявил: «Отсутствие доступных для потребителей веб-сайтов обошлось британским ритейлерам в 11,75 млрд фунтов стерлингов в 2016 году».

вопросы

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

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

Как видно из его видео и статистики, люди с проблемами доступности встречаются гораздо чаще, чем вы думаете.

Общие проблемы с доступностью

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

На самом деле это не так, и многие из них можно решить очень просто, немного подумав, спланировав и используя эгоистичный метод доступности Адриана Роселли.

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

Примерно 8% (1 из 10) ВСЕХ мужчин в мире страдают дальтонизмом, поэтому давайте выберем цветовую палитру, отвечающую этим требованиям.
Если на веб-сайте клиента используются недоступные цвета, спросите их, счастливы ли они потенциально потерять 8% своих потенциальных клиентов. Я уверен, что они могут переосмыслить цвета, если вы им это расскажете.

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

Размер и выбор шрифта

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

Почти каждый десятый человек, который будет просматривать ваш сайт, будет иметь проблемы с глазами (не считая дальтонизма). В 40 лет только половина света проходит через сетчатку, как это было в 20 лет. Для людей старше 60 это снижается до 20%.

Размер шрифта основного текста браузера по умолчанию обычно составляет 16 пикселей или 1 бэр, это также минимальный рекомендуемый размер шрифта, но давайте посмотрим правде в глаза, он слишком мал! Самый распространенный аргумент здесь - «Люди могут просто увеличить, если хотят, чтобы текст был больше». Проблема заключается в том, что большинство людей, затронутых этой проблемой, вероятно, не знают, как увеличивать масштаб, поэтому мы не должны предполагать, что это вариант для них.

Не существует «наилучшего» размера или шрифта, но я бы порекомендовал размер основного шрифта ближе к 18px или 1,125rem, с прилично разнесенной высотой строки, подходящим шрифтом и минимальным количеством библиотек шрифтов. В Webaim есть хорошая статья о шрифтах, в которой говорится: «Каждый раз, когда вы сталкиваетесь с новым шрифтом, шрифтом или вариацией шрифта, ваш разум должен построить карту или модель символов и шаблонов, чтобы затем быстрее анализировать слова и обрабатывать их значение. Это требует когнитивных усилий и времени. Если шрифт уже знаком, накладные расходы сокращаются ».

У Гилла Эндрюса есть более подробный пост об ошибках типографики, который стоит прочитать, если вы имеете дело с типографикой в ​​большом количестве.

Изображений

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

Если изображение не имеет значения и оно чисто декоративное, например фоновый узор, оставьте теги пустыми. Просто убедитесь, что он действительно пуст в разметке, например: alt = ””, иначе он будет отмечен как отсутствующий тег alt.

Важно помнить, что вы не должны использовать изображения для важного текста (например, заголовков), поскольку они будут нечитаемы для программ чтения с экрана и Google. Будьте осторожны, размещая текст поверх изображений, так как он может стать нечитаемым из-за фона.

Состав

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

Это не только повлияет на то, как ваш контент интерпретируется Google, но и люди, использующие программы чтения с экрана, будут использовать вашу структурную разметку в качестве навигации. У Yoast есть отличная статья о заголовках, которую вам стоит потратить немного времени на чтение. Несколько простых советов - разместить на странице один элемент <h1>, а затем <h2> для следующих важных разделов. Если у вас есть дочерний элемент подраздела, используйте <h3> и так далее:

<h1> Обычно заголовок вашей страницы </h1>

<p> Здесь текст абзаца </p>

<h2> Следующий важный раздел вашей страницы </h2>

<p> Здесь текст абзаца </p>

<h3> Что-то не столь важное, но относящееся к h2 выше </h3>

<p> Здесь текст абзаца </p>

<h2> Следующий важный раздел вашей страницы </h2>

Округлять

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

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