Доступность и заголовки: проектирование для слабовидящих пользователей

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

Обоснование доступности

Заголовки можно легко упустить из виду при разработке нового веб-сайта или обновлении старого. Маркетологи склонны уделять больше внимания эстетической стороне дизайна и меньше - практической. Верно, что визуальные элементы играют важную роль в пользовательском опыте (UX) веб-сайта, однако, делая его более доступным для пользователей с нарушениями зрения, может увеличить количество посетителей, которые совершают конверсию.

Статистика усиливает наши доводы в пользу доступности:

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

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

Такой простой аспект, как правильное использование заголовков, может иметь огромное значение, и его несложно применить. Это также поможет вам сэкономить на судебном разбирательстве.

Дело домино

Domino's Pizza - хороший пример того, как пренебрежение доступностью для слабовидящих пользователей может дорого обойтись.

Слепой клиент из США подал жалобу в 2016 году после того, как изо всех сил пытался выбрать начинки, использовать код скидки и даже завершить свой заказ в приложении для iPhone в ресторане. Проблема заключалась в том, что приложение не интегрировалось с программным обеспечением телефона для чтения с экрана, которое озвучивает контент на основе правильного использования текста и изображений, помеченных текстом. В приложении и на веб-сайте компании отсутствовал правильный код, позволяющий iPhone считывать параметры.

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

В Великобритании Королевский национальный институт слепых также приветствовал комментарий к постановлению для BCC : «Все организации несут ответственность в соответствии с Законом о равенстве 2010 года за обеспечение того, чтобы их веб-сайты и приложения могли использоваться слепыми и слабовидящими людьми, в том числе кто пользуется программами чтения с экрана ».

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

Рекомендации по обеспечению доступности заголовков

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

Если вы не уверены в том, что такое заголовок, то W3C имеет хорошее определение, а Yoast объясняет его использование для SEO.

W3C определяет правильное использование как:

«Шесть элементов заголовка с H1 по H6 обозначают заголовки разделов. Хотя порядок и появление заголовков не ограничивается HTML DTD, документы не должны пропускать уровни (например, от H1 до H3), поскольку преобразование таких документов в другие представления часто проблематично ».

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

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

Как проверить заголовки?

Если ваши разработчики или тема следуют правильному использованию заголовков, вы сможете просто добавить свой контент и добавить заголовок правильным образом через редактор / CMS.

В качестве побочного примечания вам не нужно добавлять заголовки повсюду, достаточно простого H1 (который обычно является заголовком страницы), за которым следует H2, но, допустим, вы хотите правильно структурировать особенно длинную страницу или проверяете чью-то еще Работа? Попробуйте использовать один из этих плагинов для своего любимого браузера:

• Карта заголовков для Chrome
• Карта заголовков для Firefox

После установки они очень просты в использовании, и любые неправильные заголовки выделяются красным цветом на боковой панели, когда вы нажимаете кнопку плагина. Эта функция также будет опцией по умолчанию в редакторе Гутенберга в версии WordPress 5.0, и ее описание можно найти на этом сайте.

Как правильно использовать заголовки:

Неправильный способ использования заголовков:

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

Надеюсь, этот пост теперь поможет вам правильно структурировать свои веб-страницы для всех.

Если вам нужна помощь в веб-разработке, не стесняйтесь обращаться к нам.