Доступность веб-сайтов: охватить больше людей в Интернете

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

Препятствия в Интернете: недостаточная осведомленность операторов сайтов

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

Например, веб-сайты, использующие капчи для проверки, трудно расшифровать людям с ослабленным зрением, поскольку знаки и изображения специально не очень четкие, чтобы отличать людей от роботов. Операторы сайтов начали получать жалобы, причем многие из них раньше даже не слышали о веб-доступности. Одна из главных идей Тима Бернерса-Ли (основателя Консорциума Всемирной паутины (W3)) заключалась в том, что веб-сайты должны быть удобны для использования как можно большим числом посетителей. Первый опубликованный веб-сайт был относительно простым и содержал цели проекта W3 следующим образом:

Цитата

«Всемирная паутина (W3) — это инициатива по поиску информации с помощью гипермедиа в широкой области, направленная на предоставление всеобщего доступа к большому количеству документов». — Тим Бернерс-Ли, проект W3

Это был 1991 год. Всего три года спустя Тим Бернерс-Ли стал одним из основателей Консорциума Всемирной паутины, который с тех пор работает над определением единых стандартов для Сети. С этой целью были разработаны Руководящие принципы доступности веб-контента.

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

Причины, по которым компании должны создавать доступные веб-сайты

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

Это лишь некоторые из преимуществ цифровой интеграции. Подробнее о положительных аспектах доступности в интернете можно узнать из статьи «Разработка бизнес-кейса веб-доступности для вашей организации» (Shawn Lawton Henry and Andrew Arch, eds. Copyright © 2012 W3C® (MIT, ERCIM, Keio). Если вы хотите узнать больше об общих стандартах доступности в Интернете, прочитайте нашу статью WCAG — Руководство по легкодоступному веб-контенту.

Веб-доступность: вот где существуют ограничения

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

Восприятие

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

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

Понимание

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

Взаимодействие и навигация

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

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

Вклад

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

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

Доступный веб-дизайн: как устранить препятствия

Если вы устраните любые препятствия, это улучшит удобство использования вашего сайта, а также повысит его рейтинг в Google. Таким образом, доступный веб-дизайн экономически выгоден и не требует больших дополнительных усилий. W3C рекомендует несколько инструментов тестирования для проверки доступности вашего сайта. Однако оценки по тестам W3C выставляются только опытными тестировщиками, которые тщательно проверяют сайт. Они тщательно изучают весь сайт и присваивают различные уровни доступности: от A («низкая доступность») до AAA («высокая доступность»).

Хорошая информационная архитектура как основа доступности и SEO

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

  • Четкое именование URL-адресов и контента: Направленность и основная тема сайта должны быть легко узнаваемы на каждой подстранице.
  • Понятная структура: Пользователи всегда должны знать, где они находятся на сайте.
  • Плоская иерархия: Для того чтобы добраться до контента, требуется всего несколько кликов.
  • Разделение макета и контента: Используйте CSS для дизайна.
  • Удобные для пользователя категории: Подстраницы имеют интуитивно понятную семантическую связь с родительской страницей.
  • Веб-совместимое представление всего содержимого.
  • Удобный для пользователя язык: Формулировки просты для понимания или объясняются более подробно.
  • Важные области сайта, такие как контакты, оттиск, поле поиска или домашняя страница, должны быть доступны одним щелчком мыши.
  • Элементы навигации хорошо видны и структурированы одинаково на каждой странице.
  • Крупные сайты должны содержать карту сайта и раздел часто задаваемых вопросов.
  • Масштабируемые шрифты, цвета и адаптивный макет облегчают восприятие контента на разных устройствах и в разных браузерах. В идеале они совместимы со вспомогательными технологиями.
  • Сайтом можно управлять с помощью мыши и клавиатуры.
  • Альтернативные тексты для изображений: Они необходимы, поскольку программы для чтения с экрана и поисковые боты могут обрабатывать только текстовый контент.

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

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

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

Многоканальная информация: для полной доступности веб-сайта

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

Транскрипты и субтитры

Более трудоемким процессом является создание транскриптов и субтитров. С их помощью можно расшифровать аудиоконтент для слабослышащих людей. Транскрипт, который преобразует устную речь, а также звуки и шумы в текст, должен быть размещен как можно ближе к соответствующему аудиоконтенту, например, с помощью кнопки со ссылкой на документ. Субтитры значительно облегчают глухим людям понимание видеоконтента. Пользователи, которые не хотят использовать функцию звука (например, потому что они находятся в тихой обстановке), также могут извлечь пользу из видео с субтитрами. Люди с когнитивными нарушениями или поведенческими расстройствами, такими как СДВГ, также с большей вероятностью воспримут информацию, передаваемую видео, если они смогут устранить фоновый шум.

Звуковое объяснение

Люди с остротой зрения менее 30% считаются слабовидящими, а если она составляет всего 2%, то по закону они считаются слепыми. Они воспринимают визуальные стимулы в ограниченном объеме или не воспринимают вообще. Чтобы помочь людям понять видеоконтент, следует добавить дополнительную звуковую дорожку. С помощью этих дорожек вы даете пояснения к визуальным компонентам, таким как местоположение, пейзаж и люди, а также кратко описываете видимые действия. Размещайте эти пояснения во время пауз в оригинальной аудиозаписи, чтобы звуковые дорожки не перекрывали друг друга.

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

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

Простой язык

Легкий язык объясняет содержание в простой форме. Он помогает людям с когнитивными нарушениями лучше понять более сложные вопросы, например, он избегает сослагательного наклонения, синонимов и отрицаний. Предложения в легком языке короткие и содержат только одно утверждение.

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

Вспомогательные технологии: сделайте свой сайт совместимым

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

Используйте фреймы экономно

Фреймы — популярный инструмент для дизайнеров сайтов. Однако отсутствие содержимого в документах, лежащих в основе фреймсетов, создает проблему: краулеры считывают «пустую» начальную страницу и помещают сайт ниже в рейтинге поисковых систем. Самые первые программы для чтения с экрана не могли распознать фреймы. Они были совместимы только с текстовыми браузерами, которые указывали на фрейм. Однако новые версии программ для чтения экрана могут использоваться практически со всеми браузерами.

Пропуск навигационных ссылок и других ярлыков

Устройства чтения с экрана передают текстовую информацию на программы речевого вывода и дисплеи Брайля. Для этого вы читаете страницу сверху вниз — это также включает повторяющиеся элементы, такие как навигационная панель, иконки или ссылки на подстраницы. Чтобы читатель не повторял эту информацию без необходимости при каждом открытии страницы, следует использовать ссылки на пропуск навигации (также известные как «ссылки на пропуск»). Пользователи, осуществляющие навигацию только с помощью клавиатуры, возможно, с помощью рупора, испытывают большие трудности, когда им приходится переходить по нескольким элементам. Ваш сайт только выиграет от наличия ссылки пропуска в верхней части страницы, которая должна быть как можно более заметной.

<body><a href=“#content“>Skip navigation</a>…<main id=“content“><h1>Main heading</h1><p>First paragraph</p>

Существуют ссылки на пропуск, которые невидимы в макете, но программа чтения с экрана посылает пользователю сообщение «альтернативный текст: ‘пропустить навигацию'», если код выглядит следующим образом:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Skip navigation" width="5"></a>

Важно, чтобы ссылки на пропуск были размещены в начале кода, если это возможно. Размещайте якорный текст в начале основного содержания:

<a name="content"></a>

Используйте ссылки на пропуск редко, так как слишком большое количество таких ссылок имеет обратный эффект, поскольку это означает, что пользователям приходится переходить по многим элементам. Более элегантное решение — использовать ориентиры ARIA и правильно структурировать документы. WebAIM рекомендует использовать элементы HTML5. Однако современные браузеры еще не полностью поддерживают этот метод. Дополнительную помощь может оказать оглавление в начале документа, которое направляет пользователей к соответствующим разделам с помощью ссылок. Современные программы чтения с экрана читают соответствующие заголовки. Если вы работаете с осмысленными, хорошо структурированными заголовками, вы повышаете читабельность как для поисковых систем, так и для вспомогательных технологий.

Таблицы данных вместо таблиц макета

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

W3C дает советы по доступному веб-дизайну. Другие советы включают в себя определение таблиц верстки (при необходимости) только с помощью простых элементов: TABLE, TR и TD (Table, Row, Cell). Если вы используете структурирующие элементы для создания связей между ячейками, программа чтения с экрана читает таблицу макета как таблицу данных. Вы делаете это напрямую, удаляя определенные элементы таблицы из дерева доступности. Для доступного веб-сайта используйте код role=»none», как в примере. Это относится к таблице и ее дочерним элементам. Если вы упаковываете таблицы в таблицы, вы должны определить оба элемента.

 

Пример:

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Text example <abbr title="for example">e.g.</abbr> via ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Вот как это отображается в интерфейсе: 

Text example <abbr title="for example">e.g.</abbr> via ARIA.
Сводка

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

Оцените статью
cdelat.ru
Добавить комментарий