Скринридер: что такое скринридер | Сайт для Слепых

07.04.1984 alexxlab

Содержание

HTML: Хорошая основа для доступности — Изучение веб-разработки

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

Необходимые знания:	Базовая компьютерная грамотность, базовое понимание HTML (смотрите Введение в HTML), и понимания, что такое доступность.
Цель:	Познакомиться с тем, какие особенности HTML способствуют доступности, и как использовать их на ваших веб-страницах должным образом.

По мере изучения HTML: чтения статей, просмотра примеров и т.д., вы заметите одну общую тему — важность использования семантического HTML (иногда называемого POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML»). Это означает использование HTML-элементов по назначению насколько это возможно.

Вы спросите, почему это так важно? В конце концов, можно использовать комбинацию CSS и JavaScript, чтобы заставить почти любой HTML-элемент вести себя так, как вы захотите. Например, кнопка для воспроизведения видео на вашем сайте может быть обозначена вот так:

<div>Воспроизвести видео</div>

Но, как вы увидите далее, в данном случае намного логичнее использовать правильный элемент:

<button>Воспроизвести видео</button>

HTML-элементы <button> не только имеют соответствующие кнопке стили по умолчанию (которые вы скорее всего захотите переписать), они также имеют встроенную доступность с клавиатуры: между ними можно передвигаться с помощью кнопки

Tab и активировать, используя Enter.

Вёрстка с помощью семантического HTML не займёт больше времени, чем с помощью не семантического (плохого) HTML, если делать это последовательно с самого начала проекта, и это также имеет другие преимущества помимо доступности:

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

Хорошо для SEO — поисковики уделяют больше внимания ключевым словам внутри заголовков, ссылок и т.д., чем ключевым словам, помещённым в не семантический <div> и т.д., поэтому клиентам будет проще найти ваш сайт.

Давайте рассмотрим доступный HTML более детально.

Примечание: Желательно, чтобы у вас был установлен скринридер, чтобы вы могли тестировать примеры, приведённые ниже. Посмотрите наше Руководство по скринридерам для более подробной информации.

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

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

У вас не всегда есть возможность избавиться от плохой вёрстки: ваши страницы могут быть сгенерированы каким-нибудь фреймворком на стороне сервера, над которым у вас нет полного контроля, или на страницах есть сторонний контент (такой как рекламные баннеры), которые вы также не контролируете.

Цель не «всё или ничего», однако — каждое улучшение, которое вам под силу сделать, поможет обеспечить доступность.

Текстовый контент

Одно из самых лучших вспомогательных средств доступности для пользователя скринридера — хорошая структура заголовков, параграфов, список и т.д. Пример хорошей семантики может выглядеть так:

<h2>Мой заголовок</h2>

<p>Это первый раздел моей страницы.</p>

<p>Я добавлю ещё один параграф тут.  </p>

<ol>
  <li>Это</li>
  <li>список для</li>
  <li>чтения</li>
</ol>

<h3>Мой подзаголовок</h3>

<p>Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!</p>

<h3>Мой второй подзаголовок</h3>

<p>Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</p>

Мы подготовили версию с длинными текстом, чтобы вы попробовали со скринридером (смотрите good-semantics.html). Если вы попробуете поперемещаться, то увидите, как легко ориентироваться на странице:

Скринридер озвучивает каждый заголовок по мере перемещения, оповещая вас, что является заголовком, а что параграфом.

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

Иногда люди используют презентационные элементы HTML и перенос строки, чтобы написать заголовки или параграфы:

<font size="7">Мой заголовок</font>
<br><br>
Это первый раздел моей страницы.
<br><br>
Я добавлю ещё один параграф тут.
<br><br>
1. Это
<br><br>
2. список для
<br><br>
3. чтения
<br><br>
<font size="5">Мой подзаголовок</font>
<br><br>
Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!
<br><br>
<font size="5">Мой второй подзаголовок</font>
<br><br>
Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.

Если вы попробуете полную версию с помощью скринридера (смотрите bad-semantics.html), вам не слишком это понравится: скринридеру нечего использовать как ориентир, поэтому вы не сможете получить содержание, а вся страница для скринридера — это один большой блок, поэтому он озвучит всё за один раз, без остановок.

Есть и другие проблемы, помимо доступности — сложнее стилизовать контент, используя CSS, или манипулировать им с помощью JavaScript, например, потому что там нет элементов, которые можно использовать как селекторы.

Использование понятного языка

Язык, который вы используете, также может влиять на доступность. В целом, лучше использовать понятный язык, который не слишком сложный, и который не использует ненужные жаргоны и сленг. Это помогает не только людям с когнитивными или другими нарушениями, но и читателям, для которых текст написан не на родном языке, молодым людям… на самом деле всем! Кроме этого, стоит избегать использование языка и символов, которые не могут быть чётко озвучено скринридером. Например:

Не используйте тире, если можете избежать этого. Вместо «5-7», напишите «от 5 до 7».
Не пишите сокращения: вместо «Янв» пишите «Январь».
Расшифровывайте аббревиатуры, как минимум один или два раза. Вместо «HTML» при первом употреблении, пишите «Hypertext Markup Language».

Вёрстка

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

Посмотрите пример табличной вёрстки, открыв table-layout.html, которая выглядит примерно так:

<table>
      
      <tr>
        <td colspan="6">

          <h2 align="center">Шапка</h2>

        </td>
      </tr>
      
      <tr bgcolor="#ffffff">
        <td>
          <a href="#" align="center">Главная</a>
        </td>
        <td>
          <a href="#" align="center">Наша команда</a>
        </td>
        <td>
          <a href="#" align="center">Проекты</a>
        </td>
        <td>
          <a href="#" align="center">Контакты</a>
        </td>
        <td>
          <form>
            <input type="search" name="q" placeholder="Поиск">
          </form>
        </td>
        <td>
          <button>Вперёд!</button>
        </td>
      </tr>
      
      <tr>
        <td>

        </td>
      </tr>
      
      <tr>
        <td colspan="4" bgcolor="#ffffff">

          
        </td>
        <td colspan="2" bgcolor="#ff80ff" valign="top">
          <h3>Связанный контент</h3>

          

        </td>
      </tr>
      
      <tr>
        <td>

        </td>
      </tr>
      
      <tr bgcolor="#ffffff">
        <td colspan="6">
          <p>© 2050 никто.    Все права защищены.</p>
        </td>
      </tr>
    </table>

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

Табличная вёрстка — пережиток прошлого, который имел смысл, когда поддержка CSS не была сильно распространена среди браузеров, но она создаёт путаницу среди пользователей скринридеров, и плоха по многим другим причинам (злоупотребление таблицами, пожалуй, требует больше разметки, делает дизайн менее гибким). Не делайте так!

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

<header>
  <h2>Шапка</h2>
</header>

<nav>
  
</nav>


<main>

  
  <article>
    <h3>Заголовок статьи</h3>

    
  </article>

  <aside>
    <h3>Связанный контент</h3>

    
  </aside>

</main>



<footer>
  
</footer>

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

На что ещё стоит обратить внимание при вёрстке — это использование семантических HTML5 элементов, которые можно увидеть в примере выше (смотрите секционирование содержания): вы можно верстать, используя только вложенные <div> элементы, но лучше использовать соответствующие секционные элементы, чтобы обернуть вашу основную навигацию (<nav>), футер (<footer>), повторяющийся контент (<article>) и т.д. Эти элементы предоставляют дополнительную семантику для скринридеров (и других инструментов), чтобы давать пользователю дополнительную информацию о контенте, по которому они перемещаются (смотрите статью Screen Reader Support for new HTML5 Section Elements для представления поддержки этих элементов с помощью скринридеров).

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

Элементы интерфейса

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

Одним из ключевых аспектов доступности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке native-keyboard-accessibility.html (смотрите исходный код). Попробуйте понажимать клавишу Tab, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элементы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.

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

Примечание: Различные браузеры могут иметь разное управление с клавиатуры. Для более подробной информации смотрите Using native keyboard accessibility.

Такое поведение вы получаете сразу по умолчанию, просто используя правильные элементы, например:

<h2>Ссылки</h2>

<p>Это ссылка ведёт на сайт <a href="https://www.mozilla.org">Mozilla</a>.</p>

<p>Другая ссылка на <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>

<h3>Кнопки</h3>

<p>
  <button data-message="Это из первой кнопки">Нажми меня!</button>
  <button data-message="Это из второй кнопки">Меня тоже нажми!</button>
  <button data-message="Это из третьей кнопки">И меня!</button>
</p>

<h3>Форма</h3>

<form>
  <div>
    <label for="name">Укажите ваше имя:</label>
    <input type="text" name="name">
  </div>
  <div>
    <label for="age">Укажите ваш возраст:</label>
    <input type="text" name="age">
  </div>
  <div>
    <label for="mood">Выберите ваше настроение:</label>
    <select name="mood">
      <option>Счастливый</option>
      <option>Грустный</option>
      <option>Злой</option>
      <option>Обеспокоенный</option>
    </select>
  </div>
</form>

Это предполагает использование соответствующим образом ссылок, кнопок, элементов форм и меток (включая элемент <label> для элементов форм).

Однако, опять же, люди иногда делают странные вещи с HTML. Например, иногда вы видите кнопки, размеченные с помощью элемента <div>:

<div data-message="Это из первой кнопки">Нажми меня!</div>
<div data-message="Это из второй кнопки">Меня тоже нажми!</div>
<div data-message="Это из третьей кнопки">И меня!</div>

Такой код не советуется использовать: вы сразу же теряете нативную доступность с клавиатуры, которая у вас была бы, если просто использовать элемент <button>, к тому же <div> по умолчанию не имеет кнопочных стилей.

Добавление доступности с клавиатуры

Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв fake-div-buttons.html, а также исходный код). Мы дали нашим поддельным <div>-кнопкам возможность фокусироваться (в том числе через Tab), указав атрибут tabindex="0":

<div data-message="Это из первой кнопки" tabindex="0">Кликни меня!</div>
<div data-message="Это из второй кнопки" tabindex="0">Меня тоже кликни!</div>
<div data-message="Это из третьей кнопки" tabindex="0">И меня!</div>

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

tabindex="0" — как указано выше, это значение позволяет элементу быть выделенным и достигнутым с помощью последовательной навигации. Это самое полезное значение tabindex.
tabindex="-1" — позволяет элементам, которые обычно не принимают фокусное выделение, получать его программно, например, с помощью JavaScript, или как цель якорной ссылки.

Хотя дополнение, которые мы сделали, позволяет нам перемещаться по кнопкам с помощью Tab, оно не позволяет нам активировать их кнопкой Enter. Для этого нам необходимо добавить хитрый кусочек JavaScript:

document.onkeydown = function(e) {
  if(e.keyCode === 13) { 
    document. activeElement.click();
  }
};

Мы навешиваем обработчик событий на document для обнаружения нажатий с клавиатуры. Далее, через свойство объекта события keyCode (en-US), проверяем, какая кнопка была нажата. Если код клавиши совпадает с кодом клавиши Enter, мы выполняем функцию, которая хранится в обработчике кнопки onclick, используя document.activeElement.click(). activeElement возвращает текущий сфокусированный элемент.

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

Содержательные текстовые метки

Текстовые метки (описания) для элементов интерфейса полезны всем пользователям, но их правильное описание — особенно важно для пользователей с ограниченными способностями.

Вы должны следить за тем, чтобы кнопки и ссылки имели понятные и уникальные текстовые описания. Не используйте фразу «Кликните здесь», потому что пользователи скринридеров иногда вызывают список кнопок и элементов форм. В примере ниже можно увидеть такой список, вызванный из VoiceOver на Mac.

Удостоверьтесь, что описания вне контекста имеют смысл, так же как и в контексте параграфа, в котором они содержаться. Например, вот хороший текст для ссылки:

<p>Киты очень классные существа. <a href="whales.html">Узнай больше о китах</a>.</p>

а это плохой текст для ссылки:

<p>Киты очень классные существа. Чтобы узнать больше о китах, <a href="whales.html">нажмите здесь</a>.</p>

Примечание: Более подробно о создании ссылок и лучших практиках можно почитать в статье «Создание ссылок». Также посмотреть на примеры хороших и плохих ссылок можно на good-links.html и bad-links.html.

Описания форм также важны для понимания, что нужно вводить в каждое текстовое поле. Следующий пример кажется достаточно разумным:

Укажите ваше имя: <input type="text" name="name">

Однако, это не совсем удобно для пользователей с ограниченными возможностями. В примере нет ничего, что могло бы однозначно связать описание текстового поля с самим текстовым полем, и чётко указать, как его заполнить, если вы не можете видеть. Если бы вы воспользовались скринридером, скорее всего он озвучил описание примерно как «редактировать текст».

Следующий пример намного лучше:

<div>
  <label for="name">Укажите ваше имя:</label>
  <input type="text" name="name">
</div>

С такой разметкой описание будет явно связано с текстовым полем, и будет звучать как «Укажите ваше имя: редактировать текст».

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

Примечание: Посмотреть на хорошие и плохие пример форм можно на good-form.html и bad-form.html.

Обычные таблицы с данными можно сверстать очень простой разметкой, например:

<table>
  <tr>
    <td>Имя</td>
    <td>Возраст</td>
    <td>Пол</td>
  </tr>
  <tr>
    <td>Гавриил</td>
    <td>13</td>
    <td>Мужской</td>
  </tr>
  <tr>
    <td>Эвелина</td>
    <td>8</td>
    <td>Женский</td>
  </tr>
  <tr>
    <td>Фрида</td>
    <td>5</td>
    <td>Женский</td>
  </tr>
</table>

Но есть проблемы — пользователи скринридера никак не смогут связать вместе строки или столбцы в группу данных. Чтобы это сделать, нужно знать какие из строк являются заголовками, и озаглавливают ли они строки, столбцы и т.д. Для таблицы выше это можно определить только визуально (попробуйте сами на примере, открыв bad-table. html).

Теперь посмотрим на пример таблицы с панк-группами, где можно увидеть несколько вспомогательных средств:

Заголовки таблиц определены, используя элементы <th> (en-US); можно также указать являются ли они заголовками для строк или столбцов с помощью атрибута scope. Это даёт нам полные группы данных, которые скринридер обработает как отдельные блоки.
Элемент <caption> и атрибут summary у элемента <table> (en-US) выполняют похожую работу — они выступают в качестве альтернативного текста для таблицы, предоставляя пользователям скринридера краткое содержание. Элемент <caption> обычно предпочтительнее, так как контент становится доступнее и для зрячих пользователей, которые могут посчитать это полезным. На самом деле необязательно ни то, ни другое.

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

У нас есть простой пример, accessible-image.html, который содержит четыре копии одного и того же изображения:

<img src="dinosaur.png">

<img src="dinosaur.png"
     alt="Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.">

<img src="dinosaur.png"
     alt="Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов."
     title="Красный динозавр Mozilla">


<img src="dinosaur.png" aria-labelledby="dino-label">

<p>Красный тираннозавр Рекс Mozilla: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.</p>

Первое изображение, когда оно просматривается программой чтения с экрана, не очень помогает пользователю — например, VoiceOver озвучивает его как «/dinosaur. png, image». Он озвучивает имя файла, чтобы попытаться помочь. В этом примере пользователь, по крайней мере, будет знать, что это какой-то динозавр, но часто файлы могут загружаться с программно-генерируемыми именами (например, с цифровой камеры), и эти имена файлов, скорее всего, не обеспечат контекста для содержимого изображения.

Примечание: Вот почему вы никогда не должны включать текстовое содержимое в изображение — скринридеры просто не могут получить к нему доступ.Есть и другие недостатки — вы не можете выбрать его и скопировать/вставить. Просто не делайте этого!

Когда скринридер встретит второе изображение, он озвучит атрибут alt полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».

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

Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение атрибута alt пустым (смотрите «Пустые атрибуты alt») или просто вставить их как фон с помощью CSS.

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

Давайте взглянем на четвёртый способ:

<img src="dinosaur.png" aria-labelledby="dino-label">

<p>Красный тираннозавр Mozilla ... </p>

В этом случае мы вообще не используем атрибут alt. Вместо этого мы представили наше описание изображения как обычный параграф, указали id, и потом использовали атрибут aria-labelledby, сославшись на тот id. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозможно с помощью атрибута alt.

Примечание: aria-labelledby — часть спецификации WAI-ARIA, которая позволяет разработчиками добавлять, где требуется, дополнительную семантику разметке для улучшения доступности при использовании скринридеров. Чтобы узнать больше о том, как это работает, читайте статью «Основы WAI-ARIA».

Другие механизмы альтернативного текста

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

<img src="dinosaur.png" longdesc="dino-info.html">

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

HTML5 содержит два новых элемента — <figure> и <figcaption>, которые, как предполагается, должны связывать какую-любо фигуру (всё что угодно, необязательно изображение) с заголовком фигуры:

<figure>
  <img src="dinosaur. png" alt="Тираннозавр организации Mozilla">
  <figcaption>Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.</figcaption>
</figure>

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

Пустые атрибуты alt

<h4>
  <img src="article-icon.png" alt="">
  Тираннозавр Рекс: король динозавров
</h4>

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

Причина, по которой стоит использовать пустой атрибут alt, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан alt. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой атрибут alt. Другой вариант — использовать aria роль role=»presentation». Это также предотвратит озвучивание скринридером альтернативного текста.

Примечание: По возможности для отображения декоративных изображений вы должны использовать CSS.

Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошо или плохое их использование влияет на доступность.

7 технологий, которые помогают незрячим людям каждый день

1. Скринридер

Скринридер — программа, которая распознаёт всё происходящее на дисплее компьютера или смартфона, преобразует это в текст и озвучивает (самостоятельно или с помощью речевых синтезаторов). Скринридер необходим для просмотра страниц в интернете, чтения почты, общения в мессенджерах, работы с документами и многих других задач. Хорошая новость — в современных версиях операционных систем такая программа предустановлена: «Экранный диктор» в Windows, Voiceover в iOS, TalkBack в Android. Чтобы начать пользоваться ими, достаточно зайти в настройки устройства.

Если их работа незрячему пользователю кажется неудобной или просто не нравится, можно установить дополнительные скринридеры и даже несколько одновременно. Популярные программы — JAWS и NonVisual Access (NVA).

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

2. Речевой синтезатор

Речевой синтезатор преобразует текст, полученный от скринридера, из письменного в устный. В некоторых приложениях, например базовых для Windows, iOS и Android, «читалка экрана» уже имеет «голос». Тем не менее дополнительный речевой синтезатор тоже может пригодиться.

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

Кроме того, можно использовать несколько речевых синтезаторов для разных задач, например для переписки с друзьями на смартфоне, чтения книг и работы на компьютере. Это помогает проще переключаться с одного вида деятельности на другой. Плюс русифицированные речевые синтезаторы могут плохо читать иностранные тексты: чтобы послушать статью на английском языке, пригодится дополнительный «помощник». Популярные речевые синтезаторы — Acapela, Vokalizer, RHVoice.

В большинстве речевых синтезаторов выбор «озвучивателей» ограничен. «Билайн» вместе с социально‑предпринимательским проектом Everland решили это исправить. Сейчас они занимаются созданием целой библиотеки русских голосов. Ими можно будет бесплатно пользоваться на любых скринридерах и в синтезаторе речи RHVoice. Первый голос записал дизайнер и блогер Артемий Лебедев, он уже доступен для скачивания.

Узнать больше

3. Голосовое управление

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

Но если её нет или качество работы не устраивает, можно установить приложения для голосового управления. Для компьютеров, например, Typle или Laitis: в них есть набор предустановленных команд и можно добавлять свои. Конечно, для корректного использования необходим микрофон. Также полезными будут голосовые помощники, вроде «Алисы», Siri, Cortana или «Ассистента Дуси». Они помогут расширить количество доступных действий и получать дополнительную информацию по голосовому запросу: узнавать погоду и последние новости.

4. Голосовой набор

Набивать короткие сообщения и даже объёмные тексты тоже можно с помощью голоса. Нужны лишь микрофон и соответствующая программа. На тач‑клавиатурах смартфонов такая функция уже есть, а вот для ноутбуков или ПК нужно установить дополнительный софт.

Если важно, чтобы программа не просто распознавала речь, но и поддерживала ряд голосовых команд (например, ставила знаки препинания по запросу или переходила на новый абзац), подойдут MSpeech, Dictate (расширение для Microsoft Office) или Voco. Если нужно, чтобы голосовой ввод работал в любом окне ввода, а не только непосредственно в программе, можно установить расширение Speechpad в браузере.

5. Навигатор

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

Специальные онлайн‑карты, отвечающие этим требованиям, можно найти в базах приложений для iOS и Android. Например, OsmAnd, WeWALK, Microsoft Soundscape, GetThere, BlindSquare и многие другие. Они отличаются друг от друга интерфейсом и набором функций, но в целом выполняют одинаковые задачи: говорят о необходимости сменить направление, уточняют текущее положение, рассказывают о месте назначения и сообщают об отклонении от проложенного маршрута, а во время поездок на транспорте объявляют проезжаемые остановки. Также в них можно устанавливать точки: выбирать не здание целиком, а его конкретную часть. Управляются такие навигаторы с помощью голосовых команд и жестов, например двойных тапов по экрану или тряске смартфона.

6. Распознаватель предметов

Незрячие вынуждены определять предметы на ощупь, но сделать это получается не всегда (например, определить номинал банкноты). Существуют мобильные приложения, которые делают это за них: Google LookOut, TapTapSee, Envision AI, «Определитель купюр», Blind‑Droid Wallet и другие. Чтобы получить информацию о предмете, необходимо навести на него камеру и сделать фотографию, а приложение назовёт то, что видит. В некоторые из них можно также загружать картинки из галереи. Распознаватели предметов могут называть не только сам предмет, но и его цвет — полезно во время шопинга.

Есть и ещё один вариант для слепых и слабовидящих узнать, что находится вокруг, и прочитать надписи без шрифта Брайля. Это приложение Be My Eyes: оно соединяет человека с видящим волонтёром, который рассказывает, что находится рядом, и подсказками помогает выполнить необходимое действие. К помощи Be My Eyes незрячие могут прибегать для изучения объектов, чтения текста на упаковке, ориентации в пространстве или даже чтобы проверить, сочетаются ли цвета надетых на них вещей.

7. Тифлокомментирование

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

Тифлокомментаторы или аудиоустройства с предзаписанными комментариями есть в некоторых музеях и театрах, их можно запросить ^{и в кинотеатрах, но только для российских фильмов, финансируемых государством. Также есть ряд приложений с такой функцией, но библиотеки в них ограничены.}

Например, в «Искусство.Вслух» есть записи для нескольких фильмов, сериалов и театральных постановок Москвы, Санкт‑Петербурга и Перми. Советское кино с аудиодескрипцией можно посмотреть на YouTube‑канале «Мосфильма».

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

Чтобы приложение было действительно полезным и удобным, «Билайн» привлекает к разработке незрячих людей: они знают о своих потребностях гораздо больше, чем кто‑либо ещё. Уже до конца 2021 года они смогут создать и вывести в общий доступ восемь новых голосов. Их запишут российские знаменитости, которых отобрали сами слепые и слабовидящие.

Узнать больше

О доступности интерфейсов из первых уст | by Evgeniy Karavaev | Web Standards

Какая версия JAWS у вас сейчас установлена?

Максим: Мы используем 15 версию, установленную под Windows 7 на одном компьютере и 11 версию под Windows XP на другом.

Каким браузером удобнее пользоваться при работе со скринридером?

Ольга: В основном, Internet Explorer. Opera не озвучивается, а Chrome в большей степени графический браузер. И вот эту графику скринридеры не озвучивают. Когда я устанавливал Chrome, он у меня вообще молчал.

Мы тестировали оба скринридера на Chrome и они читали всю необходимую информацию.

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

Сегодня все основные браузеры корректно работают со скринридерами. В том числе Chrome, Opera, Internet Explorer и Firefox — прим. автора.

— А какая конкретно версия Internet Explorer у вас установлена?

Максим: Мы используем 10 версию. А ещё на нашем ноутбуке установлена лицензионная операционная система и мы не стали её обновлять до Windows 10. Причина в том, что уже привыкли к этой версии и заново переучиваться на новую слишком трудозатратно. Кстати, важная для нас проблема, связанная с современными программными продуктами. Каждый раз, когда происходит обновление до новой версии, все старые функции меняют своё местоположение и приходится заново запоминать, где они находятся. Люди вообще склонны выполнять привычные действия.

С какими проблемами вы часто сталкиваете на сайтах?

Максим: Основная проблема — это графика, которую скринридеры не воспроизводят. Например есть графическая иконка без подписи и мне абсолютно непонятно, что она означает. На портале ТУСУРа, чтобы войти в личный кабинет нужно кликнуть на графическое изображение этой ссылки без каких-либо буквенных пояснений. Я с трудом нашёл эту иконку методом тыка. Ещё большой проблемой для слабовидящих, работающих без присутствия зрячих являются капчи, где для обеспечения безопасности пользователю необходимо ввести код с картинки в специальное поле. Раньше был сервис «Web of Visio» куда можно было отправлять отсканированную капчу и результат сразу копировался в буфер обмена. С его помощью работа с капчами была возможна, хоть и не всегда — сильно зашумленные картинки могли не распознаваться.

Ольга: Ещё мы сталкиваемся со сложностями при работе с выпадающими списками. Например, когда нужно выбрать правильную дату рождения, скринридер не озвучивает пункты списка и нет никакой возможности по нему ориентироваться. Помимо этого, большим неудобством может стать автоматическое обновление страницы, при котором фокус скринридера меняет своё местоположение. Бывает сложно сориентироваться когда ты выполняешь какую-то деятельность в одной точке страницы, а потом внезапно фокус переносится в другую. Могу добавить, что для слабовидящих очень важно иметь специальную навигацию на странице, иначе очень усложняется работа с сайтом. Например в социальной сети «Одноклассники» на страницах вообще нет заголовков. Чтобы дойти до нужной части страницы — необходимо пройти курсором всю страницу, это требует много времени.

Максим: Я часто сталкиваюсь с некорректным воспроизведением таблиц, расположенных на страницах сайта. Скринридер читает таблицу по HTML-коду: сначала название столбцов, потом в этом же порядке ячейки в строках. Например, при чтении таблицы с расписанием пар в университете сперва читаются все дни недели и только потом все пары. Непонятно, что к чему относится. Нужно это учитывать при помещении таблиц на страницу сайта.

Функция чтения экрана (Screen Reader)

ВАЖНО: Данная статья распространяется только на определенные изделия или операционные системы:

Изделия: Обратитесь к разделу Применимые изделия и категории (Applicable Products and Categories) данной статьи.
Операционные системы: Android™ 8.0 Oreo™

Функция Screen reader позволяет озвучивать информацию на телевизионном экране, например, справочник программ и экран настройки, для людей с плохим зрением.
Для использования функции чтения экрана необходимо соединение с сетью Интернет.

Существует два способа включения или отключения функции Screen reader.

Клавишная команда
Нажмите и удерживайте кнопку MUTING на пульте дистанционного управления телевизора в течение трех секунд; будет активирована или деактивирована функция Screen reader.
ПРИМЕЧАНИЕ: По умолчанию для данной функции Accessibility shortcut установлена настройка Screen reader. Данная клавишная команда недоступна во время начальной настройки.
Активация функции Screen reader из Настроек (Settings)
1. Нажмите кнопку Главное (Home) на пульте дистанционного управления вашего телевизора.
2. Иконка Настройки (Settings) находится в верхнем правом углу Главного (Home) меню. Нажмите и удерживайте кнопку со стрелкой, направленной вверх, в течение приблизительно трех секунд, затем нажмите и удерживайте кнопку со стрелкой, направленной вправо, в течение приблизительно двух секунд, чтобы выбрать опцию Настройки (Settings), затем нажмите кнопку Ввод (Enter).
3. Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Специальные возможности (Accessibility), затем нажмите кнопку Ввод (Enter).
4. Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Screen reader, затем нажмите кнопку Ввод (Enter)
5. Выберите Включить (Enable) и нажмите кнопку Ввод (Enter).
6. Выберите OK и нажмите кнопку Ввод (Enter).

Изменение языка

Нажмите кнопку Главное (Home) на пульте дистанционного управления вашего телевизора.
Иконка Настройки (Settings) находится в верхнем правом углу Главного (Home) меню. Нажмите и удерживайте кнопку со стрелкой, направленной вверх, в течение приблизительно тех секунд, нажмите и удерживайте кнопку со стрелкой, направленной вправо, в течение приблизительно двух секунд для выбора опции Настройки (Settings), затем нажмите кнопку Ввод (Enter).
Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Специальные возможности (Accessibility), затем нажмите кнопку Ввод (Enter).
Нажмите кнопку со стрелкой, направленной вниз, для выбора опции Произносимый текст (Text to speech), затем нажмите кнопку Ввод (Enter).
Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Конфигурация процессора (Engine configuration), затем нажмите кнопку Ввод (Enter).
Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Язык (Language), затем нажмите кнопку Ввод (Enter).
Выберите в списке нужный язык и нажмите кнопку Ввод (Enter). Функция считывания экрана работает, когда настройка параметра Язык (Language) в Настройках (Settings) совпадает с языком, выбранным в Настройке процессора (Engine configuration).

Изменение скорости речи

Нажмите кнопку Главное (Home) на пульте дистанционного управления вашего телевизора.
Иконка Настройки (Settings) находится в верхнем правом углу Главного (Home) меню. Нажмите и удерживайте кнопку со стрелкой, направленной вверх, в течение приблизительно трех секунд, затем нажмите и удерживайте кнопку со стрелкой, направленной вправо, в течение приблизительно двух секунд для выбора опции Настройки (Settings), после чего нажмите кнопку Ввод (Enter).
Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Специальные возможности (Accessibility), затем нажмите кнопку Ввод (Enter).
Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Произносимый текст (Text to speech), затем нажмите кнопку Ввод (Enter).
Нажимайте кнопку со стрелкой, направленной вниз, для выбора опции Скорость речи (Speech rate), затем нажмите кнопку Ввод (Enter).
Выберите предпочитаемую скорость из настроек от Очень медленно (Very slow) до Самая быстрая (Fastest), и нажмите кнопку Ввод (Enter).

ПРИМЕЧАНИЯ:

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

*Android TV является товарным знаком Google LLC; Oreo является товарным знаком группы Mondelez International, Inc.

Включение функции VoiceOver и тренировка работы с ней на iPhone

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

Когда Вы касаетесь экрана или проводите пальцем, VoiceOver произносит название объекта, на который попадает Ваш палец, в том числе значков и текста. Для взаимодействия с объектом, таким как кнопка или ссылка, а также для перехода к другому объекту используйте жесты VoiceOver.

При переходе на другой экран VoiceOver воспроизводит звуковой сигнал, а затем выбирает и произносит название первого объекта на экране (обычно это объект в левом верхнем углу). Функция VoiceOver оповещает об изменении вертикальной или горизонтальной ориентации экрана и о том, что экран скоро погаснет или заблокируется. Кроме того, она активна на экране блокировки, когда Вы выводите iPhone из режима сна.

Включение и выключение VoiceOver

Важно! VoiceOver меняет набор жестов, применяемых для управления iPhone. Когда функция VoiceOver включена, необходимо использовать жесты VoiceOver для управления iPhone.

Для включения или выключения VoiceOver используйте любой из указанных ниже способов.

Изучение и тренировка жестов VoiceOver

Вы можете потренироваться выполнять жесты VoiceOver в специальном разделе. Эти действия не повлияют на iPhone и его настройки. Во время тренировки жеста функция VoiceOver описывает жест и действие, которое он выполняет.

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

Откройте «Настройки» > «Универсальный доступ» > «VoiceOver».
Включите функцию VoiceOver, коснитесь пункта «Тренировка жестов VoiceOver», а затем дважды коснитесь экрана, чтобы начать тренировку.
Потренируйтесь выполнять следующие жесты одним, двумя, тремя и четырьмя пальцами.
- Касание
- Выполнить двойное касание
- Тройное касание
- Смахивание влево, вправо, вверх и вниз
Для завершения тренировки коснитесь «Готово», затем дважды коснитесь экрана, чтобы выйти из режима тренировки.

Как создать электронный тест для слепых и слабовидящих

В конструкторе курсов iSpring Suite теперь можно создавать тесты, книги и интерактивные модули для людей с плохим зрением. Для этого не нужно делать отдельную версию материала или осваивать новый инструмент разработки – вы собираете материал в iSpring Suite, а перед публикацией просто ставите одну галочку.

Тесты, книги и интерактивности в iSpring Suite создаются в соответствии с международными рекомендациями по обеспечению доступности веб-контента WCAG 2.0.

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

Вот так выглядит неоцениваемый вопрос теста в обычном и доступном режимах:

Анкета в обычном режиме и в режиме для слепых и слабовидящих

Это сравнение двух режимов в интерактивности «Медиакаталог»:

Интерактивность в обычном режиме и в режиме для слепых и слабовидящих

А так выглядит электронная книга, опубликованная в доступном режиме:

Чем отличается доступный режим?

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

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

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

Тесты и интерактивности, которые делает iSpring Suite, отлично прочитываются самыми популярными скринридерами: JAWS, VoiceOver, NVDA.

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

Как опубликовать тест в доступном режиме?

1. Запустите редактор тестов iSpring QuizMaker отдельно, например, через меню «Пуск».

2. Создайте новый тест или откройте уже существующий. Добавляйте вопросы в режиме Данные. Информация, которую вы добавляете в режиме Слайды, не отобразится в режиме доступности.

3. Нажмите кнопку Публикация и включите «Режим доступности».

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

Как опубликовать интерактивность в доступном режиме?

1. Запустите редактор интерактивностей iSpring Visuals отдельно, например, через меню «Пуск».

2. Выберите тип интерактивности из списка и нажмите Создать интерактивность.

3. Мы выбрали тип «Медиакаталог». Вы можете выбрать любой другой тип и следовать этой же инструкции. Добавьте в шаблон свой текст и изображения и нажмите Публикация.

4. В окне публикации откройте настройки режима доступности.

5. Отметьте опцию Включить режим для слабовидящих и укажите язык интерактивности. Теперь всё готово к публикации.

Как опубликовать книгу в доступном режиме?

1. Запустите iSpring Suite, перейдите на вкладку Книги и выберите тип документа, который вы хотите преобразовать в книгу.

2. Просмотрите документ и нажмите Публикация.

3. В окне публикации кликните по ссылке Выключен в поле Режим доступности.

4. Далее отметьте Включить режим для слабовидящих и выберите язык. Скринридер будет читать текст именно на том языке, который вы выбрали.

5. Режим доступности включен, теперь нажмите Опубликовать.

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

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

Хотя для создания в iSpring Suite теста и интерактивности для слабовидящих никаких специальный действий не требуется, кое-что нужно учесть:

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

То же самое относится и к видео: не забывайте, что некоторые из ваших пользователей смогут его только прослушать.
Вопросы «Выбор области» и «Перетаскивание объектов» не будут работать в доступном режиме, а если ваш тест размещён в СДО, то там они засчитаются как неотвеченные.
Тесты, книги и интерактивности в доступном режиме работают только на десктопных устройствах.

Мы продолжаем работу над доступными тестами и курсами. Скоро в iSpring Suite появятся новые функции, которые сделают обучение людей с ограничениями по зрению ещё проще и удобнее.

Цифровой гайд — СберБанк

Доступность — качество цифровой среды, характеризующее степень её приспособленности для людей с инвалидностью.

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

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

Главные принципы доступности

Воспринимаемость

Люди должны иметь возможность воспринимать контент тем способом, который им доступен.

Понятность

Контент и интерфейс должны быть понятны всем людям, в том числе и с инвалидностью.

Управляемость

Люди должны иметь возможность взаимодействовать с интерфейсом и управлять контентом тем способом, который им доступен.

Надежность

Интерфейс должен оставаться доступным при изменении версий продукта или операционной системы.

Как не создавать барьеры

В этом гайдлайне вы найдете общие правила по доступности. Однако всегда стоит руководствоваться и здравым смыслом.

Узнай, что зависит от тебя!

Программное обеспечение для чтения с экрана / U-M Information and Technology Services

Устройства для чтения с экрана — это программы, используемые слепыми для доступа к компьютерам и мобильным устройствам. Доступ к программам чтения с экрана JAWS и NVDA можно получить с любого общедоступного компьютера с ОС Windows в университетском городке UM. Программа чтения с экрана VoiceOver встроена в операционную систему Macintosh.

Если у вас есть вопросы или вы хотите провести демонстрацию или обучение, связанное с программами чтения с экрана, свяжитесь с сотрудниками центра Knox на сайтах[email protected] или 734-647-6437.

Пользователи общедоступных компьютеров в U-M должны войти в систему перед запуском программы чтения с экрана и, возможно, потребуется отрегулировать настройки громкости. Инструкции по выполнению этого с помощью JAWS, NVDA и VoiceOver доступны в разделе Доступ к программному обеспечению чтения с экрана на сайтах Campus Computing.

Назначение считывателей экрана

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

Хотя некоторые люди с нарушением обучаемости также могут извлечь пользу из устной информации, программы, которые они обычно находят наиболее полезными, имеют другие функции.См. Разделы Read & Write Gold для Windows и Read & Write Gold для Mac.

Устройства чтения с экрана, поддерживаемые Мичиганским университетом

Программа чтения с экрана JAWS (Windows)

Производитель: Freedom Scientific

Документация доступна через меню «Справка» в JAWS.

Основные концепции JAWS

Клавиша JAWS: используется в сочетании с другими клавишами для выполнения команд. По умолчанию клавиша JAWS — это клавиша Insert , но ее можно изменить на другую клавишу.
Команды JAWS: доступны из меню справки JAWS. Чтобы получить контекстную справку, нажмите Insert + F1 .
Курсоры: JAWS имеет три основных курсора:
- ПК Курсор: по умолчанию; следует за нажатиями клавиш. Чтобы активировать это, нажмите Numpad + .
- JAWS Курсор: имитирует функции мыши. Может предоставить доступ к информации, которая не слышна при использовании курсора ПК. Чтобы активировать это, нажмите Numpad — .
- o Виртуальный курсор: автоматически активируется при просмотре веб-страницы, позволяет пользователю исследовать страницу с помощью тех же методов чтения, которые используются для стандартного текста, а также предоставляет информацию об элементах веб-страницы, таких как ссылки и заголовки.
Режим форм: используется для ввода текста в поле формы (в противном случае некоторые ключи могут быть не введены). Чтобы активировать это, нажмите , введите .
: в некоторых случаях нажатие буквы приводит к переходу к определенному веб-элементу (например, B перемещает фокус на следующую кнопку, а C — на следующее поле со списком). Вот почему необходим режим форм; в противном случае нажатие этих букв будет интерпретироваться как команда, а не как ввод текста.
Для получения подробного руководства по использованию Интернета с JAWS посетите веб-сайт «Серфинг в Интернете с помощью JAWS».

Устройство чтения с экрана NVDA (Windows)

Производитель: NVDA — это открытый проект некоммерческой организации NV Access Foundation.

Документация доступна через меню «Справка» в NVDA.

Основные концепции NVDA

Клавиша NVDA: используется в сочетании с другими клавишами для выполнения команд. По умолчанию клавиша NVDA является клавишей Insert, но ее можно изменить на клавишу Caps Lock.
Клавиша NVDA + N: активирует меню NVDA для доступа к параметрам и справке.
На веб-страницах NVDA использует режим просмотра, аналогичный виртуальному курсору ПК, используемому JAWS. Режим просмотра позволяет читать веб-страницу с помощью стандартных нажатий клавиш для чтения текста, а также предоставляет информацию о структуре веб-страницы, например. заголовки, ссылки и списки.
Режим фокусировки используется для взаимодействия с веб-формами и приложениями. Чтобы переключиться между режимами просмотра и фокусировки, нажмите Insert + Space .

Программа чтения с экрана VoiceOver (Apple)

Встроен в операционные системы Macintosh и iOS (iPhone, iPod, iPad).VoiceOver — единственное средство чтения с экрана, доступное для продуктов Apple.

Для включения или выключения: нажмите command + F5 .

Основные концепции VoiceOver

Клавиши VoiceOver (клавиши VO): клавиши Control + Option , используемые в сочетании с другими клавишами для выполнения команд.
Для доступа к меню справки Voice Over, которое включает список команд, руководство по началу работы и руководство VoiceOver: клавиши VO + H.
Voice Over использует интерактивную модель экранной навигации.Такие элементы, как панели инструментов и таблицы, представлены как единый объект, и пользователь должен взаимодействовать с помощью команды клавиатуры, чтобы просмотреть содержимое элемента.
Чтобы составить список всех элементов на экране с возможностью поиска, нажмите vo + i.
«Веб-ротор» используется для представления списков веб-элементов, таких как ссылки, заголовки и ориентиры. Его можно активировать с помощью клавиш VO + u.
Macintosh имеет меньше встроенных системных команд, чем Windows. Список системных команд Macintosh.
VoiceOver также встроен в другие продукты Apple, такие как iPhone и iPad.В этих продуктах для управления VoiceOver используется система жестов (например, однократное нажатие объявляет о прикосновении к элементу, а двукратное нажатие активирует этот элемент).

Axess Lab | Что такое программа чтения с экрана?

Основы программы чтения с экрана

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

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

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

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

Пристегните ремни безопасности — они быстрые!

Первое, что большинство людей комментирует при встрече с пользователем программы чтения с экрана, — это скорость, с которой говорит синтетический голос.Финский разработчик Туукка Ояла установил скорость 450 слов в минуту. Вот 5-секундный аудиоклип, на который это похоже:

https://axesslab.com/wp-content/uploads/2019/11/450-wpm-online-audio-converter.com_.mp3

Довольно круто, да! Для справки: наиболее зрячие люди читают со скоростью 150 слов в минуту, поэтому он может читать в 3 раза быстрее. Вам следует ознакомиться с собственной статьей Тууккаса по этой теме, где вы также найдете более длинный аудиоклип программы чтения с экрана, говорящей с молниеносной скоростью:

Разработка программного обеспечения со скоростью 450 слов в минуту

Как используются программы чтения с экрана?

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

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

Наиболее часто используемые программы чтения с экрана
Веб-браузеры
Операционные системы
Причины недоступности

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

Настольные программы чтения с экрана

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

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

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

Мобильные программы чтения с экрана

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

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

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

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

Попробуйте сами

Отличный способ узнать о программах чтения с экрана — это попробовать сами! Однако для этого нужно немного потренироваться. Роб Додсон сделал несколько отличных 7-12-минутных руководств для Mac, Windows, iPhone и Android!

Начнем с iPhone!

Переходим к Talkback для Android.

VoiceOver на MacBook.

Наконец-то NVDA для Windows!

Создание интерфейсов, удобных для чтения с экрана

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

Итак, давайте начнем с советов по удобству использования !

Делайте сенсорные цели большими

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

Ограничьте количество ссылок в баннере сайта

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

Включить ссылки для пропуска

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

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

Делайте абзацы короткими

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

Используйте много заголовков и подзаголовков

Говоря о беглом чтении, важно разделить контент на множество заголовков и подзаголовков. Пользователи программ чтения с экрана часто переходят от заголовка к заголовку. Фактически, большинство респондентов опроса пользователей программы чтения с экрана WEB Aim заявили, что переключение между заголовками — их основной способ навигации, когда они сталкиваются с длинными веб-страницами.Если заголовков слишком мало, этот метод не сработает.

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

Конечно, есть о чем подумать, когда речь идет о программах чтения с экрана и удобстве использования, но этого достаточно для этой вводной статьи. Перейдем к более техническим искусствам !

Кодируйте заголовки правильно

Чтобы пользователи программ чтения с экрана могли переключаться между заголовками, заголовки должны быть закодированы как h-элементы в соответствии со спецификациями HTML.То есть:

,

и так далее.

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

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

Программа чтения с экрана сообщит пользователю, на каком уровне находится заголовок. Поэтому не следуйте за заголовком на уровне 1 (h2) за заголовком на уровне 3 (h4).Это может сбить с толку пользователей: «Я пропустил заголовок на уровне 2?». И не делайте все заголовки на одном уровне.

Думайте об этом как об эссе, которое вы пишете в Microsoft Word. Если вы собираетесь составить оглавление, вам нужно убедиться в правильности структуры заголовков. То же самое и с веб-страницами.

Дайте изображениям альтернативный текст

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

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

Альтернативные тексты: полное руководство

Осторожно с модальными окнами

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

К счастью, есть отличные ресурсы, которые помогут вам создать доступные модальные окна. Вот два:

Доступные модальные диалоги — A11ycast (YouTube)

Создание доступного модального диалога (bitsofcode.de)

CAPTCHA’s

Не используйте их.Просто не надо.

Почему? Этой теме мы посвятили целую статью: Captcha — отстой.

Следуйте стандартам кодирования

Действительно отличный способ сделать ваш интерфейс доступным — это использовать стандартные компоненты и следовать стандартам кодирования. Например, если вы устанавливаете флажок, используйте элемент ввода с флажком типа, как и указано в стандарте HTML.

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

Научитесь тестировать с помощью программы чтения с экрана

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

Видео пользователей программ чтения с экрана в действии

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

Гейл Ярналл показывает, как работают дисплеи Брайля.

Сакиб Шейх показывает нам, как он кодирует с помощью Visual Studio и программы чтения с экрана.

Молли Берк демонстрирует все свои продукты Apple с помощью программы чтения с экрана VoiceOver:

Аарон Кэннон демонстрирует серфинг в Интернете с помощью JAWS, включая как хорошие, так и плохие примеры веб-контента.

Спасибо за чтение, и если вам нужна какая-либо поддержка по этой теме, мы проводим обучение, семинары и другие услуги по обеспечению доступности, которые могут помочь вам сделать инклюзивный скачок вперед! Свяжитесь с нами по адресу [email protected].

Если вам понравилась эта статья…

Вам также могут понравиться эти:

Получайте уведомления, когда мы пишем новые материалы

Примерно раз в месяц мы пишем статью о доступности или удобстве использования, она такая же классная, как и эта (#HumbleBrag )!

Получайте уведомления, подписавшись на нас в Twitter @AxessLab или Facebook.

Или просто напишите письмо ниже!

Настройка и использование программ чтения с экрана

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

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

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

Программа чтения с экрана обеспечивает преобразование текста в речь (TTS) для пользователя, чтобы преобразовать информацию на экране в речь, которую можно услышать через динамики, наушники или шрифт Брайля. Вот почему чрезвычайно важно использовать семантический код HTML и соответствующие атрибуты WAI-ARIA.

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

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

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

Опции для чтения с экрана

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

(OS X) VoiceOver

Компьютеры Apple поставляются со встроенной программой чтения с экрана, которая называется VoiceOver. Вы можете легко получить к нему доступ, нажав Command-F5. Если VoiceOver включен, нажатие Command-F5 отключает его.

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

Преимущество VoiceOver в том, что он уже установлен и готов к использованию на вашем компьютере Apple, а также работает с веб-сайтами.

(Windows) NVDA

NVDA (NonVisual Desktop Access) — это бесплатное средство чтения с экрана для Windows, которое позволяет слепым и слабовидящим людям пользоваться компьютерами.Он читает текст на экране компьютерным голосом.

Пользователь может легко контролировать то, что ему читают, перемещая курсор в соответствующую область текста с помощью мыши или используя стрелки на клавиатуре. NVDA дает ключ к образованию и трудоустройству для многих слепых. Он также обеспечивает доступ к социальным сетям, интернет-магазинам, банковскому делу и новостям. NVDA также может преобразовывать текст в шрифт Брайля, если у пользователя компьютера есть устройство, называемое «дисплеем Брайля». NVDA можно установить на вашем компьютере с Windows или использовать на USB-накопителе.Эта программа чтения с экрана уникальна тем, что это программа с открытым исходным кодом, а это значит, что разработчики могут вносить свой вклад в улучшение этого программного обеспечения.

(Google Chrome) ChromeVox

ChromeVox построен с использованием только веб-технологий, таких как HTML5, CSS и Javascript. ChromeVox (Classic) с самого начала разрабатывался для обеспечения беспрецедентного доступа к современным веб-приложениям, в том числе к тем, которые используют W3C ARIA (доступ к богатым интернет-приложениям) для обеспечения разнообразных возможностей рабочего стола.

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

ChromeVox можно легко добавить в браузер Chrome в качестве расширения через Интернет-магазин Chrome. После установки вы можете использовать эти сочетания клавиш. Если вы хотите изменить сочетания клавиш, просто щелкните значок расширения браузера, затем щелкните «Параметры».

Тестирование доступности

А теперь давайте проверим одну из них.

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

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

Начиная с New York Times и двигаясь вниз по списку, давайте посмотрим, как работает программа чтения с экрана.

Нью-Йорк Таймс

Щелкните по основному разделу страницы
Просмотрите и обратите внимание, что основное внимание уделяется заголовкам и комментариям
Нажмите Enter, когда попадете на комментарии
Вкладка через этот опыт

Было ли легко читать комментарии к статье или вам предложили прочитать статью в первую очередь? Как можно улучшить этот опыт?

Facebook

Прокрутите содержимое, чтобы перейти к основному разделу страницы
На клавиатуре нажмите «Alt + /».
Чтобы перейти к ленте новостей, перейдите в меню «Перейти к».

GitHub

GitHub — это платформа разработки, которая предоставляет людям инструменты, позволяющие делиться своим кодом с другими, вносить изменения в общие проекты и отслеживать все версии и изменения.

Щелкните репозиторий, чтобы перейти на его целевую страницу.
Если нет репозитория, который вы бы хотели изучить, попробуйте использовать Express, стандартную среду JavaScript, которую мы преподаем на Codecademy
Переходите по вкладке, пока не дойдете до раздела, в котором указано, сколько коммитов, веток, выпусков и участников содержится в репозитории.
Обратите внимание, как они считаются «элементами списка»
Tab еще раз, пока не увидите список используемых языков
Обратите внимание, что это считается упорядоченным списком, и каждая вкладка перечисляется по номеру

Что вы думаете об этом опыте? Не хватало ли важной информации? Есть ли что-то, что, по вашему мнению, следует рассмотреть или улучшить GitHub?

Дриббл

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

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

Что вы думаете об опыте, когда вы изменили макет? Было ли легче следить за большим макетом по сравнению сДругая?

Ваш собственный сайт

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

Заключение

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

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

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

Руководство по выживанию для настольных устройств чтения с экрана

— Основные сочетания клавиш

Сочетания клавиш и жесты программы чтения с экрана

> Руководство по выживанию в программе чтения с экрана для настольных ПК — основные сочетания клавиш

Также доступна одностраничная версия PDF для печати.

Банкноты

Insert — это клавиша-модификатор NVDA по умолчанию, но можно установить Caps Lock. как дублирующий ключ-модификатор (чтобы его можно было использовать вместо Insert).
Клавиша экранного диктора, Caps Lock (вместо нее можно использовать Insert), может быть заблокирован, поэтому его не нужно нажимать с каждой командой, нажимая Caps Lock + Z (или Insert + Z) (только если не в режиме сканирования).
VO — это сокращение от клавиш VoiceOver Control + Option. Голос за кадром клавиши можно заблокировать, чтобы их не нужно было нажимать для выполнения команд VoiceOver нажав VO +;.

Горячие клавиши

Настольные программы чтения с экрана Основные команды клавиатуры для чтения и навигации по веб-контенту
Задача	Челюсти	NVDA	Рассказчик	VoiceOver
Включите программу чтения с экрана	Нет в наличии	Control + Alt + N	Логотип Windows + Control + Enter	Command + F5
Отключить программу чтения с экрана	Вставка + F4	Вставка + Q	Логотип Windows + Control + Enter или Caps Lock + Escape	Command + F5
Прекратить чтение	Контроль	Контроль	Контроль	Контроль
Читать следующий	Стрелка вниз	Стрелка вниз	Caps Lock + стрелка вправо *	VO + стрелка вправо
Читать предыдущий товар	Стрелка вверх	Стрелка вверх	Caps Lock + стрелка влево *	VO + стрелка влево
Прочитать следующий элемент с фокусировкой (напр.грамм. ссылка, кнопка)	Выступ	Выступ	Выступ	Выступ
Активировать ссылку	Введите	Введите	Caps Lock + Enter или Enter или пробел	VO + пробел или ввод
Кнопка активации	Ввод или пробел	Ввод или пробел	Caps Lock + Enter или Enter или пробел	VO + пробел или Enter или пробел
Начать непрерывное чтение с этой точки на	Insert + стрелка вниз	Insert + стрелка вниз или Numpad Plus	Caps Lock + стрелка вниз или Caps Lock + Control + R	ВО + А
Перейти к следующему заголовку	H	H	H **	VO + Command + H
Показать список всех заголовков	Вставка + F6	Вставка + F7	Caps Lock + F6	VO + U (ротор), затем клавиши со стрелками влево / вправо
Перейти к следующему заголовку уровня [1-6]	1-6	1-6	1-6 **	Нет в наличии
Перейти к следующему ориентиру / региону	R (JAWS 16+) ; (Челюсти 15)	D	D **	Нет в наличии
Перейти к основному содержанию ориентир	Q	Нет в наличии	Caps Lock + N	Нет в наличии
Список открытых элементов или ротор	Вставка + F3	Вставка + F7	Caps Lock + [F6 или F7], затем Tab (дважды) в раскрывающийся список области	VO + U
Перейти к следующей таблице	Т	Т	Т **	VO + Command + T
Навигация по ячейкам таблицы	Control + Alt + клавиши со стрелками	Control + Alt + клавиши со стрелками	Control + Alt + клавиши со стрелками	VO + клавиши со стрелками
Перейти к следующему списку	L	L	Нет в наличии	VO + команда + X
Перейти к следующему элементу списка	я	я	Нет в наличии	Нет в наличии
Перейти к следующему рисунку	G	G	Нет в наличии	VO + команда + G
Показать список всех ссылок	Вставка + F7	Вставка + F7	Caps Lock + F7	VO + U (ротор), затем клавиши со стрелками влево / вправо
Перейти к следующей ссылке	Нет в наличии	К	К **	VO + Command + L
Перейти к следующему не посещено ссылка	U	U	Нет в наличии	Нет в наличии
Перейти к следующему посещено ссылка	В	В	Нет в наличии	VO + Command + V
Перейти к следующему элементу формы	F	F	F	VO + Command + J
Вернуться к предыдущему заголовку, ориентиру, таблице, объекту фокусировки и т. Д.: Вставка + Пробел	Режим сканирования: Caps Lock + пробел	Нет в наличии
Взаимодействовать с объектами (например, iframe, меню, области применения и т. д.)	Не применимо	Не применимо	Не применимо	VO + Shift + стрелки вниз / вверх
Переключение между: переключателями,	клавиши со стрелками	клавиши со стрелками	клавиши со стрелками	клавиши со стрелками, затем [VO + пробел или пробел]
Переключение курсора виртуального ПК	Вставка + Z	Нет в наличии	Нет в наличии	Нет в наличии

* Цикл между типами элементов с заглушками Lock + Page Up или Caps Lock + Page Down (или Caps Lock + Control + стрелка вверх или Caps Lock + Control + стрелка вниз), затем переходите по этой странице элементы по одному.Когда в элементе формы.

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

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

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

Проверьте и устраните проблемы доступности в вашем контенте

Чтобы запустить проверку читаемости, нажмите Alt + R, A, 1, A. Фокус переместится на панель Accessibility Checker в правой части экрана.
Примечание: В Microsoft Excel вместо этого нажмите Alt + R, A, Enter.
Чтобы перейти к результатам, нажмите Shift + Tab один раз. Вы услышите: «Результаты проверки», за которым следует первая категория результатов и описание категории.
Выводы делятся на категории ошибок, предупреждений, советов и интеллектуальных сервисов с рекомендациями по исправлению для каждого из них. Дополнительные сведения см. В разделе «Правила проверки читаемости».
Чтобы перейти к первой группе вопросов внутри категории, нажмите клавишу со стрелкой вниз один раз. Вы услышите тип и количество вопросов в этой группе, например «Отсутствует альтернативный текст, семь».
Чтобы развернуть группу, нажмите клавишу пробела.
Чтобы перейти к первому элементу в группе, нажмите клавишу со стрелкой вниз один раз.Вы услышите элемент с проблемой доступности и место, где его можно найти, например: «Изображение три, слайд два».
Чтобы развернуть элемент и отобразить варианты решения проблемы, нажмите клавиши ALT + СТРЕЛКА ВНИЗ. Откроется меню Рекомендуемые действия .
Чтобы просмотреть параметры в меню Рекомендуемые действия , нажимайте клавишу Стрелка вниз, пока не услышите нужное действие.Чтобы выбрать действие, нажмите клавишу пробела.
Выполните выбранное рекомендованное действие.
Например, если вы выбрали Добавить описание для отсутствующего замещающего текста, панель Альтернативный текст откроется слева от панели Проверка читаемости , и вы можете ввести описание замещающего текста для элемента.
Просмотрите все результаты проверки, перечисленные на панели Accessibility Checker .

См. Также

Правила проверки читаемости

Все, что вам нужно знать, чтобы писать эффективный замещающий текст

Центр специальных возможностей Office

Использование средства чтения с экрана в приложениях Office

Используйте средство проверки читаемости с клавиатурой и VoiceOver, встроенным средством чтения с экрана в macOS, чтобы сделать содержимое Office для Mac легким для чтения и редактирования людьми с ограниченными возможностями.

Примечания:

Новые функции Microsoft 365 постепенно предоставляются подписчикам Microsoft 365, поэтому ваше приложение может еще не иметь этих функций. Чтобы узнать, как быстрее получить новые функции, присоединяйтесь к программе предварительной оценки Office.
В этом разделе предполагается, что вы используете встроенную в macOS программу чтения с экрана VoiceOver. Чтобы узнать больше об использовании VoiceOver, перейдите в Руководство по началу работы с VoiceOver.

Проверьте и устраните проблемы доступности в вашем контенте

Нажимайте F6, пока не услышите название текущей вкладки, например «Выбрано, вкладка« Главная ».«
Нажимайте клавиши Control + Option + стрелка вправо или влево, пока не услышите «Обзор, вкладка», а затем нажмите клавишу пробел.
Нажимайте клавишу TAB, пока не услышите: «Проверить специальные возможности, флажок снят».
Чтобы запустить средство проверки читаемости, нажмите клавишу пробела.Фокус переместится на панель Accessibility Checker в правой части экрана.
Чтобы перейти к результатам, нажимайте клавишу TAB, пока не услышите слово «Таблица», а затем первая категория результатов.
Результаты делятся на ошибки, предупреждения, подсказки и интеллектуальные услуги. Дополнительные сведения см. В разделе «Правила проверки читаемости».
Чтобы перейти к первой группе вопросов внутри категории, нажмите клавишу со стрелкой вниз один раз. Вы услышите тип проблемы, например «Отсутствует альтернативный текст».
Чтобы перейти к первому элементу в группе, нажмите один раз клавиши Control + Option + стрелка вниз. Вы услышите элемент с проблемой доступности и место, где его можно найти, например: «Изображение три, слайд два.»Товар выбран на слайде.
Исправьте указанную проблему.
Чтобы вернуться к панели проверки читаемости , нажимайте F6, пока не услышите: «Панель проверки читаемости».
Просмотрите все результаты проверки, перечисленные на панели Accessibility Checker , как указано выше, и устраните проблемы.

См. Также

Правила проверки читаемости

Все, что вам нужно знать, чтобы писать эффективный замещающий текст

Центр специальных возможностей Office

Использование средства чтения с экрана в приложениях Office

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

Проверьте и устраните проблемы доступности в вашем контенте

Чтобы запустить средство проверки читаемости, нажмите клавиши ALT + клавиша с логотипом Windows + R, Q.Фокус переместится на панель Accessibility Checker в правой части экрана.
Чтобы перейти к результатам, нажмите клавишу TAB один раз. Вы услышите первую категорию результатов, например «Ошибки».
Результаты делятся на ошибки, предупреждения, подсказки и интеллектуальные услуги. Дополнительные сведения см. В разделе «Правила проверки читаемости».
Чтобы перейти к первой группе вопросов внутри категории, нажмите клавишу со стрелкой вниз один раз. Вы услышите тип проблемы, например «Отсутствует альтернативный текст».
Чтобы перейти к первому элементу в группе, нажмите клавишу со стрелкой вниз один раз. Вы услышите элемент с проблемой доступности и место, где его можно найти, например: «Изображение три, слайд два.«
Чтобы выбрать и перейти к элементу с проблемой, нажмите Enter.
Исправьте указанную проблему.
Чтобы вернуться к панели Accessibility Checker , нажмите Ctrl + F6 один раз. Вы услышите: «Веб-приложение PowerPoint, кнопка« Проверить ».«
Просмотрите все результаты проверки, перечисленные на панели Accessibility Checker , как указано выше, и устраните проблемы.
По завершении нажимайте Ctrl + F6, пока не услышите «PowerPoint для Интернета, кнопка еще раз», а затем нажмите клавишу ВВОД. Если программа проверки читаемости обнаружила новые проблемы, исправьте и их.

См. Также

Правила проверки читаемости

Все, что вам нужно знать, чтобы писать эффективный замещающий текст

Центр специальных возможностей Office

Использование средства чтения с экрана в приложениях Office

Используйте программу чтения с экрана для оценки веб-сайта

Обзор

Важно:

Эта информация предназначена для веб-разработчиков, обеспечивая целостный процесс для выполнения начального этапа оценки вашего веб-сайта на доступность.Это не заменяет выполнение полной оценки сайта с рекомендациями по обеспечению доступности веб-контента (WCAG) 2.0 AA, но выполнение этого полного процесса позволит более эффективно охватить большинство рекомендаций WCAG 2.0 AA.

Невозможно выполнить стандарты доступности веб-сайтов в Политике Закона об американцах с ограниченными возможностями (UA-02) IU, используя только автоматизированные инструменты.

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

Выберите программу чтения с экрана

Различные программы чтения с экрана ведут себя немного по-разному. У каждого есть свои комбинации клавиш. Способ объявления содержимого может отличаться от программы чтения с экрана к программе чтения с экрана. Например, некоторые программы чтения с экрана могут объявить «ссылку» перед названием ссылки, в то время как другие могут объявить «ссылку» после имени ссылки.

Общие программы чтения с экрана включают:

VoiceOver
- Поставляется со всеми устройствами MacOS и iOS
- Чаще всего работает в паре с Safari
NVDA
- Только для окон
- Чаще всего в паре с Firefox
- Бесплатно, с открытым исходным кодом
Челюсти
- Только для Windows
- Чаще всего в паре с Internet Explorer 11 или Firefox
- Цена зависит от типа лицензии
Рассказчик
- Поставляется со всеми устройствами Windows
- Совместимо только с Edge, на данный момент
TalkBack
- Доступно для некоторых продуктов Android

Комбинации программ чтения с экрана и браузера, описанные выше, широко признаны как лучшие и наиболее последовательные комбинации, хотя возможны многие другие комбинации.Например, Firefox можно использовать с VoiceOver как на настольных компьютерах, так и на мобильных устройствах, но большинство людей, использующих VoiceOver, используют его с Safari. Хотя Chrome также можно использовать на нескольких платформах и для чтения с экрана, его непоследовательность ограничивает его жизнеспособность в качестве инструмента тестирования.

Как минимум, вы должны протестировать со следующими комбинациями:

NVDA с Firefox
VoiceOver с Safari
VoiceOver на iOS

Чтобы начать работу с этими программами чтения с экрана, включая команды клавиатуры или сенсорные жесты, см .:

Оценить сайт

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

Прослушайте всю страницу от начала до конца, чтобы убедиться, что порядок элементов на странице соответствует логической последовательности, например слева направо, сверху вниз.
Используйте клавишу Tab для навигации по всем интерактивным элементам. Убедитесь, что все они доступны и работают при использовании средства чтения с экрана.
Используйте клавиши со стрелками для перемещения по странице. Клавиши со стрелками будут читать строка за строкой, читая все на странице в вашем темпе навигации.
Перемещайтесь только по ориентирам, ссылкам и заголовкам. Это можно сделать с помощью списка, например ротора VoiceOver или списка элементов NVDA, или с помощью специальных клавиш, которые позволяют перемещаться по типу элемента.
- Ориентиры должны быть идентифицируемыми. Например, если есть два навигационных ориентира, они должны быть помечены, как «Основная навигация» и «Навигация по разделам».
- Ссылки должны иметь смысл вне контекста. Назначение ссылки должно быть ясно из текста ссылки. Для краткой демонстрации просмотрите Быстрый тест доступности: текст ссылки (видео на YouTube).
- Заголовки должны создавать структуру и указывать тип содержимого на странице.

Нормальное поведение программы чтения с экрана

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

Обычно следует игнорировать нечетное произношение следующих слов:

Сокращения: Программы чтения с экрана могут попытаться ввести слово полностью, если сокращение находится в словаре программы чтения с экрана. В других случаях аббревиатура объявляется буква за буквой.Иногда программа чтения с экрана выбирает неправильное слово. Например, «W» может быть объявлено как «w», «запад» или «ватт».
Сокращения: Программы чтения с экрана могут объявлять аббревиатуру букву за буквой или пытаться произнести ее. Слова, которые кажутся аббревиатурами, например, слова, написанные заглавными буквами, также могут рассматриваться как аббревиатуры.
Электронная почта: Программы чтения с экрана могут произносить это так, как это видно на экране. Например, «кто-то@somewhere.com» может читаться как «кто-то где-то в точке com».Имейте в виду, что некоторые программы чтения с экрана могут читать это иначе.
Адреса: Программы чтения с экрана могут объявлять числовую часть адреса, например «9998 West Rd», как «девять тысяч девятьсот девяносто восемь West Road».
Номера телефонов: Программы чтения с экрана могут указывать их как отдельные числа. Например, 812-999-9999 может быть объявлен как «восемьсот двенадцать тире девятьсот девяносто девять тире девять тысяч девятьсот девяносто девять».
Даты: Программы чтения с экрана могут попытаться произнести такие даты, как 20 августа 2018 г., как «восемь косых черт, двадцатых, две тысячи восемнадцати».

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

Области, требующие особого внимания

Элементы формы

Обратите особое внимание на формы.

Программа чтения с экрана должна озвучивать все элементы формы.
Метка формы должна объявляться при вводе каждого поля формы.
Метки формы должны быть четкими, описывать назначение поля и ожидаемое форматирование.
Убедитесь, что каждое поле формы можно заполнить с помощью средства чтения с экрана.

Обязательные поля формы должны быть объявлены. Если звездочка (*) — единственный метод, используемый для обозначения обязательных полей формы, символ должен быть включен в метку и определен в начале формы.

Многие программы чтения с экрана переключаются в режим форм при обнаружении форм. Элементы, не являющиеся элементами формы, игнорируются программами чтения с экрана в режиме форм и не объявляются.Обратите внимание на любой текст в форме, который не объявлен.

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

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

Столы

Таблицы данных должны иметь имена. Имя таблицы идентифицирует таблицу.

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

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

Аккордеоны

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

Ресурсы по аккордеону:

Карусели и слайд-шоу

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

Обратите внимание на любые прерывания, например:

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

Проверьте элементы управления карусели. Элементы управления должны работать с программой чтения с экрана.Передовые методы работы с каруселью включают:

и кнопки
Кнопки навигации
Фокус на выбранном элементе
и кнопка
Пауза при наведении курсора мыши и фокусе клавиатуры

Ресурсы карусели:

Изображения

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

Подробнее см. Альтернативный текст для изображений.

Предупреждения, ошибки, всплывающие окна

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

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

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

Следующий шаг: Цветовой контраст
Предыдущий шаг: Автоматизированные инструменты
Вернуться к индексу: Выполните проверку доступности на своем веб-сайте

Получить помощь

Компьютерные считыватели экранов | Видение Австралии. Услуги по защите слепых и слабовидящих

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

Система чтения с экрана для использования с компьютером, например Microsoft Windows или Apple Mac, состоит из синтезатора голоса и программы чтения с экрана.

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

Некоторые общие функции программ чтения с экрана включают возможность:

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

Microsoft Windows XP, Vista и 7 включают в себя очень простую программу чтения с экрана, которая будет считывать вам части экрана. Однако из-за ряда ограничений этой функции она не особенно полезна для полностью слепого человека. В этом случае вам все равно потребуется специальный экранный ридер для использования с компьютерной системой.

Mac OS X v10.5 Leopard и более поздние версии ОС от Apple включают полнофункциональную программу чтения с экрана, известную как VoiceOver. Он предоставляет широкий спектр функций.К ним относятся высокоскоростной высококачественный голос, поддержка plug-and-play для обновляемых дисплеев Брайля, международная языковая поддержка, интерактивное встроенное руководство и NumPad Commander, который упрощает навигацию для новых владельцев Mac, которые ранее использовали Программы чтения с экрана Windows.

Помимо использования голосового синтезатора, многие программы чтения с экрана также предназначены для работы с электронными или обновляемыми дисплеями Брайля.

Демонстрационные версии программ чтения с экрана и информацию о синтезаторах голоса можно загрузить из Интернета.

Обычные программы чтения с экрана

Обратите внимание — кроме VoiceOver для Mac, все остальные перечисленные программы чтения с экрана предназначены для Microsoft Windows.

Vision Australia в основном рекомендует программы чтения с экрана JAWS и Window Eyes для рабочих мест и не может поручиться за другие программы чтения с экрана в этих средах.

Скринридер: что такое скринридер | Сайт для Слепых

HTML: Хорошая основа для доступности — Изучение веб-разработки

Текстовый контент

Использование понятного языка

Вёрстка

Элементы интерфейса

Добавление доступности с клавиатуры

Содержательные текстовые метки

Другие механизмы альтернативного текста

Пустые атрибуты alt

7 технологий, которые помогают незрячим людям каждый день

1. Скринридер

2. Речевой синтезатор

3. Голосовое управление

4. Голосовой набор

5. Навигатор

6. Распознаватель предметов

7. Тифлокомментирование

О доступности интерфейсов из первых уст | by Evgeniy Karavaev | Web Standards

Функция чтения экрана (Screen Reader)

Включение функции VoiceOver и тренировка работы с ней на iPhone

Включение и выключение VoiceOver

Изучение и тренировка жестов VoiceOver

Как создать электронный тест для слепых и слабовидящих

Чем отличается доступный режим?

Как опубликовать тест в доступном режиме?

Как опубликовать интерактивность в доступном режиме?

Как опубликовать книгу в доступном режиме?

Цифровой гайд — СберБанк

Главные принципы доступности

Как не создавать барьеры

Программное обеспечение для чтения с экрана / U-M Information and Technology Services

Назначение считывателей экрана

Устройства чтения с экрана, поддерживаемые Мичиганским университетом

Программа чтения с экрана JAWS (Windows)

Основные концепции JAWS

Устройство чтения с экрана NVDA (Windows)

Основные концепции NVDA

Программа чтения с экрана VoiceOver (Apple)

Основные концепции VoiceOver

Axess Lab | Что такое программа чтения с экрана?

Основы программы чтения с экрана

Пристегните ремни безопасности — они быстрые!

Как используются программы чтения с экрана?

Настольные программы чтения с экрана

Мобильные программы чтения с экрана

Попробуйте сами

Создание интерфейсов, удобных для чтения с экрана

Делайте сенсорные цели большими

Ограничьте количество ссылок в баннере сайта

Включить ссылки для пропуска

Делайте абзацы короткими

Используйте много заголовков и подзаголовков

Кодируйте заголовки правильно

,

и так далее.

Дайте изображениям альтернативный текст

Осторожно с модальными окнами

CAPTCHA’s

Следуйте стандартам кодирования

Научитесь тестировать с помощью программы чтения с экрана

Видео пользователей программ чтения с экрана в действии

Если вам понравилась эта статья…

Получайте уведомления, когда мы пишем новые материалы

Настройка и использование программ чтения с экрана

Опции для чтения с экрана

(OS X) VoiceOver

(Windows) NVDA

(Google Chrome) ChromeVox

Тестирование доступности

Нью-Йорк Таймс

Facebook

GitHub

Дриббл

Ваш собственный сайт

Заключение

— Основные сочетания клавиш

Рекомендуемые браузеры

Банкноты

Горячие клавиши