Содержание
Что такое доступность? — Изучение веб-разработки
- Обзор: Accessibility
- Далее
Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.
| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML и CSS. |
|---|---|
| Цель: | Узнать, что такое доступность, и как она влияет на вас как на веб-разработчика. |
Доступность — это практика, позволяющая использовать ваши сайты как можно большему числу людей. Мы традиционно думаем об этом как о доступности для людей с ограниченными возможностями, но на самом деле, в это число входят и другие группы пользователей, которые используют мобильные устройства либо имеют медленное сетевое соединение.
Вы также можете думать о доступности как о способе предоставления равных прав и одинаковых возможностей, независимо от способностей или обстоятельств. Точно так же, как не правильно лишать человека права посещать разнообразные места, только потому что он перемещается в инвалидном кресле (общественные здания в наши дни обычно имеют пандусы для инвалидных колясок или лифты), так и не правильно исключать кого-либо из веб-пространства из-за того, что у них слабое зрение или они используют мобильный телефон. Мы все разные, но все мы люди, и поэтому имеем одинаковые (человеческие) права.
Помимо того, что доступность это просто хороший тон, она также регулируется законодательством в некоторых странах и может поспособствовать открытию важных рынков, которые в противном случае не смогут использовать ваши услуги, покупать ваши продукты и т. д.
Доступность и опыт её применения принесут пользу всем:
- Семантический HTML (который улучшает доступность) также улучшает SEO, делая ваш сайт более доступным для поиска или продажи.
- Забота о доступности демонстрирует хорошую этику и мораль, что улучшает ваш имидж в обществе.
- Другие хорошие практики, улучшающие доступность, также делают сайт более удобным для использования другими группами, такими как пользователи мобильных телефонов, пользователи с низкой скоростью сети и т.д. На самом деле, каждый может извлечь выгоду из многих таких улучшений.
- Мы упоминали, что это также закон в некоторых местах?
Люди с ограниченными возможностями так же разнообразны, как и люди без них, так и своими недостатками. Ключевой урок заключается в том, чтобы думать за пределами вашего собственного компьютера и того, как вы используете Интернет, и начать изучать как его используют другие — вы не ваши пользователи. Ниже разъясняются основные виды инвалидности, а также любые специализированные инструменты, которые используются для доступа к веб-контенту (известные как вспомогательные технологии).
Примечание: в информационном бюллетене Всемирной организации здравоохранения по вопросам Инвалидности и Здоровья говорится, что «Более 1 миллиарда людей, около 15% населения мира, имеют какую-либо форму инвалидности» и «От 110 до 190 миллионов взрослых испытывают значительные трудности в функционировании.
«
Люди с нарушениями зрения
Сюда относятся люди со слепотой, слабым зрением, дальтонизмом и другие. Многие из этих людей используют экранные лупы (либо физические лупы, либо программные возможности масштабирования — большинство браузеров и операционных систем в наши дни имеют возможности масштабирования), а некоторые будут использовать программы чтения с экрана, то есть программное обеспечение, которое читает цифровой текст вслух:
- Некоторые платные коммерческие продукты, такие как JAWS (Windows) и Window Eyes (Windows).
- Некоторые бесплатные продукты, такие как NVDA (для Windows), ChromeVox (браузер Chrome, Windows и Mac ОС Х) и Orca (Linux).
- Некоторые из них встроены в операционную систему, например VoiceOver (Mac OS X и iOS), Экранный диктор(Narrator) (Microsoft Windows), ChromeVox (в Chrome OS) и TalkBack (Android).
Хорошая идея ознакомиться с экранными дикторами; вы можете настроить экранный считыватель и поиграть с ним, чтобы получить представление о том, как это работает.
Более подробную информацию об их использовании см. в руководстве по кросс-браузерному тестированию (en-US). Видео ниже предоставляет краткий пример взаимодействия с экранными читателями.
Что касается статистики: по оценкам Всемирной Организации Здравоохранения: «285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение.» (см. Нарушения зрения и слепота). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединённых Штатов Америки.
Люди с нарушениями слуха
Эта группа людей либо имеет низкий уровень слуха, либо вообще не слышит. Люди с нарушениями слуха используют ATs (см. Вспомогательные устройства для людей с нарушениями слуха, голоса, речи или языка), но на самом деле нет специальных ATs, специфичных для использования на компьютере или в интернете.
Однако существуют специальные техники, которые следует учитывать для предоставления текстовых альтернатив аудиоконтенту, который люди смогут читать, от простых текстовых транскриптов до текстовых дорожек (т.
е. подписей), которые могут отображаться вместе с видео. Об этом будет рассказано в статье позже.
Люди с нарушениями слуха представляют значительную базу пользователей — «360 миллионов человек в мире страдают от инвалидизирующей потери слуха», — говорится в информационном бюллетене Всемирной Организации Здравоохранения о Глухоте и потере слуха.
Люди с ограниченными физическими возможностями
Это группа людей, которые имеют инвалидность в отношении движения, которая может включать в себя чисто физические проблемы (такие как потеря конечности или паралич), или неврологические/генетические расстройства, которые приводят к слабости или потере контроля в конечностях. Некоторые люди могут испытывать трудности с выполнением точных движений рук, необходимых для использования мыши, в то время как другие могут быть более серьёзно затронуты, возможно, значительно парализованы до такой степени, что им нужно использовать указатель головы для взаимодействия с компьютером.
Этот вид инвалидности также может быть результатом старости, а не какой-либо конкретной травмы или состояния, а также может быть результатом аппаратных ограничений — у некоторых пользователей может не быть мыши.
Управление элементами с помощью клавиатуры является обычным требованием, которое влияет на процесс веб-разработки — мы обсудим доступ с клавиатуры в последующих статьях модуля. Хорошая идея, чтобы попробовать пользоваться веб-сайтами, только с помощью клавиатуры, чтобы увидеть, что из этого выйдет и как это работает. Например, можно ли использовать клавишу Tab для перемещения между различными элементами управления веб-формы? Вы можете найти больше деталей об использовании клавиатуры в нашей секции Cross browser testing Using native keyboard accessibility (en-US).
С точки зрения статистики, значительное количество людей имеют нарушения мобильности. Центры США по контролю и профилактике заболеваний Инвалидности и Функционирования (Неинституционализированные взрослые в возрасте 18 лет и старше) сообщают, что в США «Процент взрослых с любым физическим нарушением функционирования: 16,1%».
Люди с когнитивными нарушениями
Вероятно, самый широкий спектр инвалидности можно увидеть в этой категории — когнитивные нарушения в широком смысле могут относиться к инвалидности от психических заболеваний до трудностей в обучении, трудности в понимании и концентрации, такие как СДВГ (синдром дефицита внимания и гиперактивности), людям аутистического спектра, людям с шизофренией, и множество других типов нарушений.
Такие недостатки могут повлиять на многие детали повседневной жизни из-за проблем с памятью, решением, пониманием, вниманием и т. д.
Наиболее распространённые способы, вызванные когнитивными нарушениями, которые могут повлиять на использование веб-сайта — трудности с пониманием того, как выполнить задачу; вспомнить, как сделать что-то, что было ранее выполнено; повышенное разочарование в запутанных рабочих процессах или непоследовательных макетах/навигации/других функциях страницы.
В отличие от других проблем доступности интернета, невозможно назначить быстрые исправления для многих проблем доступности, связанных с когнитивными нарушениями; лучшее решение, которое у вас есть — это проектировать веб-сайты таким образом, чтобы они были логичными, последовательными и удобными для использования настолько, насколько это возможно. Например, убедитесь, что:
- страницы согласованы — навигация, шапка и подвал (хедер и футер), а так же главный контент всегда находятся в одном месте.
- инструменты хорошо разработаны и просты в использовании.
- многоступенчатые процессы разбиты на логические этапы, с регулярными напоминаниями о том, как далеко вы прошли, и сколько осталось до завершения процесса, если это необходимо.
- рабочие процессы логичны, просты и требуют как можно меньше взаимодействий. Например, регистрация и вход на веб-сайт зачастую неоправданно сложны.
- страницы не слишком длинные или плотные с точки зрения количества информации, представленной сразу.
- язык, используемый на ваших страницах, настолько прост и удобен, насколько это возможно, и не полон ненужного жаргона и сленга.
- важные моменты и контент выделены некоторым способом.
- ошибки пользователя чётко выделены, с подсказкой и предлагаемым решением.
Это не «методы доступности» как таковые — это хорошая практика проектирования. Они принесут пользу всем, кто использует ваши сайты, и должны быть стандартной частью вашей работы.
С точки зрения статистики, опять же цифры значительны. Отчёт Корнелльского университета О состоянии инвалидности за 2014 год (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.
Примечание: Страница о когнитивных расстройствах на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.
Распространённый миф о доступности заключается в том, что доступность является дорогостоящим «дополнением» для реализации проекта. Этот миф на самом деле может быть правдой, если:
- Вы пытаетесь «модифицировать» доступность на существующем сайте, который имеет значительные проблемы в этом плане.
- Вы только начали рассматривать доступность и непокрытые смежные вопросы на последних этапах проекта.
Если вы рассматриваете доступность с самого начала проекта, то стоимость создания доступного контента должна быть весьма небольшой.
При планировании проекта учитывайте тестирование доступности в своём режиме тестирования, как при тестировании любого другого важного сегмента целевой аудитории (например, настольный или мобильный браузер). Тестируйте на ранних этапах и часто, выполняя автоматические тесты, чтобы выявить программно обнаруживаемые отсутствующие функции (такие как отсутствующий альтернативный текст (en-US) изображения или неправильная ссылка — см. Element relationships and context (en-US)), и тестируйте с некоторыми нетрудоспособными группами пользователей, чтобы увидеть, насколько хорошо для них работают более сложные функции сайта. Например:
- Может ли мой виджет выбора даты использоваться людьми, использующими программы чтения с экрана?
- Если контент обновляется динамически, знают ли об этом люди с ослабленным зрением?
- Мои интерфейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?
Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступными, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах.
Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчёт вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.
Кроме того, будьте реалистами. «100% доступность» является недостижимым идеалом — вы всегда столкнётесь с каким-то случаем, который приводёт к тому, что определённый пользователь найдёт определённый контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трёхмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.
С другой стороны, если вы работаете на веб-сайте галереи с интересным трёхмерным искусством, было бы неразумно ожидать, что каждое произведение искусства будет идеально доступно для людей с нарушениями зрения, учитывая, что это полностью визуальная среда.
Чтобы показать, что вы заботитесь о доступности и думали о ней, опубликуйте на своём сайте заявление о доступности, в котором подробно излагается, какова ваша политика в отношении доступности, и какие шаги вы предприняли для обеспечения доступности сайта. Если кто-то жалуется, что у вашего сайта есть проблема с доступностью, начните с ним диалог, проявите сочувствие и примите разумные меры, чтобы попытаться устранить проблему.
Примечание: В нашей статье «Об общих проблемах доступности» (en-US) рассматриваются особенности доступности, которые необходимо протестировать более подробно.
Подведём итоги:
- Думайте о доступности с самого начала проекта, тестируйте рано и часто. Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.
- Имейте в виду, что многие рекомендации по доступности выгодны всем, а не только пользователям с ограниченными возможностями. Например, семантическая разметка полезна не только для программ чтения с экрана, но и для быстрой загрузки и повышения производительности, так лучше для всех, особенно для мобильных устройств, и/или для медленных соединений.
- Опубликуйте заявление о доступности на своём сайте и общайтесь с людьми, у которых есть проблемы.
Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.Существует множество чек-листов и наборов руководств, на которых можно основываться при тестировании доступности, которые на первый взгляд могут показаться ошеломляющими. Наш совет — ознакомиться с основными областями, о которых вам необходимо позаботиться, а также понять структуры руководящих принципов, которые наиболее актуальны для вас.
- Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются Рекомендациями по доступности веб-контента (Web Content Accessibility Guidelines — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить лёгкое представление и начать обучение это WCAG at a Glance. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).
- В вашей стране также может быть предусмотрено специальное законодательство, регулирующее необходимость обеспечения доступности веб-сайтов, обслуживающих их население, например, Раздел 508 Закона о реабилитации в США, Федеральное постановление о безбарьерных информационных технологиях в Германии, Закон о равенстве в Великобритании, Accessibilità в Италии, Закон о дискриминации инвалидов в Австралии и т. д.
Поэтому, хотя WCAG представляет собой набор руководств, в вашей стране, вероятно, будут приняты законы, регулирующие доступность веба или, по крайней мере, доступность обществественных услуг (которые могут включать в себя веб-сайты, телевидение, физические пространства и т.д.). Это хорошая идея — узнать, каковы ваши законы. Если вы не предпримете никаких усилий, чтобы проверить, что ваш контент доступен, у вас могут возникнуть проблемы с законом, если люди с ограниченными возможностями жалуются на это.
Это звучит серьёзно, но на самом деле вам просто нужно рассматривать доступность в качестве основного приоритета вашей практики веб-разработки, как описано выше. В случае сомнений обратитесь за советом к квалифицированному юристу. Мы не собираемся предлагать больше советов, чем эти, потому что мы не юристы.
Веб-браузеры используют специальные API доступа (предоставляемые базовой операционной системой) которые предоставляют информацию, полезную для вспомогательных технологий (AT). AT обычно используют семантическую информацию, поэтому эта информация не включает такие вещи, как информация о стилях или JavaScript. Эта информация структурирована в дереве информации, которое называется деревом доступности.
Различные операционные системы имеют разные API доступа:
- Windows: MSAA/IAccessible, UIAExpress, IAccessible2
- Mac OS X: NSAccessibility
- Linux: AT-SPI
- Android: Accessibility framework
- iOS: UIAccessibility
Там, где нативная семантическая информация, предоставляемая элементами HTML в ваших веб-приложениях, падает, вы можете дополнить её функциями из спецификации WAI-ARIA, которые добавляют семантическую информацию в дерево доступности для улучшения доступности. Вы можете узнать больше о WAI-ARIA в нашей статье основы WAI-ARIA.
Эта статья должна была дать вам полезный обзор специальных возможностей, показать, почему это так важно, и посмотреть, как вы можете вписать его в свой рабочий процесс. Теперь у вас также должна быть жажда узнать о деталях реализации, которые помогут сделать сайты доступными, и мы начнём с этого в следующем разделе, рассматривая, почему HTML является хорошей основой для доступности.
- Обзор: Accessibility
- Далее
- Что такое доступность?
- HTML: Хорошая основа для доступности
- CSS и JavaScript доступность — лучшие практики
- Основы WAI-ARIA
- Доступность мультимедиа
- Мобильная доступность
- Устранение проблем доступности
Last modified: , by MDN contributors
Доступность HTML уроки для начинающих академия
❮ Назад
HTML Справочник ❯
Доступность HTML
Напишите HTML с учетом специальных возможностей. Предоставьте пользователю хороший способ навигации и взаимодействия с вашим сайтом. Сделайте свой HTML-код как можно более семантическ им, чтобы код был легко понятен посетителям и читателям экрана.
Семантический HTML
Семантический HTML означает использование правильных HTML-элементов для их правильного назначения в максимально возможной степени. Семантические элементы — это элементы с смыслом; Если вам нужна кнопка, используйте элемент <button> (а не <div> ).
Семантические
<button>Click Me</button>
Не семантические
<div>Click Me</div>
Семантический HTML дает контекст для чтения с экрана, которые читают содержимое веб-страницы вслух.
С помощью примера кнопки в виду:
- кнопки имеют более подходящий стиль по умолчанию
- средство чтения с экрана идентифицирует его как кнопку
- Focusable
- Интерактивными
Кнопка также доступна для людей, полагаться на клавиатуре только Навигация;
она может быть нажата с помощью мыши и клавиш, и он может быть с вкладками между (используя клавишу TAB на клавиатуре).
Примеры не семантическ их элементов: <div> и <span> — ничего не говорит о его содержимом.
Примеры семантическ их элементов: <form> , <table> и <article> — четко определяет его содержание.
Заголовки важны
Заголовки определяются с <h2> для <h6> тегов:
Пример
<h2>Heading 1</h2>
<h3>Heading 2</h3>
<h4>Heading 3</h4>
<h5>Heading 4</h5>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Поисковики используют заголовки для индексации структуры и содержания ваших веб-страниц.
Пользователи снимают страницы по заголовкам. Важно использовать заголовки для отображения структуры документа и связей между различными разделами.
<h2>заголовки должны использоваться для основных рубрик, за которыми следуют <h3> заголовки, затем менее важные <h4> и так далее.
Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки, чтобы сделать текст большим или полужирным.
Альтернативный текст
Атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или если пользователь использует средство чтения с экрана).
Значение атрибута alt должно описывать изображение:
Пример
<img src=»img_chania.jpg» alt=»Flowers
in Chania»>
Если обозреватель не может найти изображение, будет отображено значение атрибута alt:
Пример
<img src=»wrongname.gif» alt=»Flowers
in Chania»>
Объявить язык
Объявление языка важно для читателей экрана и поисковых систем, и объявляется с атрибутом lang. Чтобы отобразить веб-страницу на английском языке, выполните следующие действия:
<!DOCTYPE html>
<html lang=»en»>
<body>
. ..
</body>
</html>
Использовать понятный язык
Используйте понятный язык, который легко понять, и старайтесь избегать символов, которые не могут быть четко прочитаны с помощью программы чтения с экрана. Например:
- Держите предложения как можно короче.
- Избегайте тире. Вместо написания 1-3, напишите от 1 до 3
- Избегайте сокращений. Вместо написания февраля, напишите Февраль
- Избегайте жаргонных слов
Написать хорошие ссылки
Ссылка должна четко объяснить, какую информацию читатель получит, нажав на эту ссылку.
Примеры хороших и плохих ссылок:
Хорошо
Узнайте больше о языке HTML
Подробнее о Как правильно питаться
Купить билеты на Марс здесь
Плохо
Нажмите здесь
Читать далее..
Купить билеты на Марс Здесь
Названия ссылок
Атрибут title указывает дополнительные сведения об элементе.
Информация чаще всего отображается как текст подсказки, когда указатель мыши перемещается над элементом.
Пример
<a href=»https://html5css.ru/html/» title=»Go to html5css.ru HTML
section»>Visit our HTML Tutorial</a>
❮ Назад
HTML Справочник ❯
Доступность HTML
❮ Назад
Справочник по HTML ❯
Специальные возможности HTML
Всегда пишите код HTML с учетом специальных возможностей!
Предоставьте пользователю удобный способ навигации и взаимодействия с вашим сайтом. Сделайте свой HTML-код
как семантический , насколько это возможно.
Семантический HTML
Семантический HTML означает использование правильных элементов HTML для их правильной цели, т.к.
насколько это возможно. Семантические элементы — это элементы со значением; если вам нужна кнопка, используйте элемент (а не
Семантическая
Попробуйте сами »
Несемантическая
Попробуйте сами »
3 Семантическая 90 HTML дает контекст для программ чтения с экрана, которые читают содержимое страницы вслух.
Имея в виду пример кнопки:
- кнопки имеют более подходящий стиль по умолчанию
- средство чтения с экрана идентифицирует его как кнопку
- фокусируемый
- кликабельно
Кнопка также доступна для людей, использующих навигацию только с помощью клавиатуры;
на него можно нажимать как мышью, так и клавишами, и его можно перемещать по вкладке между
(используя клавишу табуляции на клавиатуре).
Примеры несемантических элементов :
— Ничего не говорит о его содержании. Примеры семантические элементы :