path: root/files/ru/learn/доступность/what_is_accessibility/index.html

---
title: Что такое доступность?
slug: Learn/Доступность/What_is_accessibility
tags:
  - CSS
  - HTML
  - JavaScript
  - Изучение
  - Клавиатура
  - Написание скриптов
  - Начинающий
  - Программные средства
  - Статья
  - Считыватель экрана
  - вспомогательная технология
  - доступность
translation_of: Learn/Accessibility/What_is_accessibility
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div>

<p class="summary">Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые знания:</th>
   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS.</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Узнать, что такое доступность, и как она влияет на вас как на веб-разработчика.</td>
  </tr>
 </tbody>
</table>

<h2 id="Итак_что_такое_доступность">Итак, что такое доступность?</h2>

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

<p>Вы также можете думать о доступности как о способе предоставления равных прав и одинаковых возможностей, независимо от способностей или обстоятельств. Точно так же, как не правильно лишать человека права посещать разнообразные места, только потому что он перемещается в инвалидном кресле (общественные здания в наши дни обычно имеют пандусы для инвалидных колясок или лифты), так и не правильно исключать кого-либо из веб-пространства из-за того, что у них слабое зрение или они используют мобильный телефон. Мы все разные, но все мы люди, и поэтому имеем одинаковые (человеческие) права.</p>

<p>Помимо того, что доступность это просто хороший тон, она также регулируется законодательством в некоторых странах и может поспособствовать открытию важных рынков, которые в противном случае не смогут использовать ваши услуги, покупать ваши продукты и т. д.</p>

<p>Доступность и опыт её применения принесут пользу всем:</p>

<ul>
 <li>Семантический HTML (который улучшает доступность) также улучшает SEO, делая ваш сайт более доступным для поиска или продажи.</li>
 <li>Забота о доступности демонстрирует хорошую этику и мораль, что улучшает ваш имидж в обществе.</li>
 <li>Другие хорошие практики, улучшающие доступность, также делают сайт более удобным для использования другими группами, такими как пользователи мобильных телефонов, пользователи с низкой скоростью сети и т.д. На самом деле, каждый может извлечь выгоду из многих таких улучшений.</li>
 <li>Мы упоминали, что это также закон в некоторых местах?</li>
</ul>

<h2 id="Какие_виды_ограниченных_возможностей_мы_рассматриваем">Какие виды ограниченных возможностей мы рассматриваем?</h2>

<p>Люди с ограниченными возможностями так же разнообразны, как и люди без них, так и своими недостатками. Ключевой урок заключается в том, чтобы думать за пределами вашего собственного компьютера и того, как вы используете Интернет, и начать изучать как его используют другие — <em>вы не ваши пользователи. </em>Ниже разъясняются основные виды инвалидности, а также любые специализированные инструменты, которые  используются для доступа к веб-контенту (известные как <strong>вспомогательные технологии</strong>).</p>

<div class="note">
<p><strong>Примечание</strong>: в информационном бюллетене Всемирной организации здравоохранения по вопросам <a class="external external-icon" href="https://www.who.int/ru/news-room/fact-sheets/detail/disability-and-health">Инвалидности и Здоровья</a> говорится, что "Более 1 миллиарда людей, около 15% населения мира, имеют какую-либо форму инвалидности" и "От 110 до 190 миллионов взрослых испытывают значительные трудности в функционировании."</p>
</div>

<h3 id="Люди_с_нарушениями_зрения">Люди с нарушениями зрения</h3>

<p>Сюда относятся люди со слепотой, слабым зрением, дальтонизмом и другие. Многие из этих людей используют экранные лупы (либо физические лупы, либо программные возможности масштабирования — большинство браузеров и операционных систем в наши дни имеют возможности масштабирования), а некоторые будут использовать программы чтения с экрана, то есть программное обеспечение, которое читает цифровой текст вслух:</p>

<ul>
 <li>Некоторые платные коммерческие продукты, такие как <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) и <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li>
 <li>Некоторые бесплатные продукты, такие как <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (для Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (браузер Chrome, Windows и Mac ОС Х) и <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li>
 <li>Некоторые из них встроены в операционную систему, например <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X и iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Экранный диктор</a>(<a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a>) (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (в Chrome OS) и <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
</ul>

<p>Хорошая идея ознакомиться с экранными дикторами; вы можете настроить экранный считыватель и поиграть с ним, чтобы получить представление о том, как это работает. Более подробную информацию об их использовании см. в <a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">руководстве по кросс-браузерному тестированию</a>. Видео ниже предоставляет краткий пример взаимодействия с экранными читателями.</p>

<p>{{EmbedYouTube("IK97XMibEws")}}</p>

<p> </p>

<p>Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. <a class="external external-icon" href="http://www.who.int/ru/news-room/fact-sheets/detail/blindness-and-visual-impairment">Нарушения зрения и слепота</a>). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединенных Штатов Америки.</p>

<h3 id="Люди_с_нарушениями_слуха">Люди с нарушениями слуха</h3>

<p>Эта группа людей либо имеет низкий уровень слуха, либо вообще не слышит. Люди с нарушениями слуха используют ATs (см. <a class="external external-icon" href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Вспомогательные устройства для людей с нарушениями слуха, голоса, речи или языка</a>), но на самом деле нет специальных ATs, специфичных для использования на компьютере или в интернете.</p>

<p>Однако существуют специальные техники, которые следует учитывать для предоставления текстовых альтернатив аудиоконтенту, который люди смогут читать, от простых текстовых транскриптов до текстовых дорожек (т.е. подписей), которые могут отображаться вместе с видео. Об этом будет рассказано в статье позже.</p>

<p>Люди с нарушениями слуха представляют значительную базу пользователей — "360 миллионов человек в мире страдают от инвалидизирующей потери слуха", — говорится в информационном бюллетене Всемирной Организации Здравоохранения о <a class="external external-icon" href="https://www.who.int/ru/news-room/fact-sheets/detail/deafness-and-hearing-loss">Глухоте и потере слуха</a>.</p>

<h3 id="Люди_с_ограниченными_физическими_возможностями">Люди с ограниченными физическими возможностями </h3>

<p>Это группа людей, которые имеют инвалидность в отношении движения, которая может включать в себя чисто физические проблемы (такие как потеря конечности или паралич), или неврологические/генетические расстройства, которые приводят к слабости или потере контроля в конечностях. Некоторые люди могут испытывать трудности с выполнением точных движений рук, необходимых для использования мыши, в то время как другие могут быть более серьезно затронуты, возможно, значительно парализованы до такой степени, что им нужно использовать <a class="external external-icon" href="https://www.performancehealth.com/baseball-cap-head-pointer">указатель головы</a> для взаимодействия с компьютером.</p>

<p>Этот вид инвалидности также может быть результатом старости, а не какой-либо конкретной травмы или состояния, а также может быть результатом аппаратных ограничений — у некоторых пользователей может не быть мыши.</p>

<p>Управление элементами с помощью клавиатуры является обычным требованием, которое влияет на процесс веб-разработки — мы обсудим доступ с клавиатруы в последующих статьях модуля. Хорошая идея, чтобы попробовать пользоваться веб-сайтами, только с помощью клавиатуры, чтобы увидеть, что из этого выйдет и как это работает. Например, можно ли использовать клавишу Tab для перемещения между различными элементами управления веб-формы? Вы можете найти больше деталей об использовании клавиатуры в нашей секции <a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Cross browser testing Using native keyboard accessibility</a>.</p>

<p>С точки зрения статистики, значительное количество людей имеют нарушения мобильности. Центры США по контролю и профилактике заболеваний <a class="external external-icon" href="http://www.cdc.gov/nchs/fastats/disability.htm">Инвалидности и Функционирования (Неинституционализированные взрослые в возрасте 18 лет и старше)</a> сообщают, что в США "Процент взрослых с любым физическим нарушением функционирования: 16,1%".</p>

<h3 id="Люди_с_когнитивными_нарушениями">Люди с когнитивными нарушениями</h3>

<p>Вероятно, самый широкий спектр инвалидности можно увидеть в этой категории — когнитивные нарушения в широком смысле могут относиться к инвалидности от психических заболеваний до трудностей в обучении, трудности в понимании и концентрации, такие как <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">СДВГ (синдром дефицита внимания и гиперактивности)</a>, людям <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">аутистического спектра</a>, людям с <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">шизофренией</a>, и множество других типов нарушений. Такие недостатки могут повлиять на многие детали повседневной жизни из-за проблем с памятью, решением, пониманием, вниманием и т. д.</p>

<p>Наиболее распространенные способы, вызванные когнитивными нарушениями, которые могут повлиять на использование веб-сайта — трудности с пониманием того, как выполнить задачу; вспомнить, как сделать что-то, что было ранее выполнено; повышенное разочарование в запутанных рабочих процессах или непоследовательных макетах/навигации/других функциях страницы.</p>

<p>В отличие от других проблем доступности интернета, невозможно назначить быстрые исправления для многих проблем доступности, связанных с когнитивными нарушениями; лучшее решение, которое у вас есть — это проектировать веб-сайты таким образом, чтобы они были логичными, последовательными и удобными для использования настолько, насколько это возможно. Например, убедитесь, что:</p>

<ul>
 <li>страницы согласованы — навигация, шапка и подвал (хедер и футер), а так же главный контент всегда находятся в одном месте.</li>
 <li>инструменты хорошо разработаны и просты в использовании.</li>
 <li>многоступенчатые процессы разбиты на логические этапы, с регулярными напоминаниями о том, как далеко вы прошли, и сколько осталось до завершения процесса, если это необходимо.</li>
 <li>рабочие процессы логичны, просты и требуют как можно меньше взаимодействий. Например, регистрация и вход на веб-сайт зачастую неоправданно сложны.</li>
 <li>страницы не слишком длинные или плотные с точки зрения количества информации, представленной сразу.</li>
 <li>язык, используемый на ваших страницах, настолько прост и удобен, насколько это возможно, и не полон ненужного жаргона и сленга.</li>
 <li>важные моменты и контент выделены некоторым способом.</li>
 <li>ошибки пользователя четко выделены, с подсказкой и предлагаемым решением.</li>
</ul>

<p>Это не "методы доступности" как таковые — это хорошая практика проектирования. Они принесут пользу всем, кто использует ваши сайты, и должны быть стандартной частью вашей работы.</p>

<p>С точки зрения статистики, опять же цифры значительны. Отчет Корнелльского университета <a class="external external-icon" href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">О состоянии инвалидности за 2014 год</a> (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.</p>

<div class="note">
<p><strong>Примечание</strong>: <a href="http://webaim.org/articles/cognitive/">Страница о когнитивных расстройствах</a> на WebAIM обепечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.</p>
</div>

<h2 id="Реализация_доступности_в_проекте">Реализация доступности в проекте</h2>

<p>Распространенный миф о доступности заключается в том, что доступность является дорогостоящим "дополнением" для реализации проекта. Этот миф на самом деле может быть правдой, если:</p>

<ul>
 <li>Вы пытаетесь "модифицировать" доступность на существующем сайте, который имеет значительные проблемы в этом плане.</li>
 <li>Вы только начали рассматривать доступность и непокрытые смежные вопросы на последних этапах проекта.</li>
</ul>

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

<p>При планировании проекта учитывайте тестирование доступности в своём режиме тестирования, как при тестировании любого другого важного сегмента целевой аудитории (например, настольный или мобильный браузер). Тестируйте на ранних этапах и часто, выполняя автоматические тесты, чтобы выявить программно обнаруживаемые отсутствующие функции (такие как отсутствующий <a href="https://developer.mozilla.org/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">альтернативный текст</a> изображения или неправильная ссылка — см. <a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), и тестируйте с некоторыми нетрудоспособными групами пользователей, чтобы увидеть, насколько хорошо для них работают более сложные функции сайта. Например:</p>

<ul>
 <li>Может ли мой виджет выбора даты использоваться людьми, использующими программы чтения с экрана?</li>
 <li>Если контент обновляется динамически, знают ли об этом люди с ослабленным зрением?</li>
 <li>Мои интефейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?</li>
</ul>

<p>Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступыми, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчет вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.</p>

<p>Кроме того, будьте реалистами. "100% доступность" является недостижимым идеалом — вы всегда столкнетесь с каким-то случаем, который приводёт к тому, что определенный пользователь найдёт определенный контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трехмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.</p>

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

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

<div class="note">
<p><strong>Note</strong>: В нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">«Об общих проблемах доступности»</a> рассматриваются особенности доступности, которые необходимо протестировать более подробно.</p>
</div>

<p>Подведём итоги:</p>

<ul>
 <li>Думайте о доступности с самого начала проекта, тестируйте рано и часто. Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.</li>
 <li>Имейте в виду, что многие рекомендации по доступности выгодны всем, а не только пользователям с ограниченными возможностями. Например, семантическая разметка полезна не только для программ чтения с экрана, но и для быстрой загрузки и повышения производительности, так лучше для всех, особенно для мобильных устройств, и/или для медленных соединений.</li>
 <li>Опубликуйте заявление о доступности на своем сайте и общайтесь с людьми, у которых есть проблемы.</li>
</ul>

<h2 id="Руководство_по_доступности_и_закон">Руководство по доступности и закон</h2>

<p>Существует множество чеклистов и наборов руководств, на которых можно основываться при тестировании доступности, которые на первый взгляд могут показаться ошеломляющими. Наш совет — ознакомиться с основными областями, о которых вам необходимо позаботиться, а также понять структуры руководящих принципов, которые наиболее актуальны для вас.</p>

<ul>
 <li>Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются <a class="external external-icon" href="https://www.w3.org/Translations/WCAG20-ru/WCAG20-ru-20130220/">Рекомендациями по доступности веб-контента</a> (<a class="external external-icon" href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить легкое представление и начать обучение это <a class="external external-icon" href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).</li>
 <li>В вашей стране также может быть предусмотрено специальное законодательство, регулирующее необходимость обеспечения доступности веб-сайтов, обслуживающих их население, например, <a class="external external-icon" href="http://www.section508.gov/content/learn">Раздел 508 Закона о реабилитации</a> в США, <a class="external external-icon" href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Федеральное постановление о безбарьерных информационных технологиях</a> в Германии, <a class="external external-icon" href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Закон о равенстве</a> в Великобритании, <a class="external external-icon" href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a> в Италии, <a class="external external-icon" href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Закон о дискриминации инвалидов</a> в Австралии и т.д.</li>
</ul>

<p>Поэтому, хотя WCAG представляет собой набор руководств, в вашей стране, вероятно, будут приняты законы, регулирующие доступность веба или, по крайней мере, доступность обществественных услуг (которые могут включать в себя веб-сайты, телевидение, физические пространства и т.д.). Это хорошая идея — узнать, каковы ваши законы. Если вы не предпримете никаких усилий, чтобы проверить, что ваш контент доступен, у вас могут возникнуть проблемы с законом, если люди с ограниченными возможностями жалуются на это.</p>

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

<h2 id="Специальные_API_доступа">Специальные API доступа</h2>

<p>Веб-браузеры используют <strong>специальные API доступа</strong> (предоставляемые базовой операционной системой)  которые предоставляют информацию, полезную для вспомогательных технологий (AT). AT обычно используют семантическую информацию, поэтому эта информация не включает такие вещи, как информация о стилях или JavaScript. Эта информация структурирована в дереве информации, которое называется <strong>деревом доступности</strong>.</p>

<p>Различные операционные системы имеют разные API доступа:</p>

<ul>
 <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
 <li>Mac OS X: NSAccessibility</li>
 <li>Linux: AT-SPI</li>
 <li>Android: Accessibility framework</li>
 <li>iOS: UIAccessibility</li>
</ul>

<p>Там, где нативная семантическая информация, предоставляемая элементами HTML в ваших веб-приложениях, падает, вы можете дополнить ее функциями из <a class="external" href="https://www.w3.org/TR/wai-aria/">спецификации WAI-ARIA</a>, которые добавляют семантическую информацию в дерево доступности для улучшения доступности. Вы можете узнать больше о WAI-ARIA в нашей статье <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">основы WAI-ARIA</a>.</p>

<h2 id="Заключение">Заключение</h2>

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

<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li>
 <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
 <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
 <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
 <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
 <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
 <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
</ul>