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

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

Стандарты доступности в Интернете обычно определяются W3C Рекомендации по доступности веб-контента, или сокращенно WCAG. Однако соблюдение всех руководящих принципов WCAG – это большая работа, и легко утонуть в море мелких деталей, упуская общую картину.

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

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

Добавляйте подписи к изображениям вашего сайта (легко)

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

Самый простой способ подписать изображения – добавить alt тег к img тег, который предоставляет текстовое описание того, что показано на изображении.

<img src=”https://yoursite.com/deckard.jpg” alt=”Short-haired man in overcoat”>

Если вы предоставляете подписи к изображениям как часть текста, а не только в метаданных изображения, используйте figure а также figcaption блочные элементы. Этим элементам можно придать индивидуальный стиль или изменить их с помощью классов CSS. Кроме того, поскольку figcaption является элементом уровня блока, он может содержать другие элементы или форматирование по мере необходимости.

Еще один тег, который можно добавить к элементам для описания, – это longdesc тег. Вместо текста, описывающего изображение, оно может содержать URI, который предоставляет описание. Однако состояние поддержка браузера для longdesc сейчас неясно, поэтому лучше не полагаться только на него. Использовать longdesc в сочетании с alt или же figure/figcaption.

Используйте теги заголовков для организации документов (легко)

Использование тегов заголовков – обычная практика в веб-дизайне, но в этом контексте ее следует повторить: Используйте h1, h2, h3и т. д., чтобы разделить документы на разделы уровня структуры. Самый простой подход – пометить заголовок страницы как h1 и пометьте все (и все) подзаголовки как h2.

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

Помечайте формы и делайте их удобочитаемыми (легко)

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

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

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

формы доступности веб-сайтов IDG

Вкладка «Проблемы» в окне DevTools последней сборки Microsoft Edge. Проблемы доступности перечислены под собственным заголовком, и их можно просмотреть, чтобы изучить элементы, на которые они ссылаются.

Убедитесь, что навигация по элементам с помощью клавиатуры единообразна и доступна (умеренно)

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

Когда страница в фокусе, Tab Клавиша может использоваться для последовательного перемещения между элементами страницы – свойство, называемое «индексируемый табуляцией. » По умолчанию интерактивные элементы индексируются табуляцией и индексируются табуляцией в том порядке, в котором они расположены в документе.

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

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

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

Если вы хотите добавить привязки клавиш для элементов страницы, помните об этих моментах:

  • Дайте понять пользователю, что это за горячие клавиши и где они работают. Пользователь не должен сам обнаруживать действия горячих клавиш или ошибаться при их выполнении. Так же сфера действия важно. Если горячая клавиша активна только тогда, когда в фокусе находится какой-то конкретный элемент, пользователь должен знать.
  • HTML-код accesskey атрибут позволяет назначать привязки клавиш к определенным элементам. Однако его поведение не поддерживается постоянно, и некоторые привязки клавиш могут быть доступны не всем пользователям. Поэтому это не рекомендуется делать.

Разрешить ручную настройку размера шрифта, а не только масштабирование (умеренно)

Одна из проблем, позволяющих пользователю изменять размер элемента, заключается в том, что он изменяет размер все на странице. Лучшее решение – разместить где-нибудь на странице значки «плюс» и «минус», которые изменяют размер основного текста по запросу, и сохранить эту настройку на клиенте. Для этого потребуется немного больше, чем функция JavaScript, которая изменяет размер базового шрифта для стилей текста в документе.

Не использовать таблицы для разметки (умеренно)

Это не значит, что вы не должны использовать таблицы, точка. Таблицы чрезвычайно полезны, когда вам нужно представить данные в жестком формате строка-столбец. Их просто не следует использовать для макет– то есть для форматирования текста, не являющегося табличными данными. Когда-то было обычной практикой использовать таблицы для позиционирования элементов. Но сегодня flexbox и другие методы стилизации на уровне блоков предоставляют более сложные и эффективные способы точного и гибкого позиционирования элементов.

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

Если вы уже избегаете таблиц для разметки и используете современный фреймворк CSS, отлично! Если нет, найдите время, чтобы переключиться на один и отказаться от использования таблиц. Это потенциально трудоемкое мероприятие, поэтому мы указали его как элемент «умеренного» уровня.

Создайте темный или высококонтрастный режим для своего сайта (умеренный)

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

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

Если вы планируете редизайн, то склоняйтесь к темам, которые можно легко изменить для темных режимов.

Используйте цвета и дизайн, чтобы выделить элементы страницы (умеренно)

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

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

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

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

По возможности используйте описательные URL-адреса (умеренно)

Описательные URL-адреса содержат информацию об их назначении. Непрозрачный URL-адрес, например https://magazino.com/article/2125451 ничего не говорит нам о рассматриваемой статье. Нам нужно будет щелкнуть мышью, чтобы узнать, или, по крайней мере, прочитать метаданные страницы (которые могут быть недоступны). Напротив, описательный URL, например https://magazino.com/article/ten-best-harrison-ford-films/2125451 говорит нам довольно много с первого взгляда.

Описательный URL-адрес сокращает объем работы, которую посетитель должен выполнить, чтобы узнать, что содержится в статье. Вот почему грамотно спроектированный веб-сайт будет выделять некоторую часть URL-адреса для короткого текстового описания содержимого, в то время как идентификатор статьи используется сервером, чтобы определить, какую статью показывать.

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

Используйте инструмент WAVE для проверки доступности веб-сайта (для опытных пользователей)

Инструмент WAVE, разработанный и поддерживаемый Центром для людей с ограниченными возможностями Университета штата Юта, предоставляет подробные и графические отзывы о доступности того или иного веб-сайта. Подайте WAVE URL-адрес или используйте его API, и он предоставит вам отчет, который разбивает все проблемы доступности анализируемой страницы. Проанализированная страница также повторно отображается с разметкой, указывающей, где находятся проблемы, поэтому вы можете быстро получить доступ к каждой проблеме и увидеть ее происхождение в источнике страницы.

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

волна доступности веб-сайтов IDG

Инструмент WAVE сканирует веб-страницу и предоставляет подробную разбивку по основным и незначительным проблемам доступности.

Авторские права © 2021 IDG Communications, Inc.


#улучшений #вебдоступности #которые #вы #можете #сделать #прямо #сейчас

Source link