Проектирование специальных возможностей с применением HTML5

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

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

Четыре основные области, которым вы должны уделить внимание:

• проблемы со слухом;
• проблемы с подвижностью суставов;
• когнитивные расстройства;
• проблемы со зрением.

Проблемы со слухом означают, что пользователь может не слышать любые звуки на веб-сайте. Решение — сделать контент понятным с применением текстовой альтернативы для всего нетекстового контента, например обычные субтитры и скрытые субтитры для глухих (closed captions). По возможности, включайте письменные расшифровки речи и сурдоперевод.

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

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

Проблемы со зрением могут варьироваться от неспособности различать цвета до полной слепоты. Решение — сделать контент таким, чтобы его могли надежно интерпретировать пользовательские агенты и чтобы он был доступен для программных или аппаратных средств чтения с экрана (далее «читатели экрана»). Используйте семантический HTML и придерживайтесь стандартов. Применяйте семантически корректный HTML и проверяйте свои страницы. Используйте атрибут lang и теги abbr везде, где это возможно.

Короче говоря, чтобы контент для Web был доступен людям с ограниченными возможностями, он должен быть легко воспринимаемым, функциональным и надежным. Все это охватывается W3C-моделью POUR, которая требует, чтобы вся информация и UI-элементы представлялись пользователям в доступном их органам чувств виде, чтобы у них был некий способ работы с UI, чтобы у них была возможность понимать информацию и то, как пользоваться интерфейсными элементами, и чтобы контент был достаточно надежен для доступа разнообразных пользовательских агентов, включая средства доступа к специальным возможностям (assistive technologies, AT).

Теперь, когда вы понимаете основы специальных возможностей, рассмотрим две особенно важные концепции, относящиеся к проектированию соответствующих веб-сайтов: прогрессивное улучшение (progressive enhancement) и полнофункциональные интернет-приложения для лиц с ограниченными возможностями (accessible rich Internet applications, ARIA).

Прогрессивное улучшение и ARIA

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

Семантический HTML подразумевает, что HTML-теги на странице описывают контент с точки зрения их смысла, а не представления. Любая информация об украшении контента должна выноситься в CSS-файл, а логика и поведение веб-страницы на клиентской стороне должны добавляться через связываемый извне JavaScript-код после загрузки страницы, а также разбора и применения таблицы стилей. Прогрессивное улучшение гарантирует: если в JavaScript-файле возникает какая-то ошибка, страница все равно загрузится с корректными стилями. А если игнорируется CSS-файл (например, читателем экрана), HTML-страница по-прежнему сохранит весь контент.

Все современные операционные системы имеют свои API специальных возможностей, каждый из которых является набором открытых методов и интерфейсов, предоставляемых браузером для чтения и разбора текста. Версия Microsoft — это Microsoft Active Accessibility (MSAA), часть UI Automation (UIA) для Windows; в Linux есть IAccessible2, в Apple опирается на Mac OS X Accessibility Protocol, но все они следуют стандарту ARIA, определенному W3C (bit.ly/OlD4lX). На рис. 1 показано, как пользователь может взаимодействовать с веб-страницей для лиц с ограниченными физическими возможностями (accessible Web page) через такое AT-устройство, как читатель экрана. Такие устройства обращаются к веб-страницам через API специальных возможностей.

Рис. 1. Как пользователь обращается к веб-странице через средства доступа к специальным возможностям

ARIA является частью W3C-стандарта Web Accessibility Initiative (WAI) и определяет способ, который делает веб-контент и приложения более широко поддерживающими специальные возможности. ARIA применяется для улучшения поддержки специальных возможностей динамическим контентом и сложными UI-элементами, разработанными на основе HTML, CSS, JavaScript, AJAX и связанных с ними технологий. ARIA теперь является частью спецификации HTML5 и встроен в популярные библиотеки JavaScript вроде JQuery, Dojo и YUI. Более подробные сведения см. по ссылке bit.ly/b89BEJ.

ARIA использует набор ролей, состояний и свойств, чтобы предоставлять веб-страницу API специальных возможностей. Эти роли, состояния и свойства назначаются элементам страницы, которые предоставляются AT-средствам. Большинство современных AT-средств, в том числе JAWS, NVDA и VoiceOver, поддерживает ARIA. Давайте подробнее рассмотрим ARIA.

Роли в ARIA

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

Атрибуты ролей ARIA применяются к HTML-элементам так:

<div role="XXX"> </div>

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

Здесь «XXX» — это значение, зависящее от типа HTML-элемента и его роли на странице. Оно может принимать ряд значений (например, form, navigation, search или article) на основе представляемого им контента. Существует три типа ролей:

• роли-ориентиры (landmark roles) действуют как реперные точки навигации;
• структурные роли определяют структуру документа и помогают организовывать контент;
• роли-виджеты (widget roles) состоят из автономных UI-виджетов, а также композитных виджетов, которые являются контейнерами для двух и более автономных виджетов.

В табл. 1 перечислены все значения ролей в ARIA. Всего в ARIA имеется восемь ролей-ориентиров, 18 структурных ролей, 25 автономных и девять композитных виджет-ролей. Более подробные сведения см. по ссылке bit.ly/S0HUvi.

Табл. 1. Значения ролей ARIA

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

Состояния в ARIA

Состояние в ARIA — это динамическое свойство HTML-элемента, которое представляет данные, связанные с объектом, но не влияет на фундаментальную природу этого элемента. Существует два типа состояний в ARIA: глобальный и виджет (табл. 2). Глобальные состояния могут применяться к любому элементу независимо от назначенной ему роли. Состояния виджетов — это атрибуты UI-виджетов, требующих взаимодействия с пользователем.

Табл. 2. Состояния и свойства в ARIA

Ниже показан атрибут aria-hidden:

<div aria-hidden="true">
  <p>Paragraph text here </p>
</div>

Этот код скрывает данный абзац от читателя экрана.

Свойства в ARIA

Свойства в ARIA аналогичны состояниям, но относительно статичны на странице и действуют как дополнительные свойства HTML-элемента. Свойства виджетов аналогичны состояниям виджетов, но их значения не изменяются в области видимости страницы. Существует 11 глобальных свойств и 14 свойств виджетов (табл. 2).

Вот пример свойства виджета aria-required:

<label for="username">User name:</label>
<input id="username" type="text" aria-required="true">

Это делает элемент input формы обязательным.

В табл. 2 суммированы все состояния и свойства в ARIA. Детали см. по ссылке bit.ly/OlbLeh.

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

Создание веб-сайта для лиц с ограниченными физическими возможностями

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

1. Главная страница (Home):
   • область заголовка с эмблемой;
   • навигационное меню;
   • основная графика;
   • основной контент;
   • блоки информации.
2. Форма Contact.
3. Страница FAQ.
4. Страница About с видео.

На рис. 2 показана базовая структура сайта, который я собираюсь создать.

Рис. 2. Карта сайта для примера веб-сайта

На рис. 3 приведена типичная разметка главной страницы для сайта какого-либо продукта или сервиса. Чтобы создать ее, сначала я воспользуюсь HTML5 с прогрессивным улучшением, а затем сделаю ее доступной AT-средствам.

Рис. 3. Стандартная разметка главной страницы

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

Следуя принципам прогрессивного улучшения, я создаю последующую HTML5-страницу для размещения этих элементов, используя <header>, <nav>, <figure>, <article>, <section>, <aside> и <footer>, как показано на рис. 4.

Рис. 4. Главная страница HTML5

<!doctype html>
<html lang="en">
<head><title>HTML5 Home Page</title></head>
<body>
  <header><!-- заголовок -->
  <a href="/"><img src="images/logo.png"></a>
  </header>
<nav><!-- навигация -->
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="/faq">FAQ</a></li>
  <li><a href="/about">About</a></li>
</ul>
</nav>
<div><!-- основной контент -->
<section>
  <figure><img src="images/maingraphics.png">
  <figcaption>Welcome image. More help on image<a href="#/">Help</a></figcaption>
  </figure>
</section>
<section>
  <h2><a href="Action" target="_blank">Subscribe</a></h2>
  <article>
  <h2>Welcome!</h2>
  <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  </article>
</section>
</div>
<aside><!-- информационные блоки -->
  <h4>Promotion</h4><ul><li>items</li></ul>
  <h4>Awards</h4><ul><li>items</li></ul>
  <h4>News</h4><ul><li>items</li></ul>
</aside>
<footer><!-- нижний заголовок -->
  <div>Copyright © 2012</div>
  <div><a href="">Privacy Policy</div>
</footer>
</body>
</html>

Этот код поддерживается большинством современных браузеров, а любой неподдерживаемый HTML5-элемент переключается на исходный <div>. Например, если элемент <header> не поддерживается, браузер подставит вместо него такой <div>:

<header><!-- заголовок -->
<a href="/"><img src="images/logo.png"></a>
</header>
<div><!-- заголовок -->
<a href="/"><img src="images/logo.png"></a>
</div>

Чтобы AT-средства могли распознавать навигационные ориентиры и структурные части документа, я добавляю следующие роли к каждому элементу (рис. 5):

• header role=banner
• nav role=navigation
• maincontent role=main
• section role=region
• article role=article
• aside role=complementary
• footer role=contentinfo

Рис. 5. Добавление ролей

<!doctype html>
<html lang="en">
<head><title> Accessible HTML5 Home Page</title></head>
<body>
  <header role="banner"><!-- заголовок -->
  <a href="/"><img src="images/logo.png"></a>
  </header>
<nav role="navigation"><!-- навигация -->
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="/faq">FAQ</a></li>
  <li><a href="/about">About</a></li>
 </ul>
</nav>
<div id="maincontent" role="main"><!-- основной контент -->
<section>
 <figure><img src="images/maingraphics.png">
 <figcaption>Welcome image. More help on image<a href="#/">Help</a></figcaption>
 </figure>
</section>
<section role="region">
  <h2><a href="Action" target="_blank">Subscribe</a></h2>
  <article role="article">
  <h2>Welcome!</h2>
  <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  </article>
</section>
</div>
<aside role="complementary"><!-- информационные блоки -->
  <h4>Promotion</h4><ul><li>items</li></ul>
  <h4>Awards</h4><ul><li>items</li></ul>
  <h4>News</h4><ul><li>items</li></ul>
</aside>
<footer role="contentinfo"><!-- нижний заголовок -->
  <div>Copyright © 2012</div>
  <div><a href="">Privacy Policy</div>
</footer>
</body>
</html>

Чтобы применять стили для всех браузеров, сначала переведите все HTML5-элементы на уровень блоков в таблице стилей:

<style>
header,footer,nav,article,aside,section,figure,figcaption{display:block;}
</style>

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

<style>
  header[role="banner"]{/* стили для баннера */}
  header{/* стили для других заголовков */}
  #maincontent[role="main"]{/* стили для основного контента */}
  nav[role="navigation"]{/* стили для навигации */}
  section[role="group"]{/* стили для раздела */}
  article[role="article"]{/* стили для статьи */}
  aside[role="complementary"]{/* стили для информационных блоков */}
  footer[role="contentinfo"]{/* стили */}
</style>

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

<footer role="contentinfo"><!-- ><!-- нижний заголовок -->
  <div>Copyright © 2012</div>
  <div><a href="">Privacy Policy</div>
</footer>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

Создание формы Contact для лиц с ограниченными возможностями

Формы являются неотъемлемой частью веб-взаимодействия, и в HTML5 имеется целый ряд новых типов input и атрибутов, которые помогают реализовать специальные возможности. В табл. 3 перечислены эти типы и атрибуты, относящиеся к HTML5-формам.

Табл. 3. Типы и атрибуты input для формы

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

Также важно использовать правильный тип input. Это повышает удобство использования устройств, поддерживающих этот атрибут. Например, input type=number позволяет вывести цифровую клавиатуру для мобильных устройств, а input type=url отображает специальную кнопку «.com» на виртуальной клавиатуре многих смартфонов.

Атрибут for используется в label наряду с атрибутом id в элементе input:

<label for="useremail">Your E-mail:</label>
<input id="useremail" name="useremail" type="email" value=""/>

Это сопоставляет label с элементом input на вспомогательном устройстве (assistive device). Вы могли бы сделать то же самое более описательным способом, используя атрибут aria-describedby. Например, если у вас есть какой-то текст подсказок для каждого поля ввода, вы можете связать его с текстом input:

<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>

Следующий шаг — добавление HTML5-атрибутов placeholder и required (с aria-required="true"). Атрибут placeholder позволяет показывать, как должен выглядеть правильный ввод, а required делает поле ввода обязательным:

<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" placeholder="john@msn.com" required
aria-required="true" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>

Заметьте, что placeholder не является label. И учтите: если вы используете символ звездочки с текстом, указывая на то, что данное поле обязательное, эта звездочка считывается читателями экрана с каждым полем, что ухудшает возможности для лиц с плохим зрением. Вместо этого используйте атрибут aria-required, сообщающий AT-устройству, что данное поле обязательное, а вместо звездочки — фоновый цвет или изображение, помогающее пользователю понять, что это поле требует обязательного заполнения.

Вы также можете добавить атрибут autofocus, который автоматически устанавливает фокус ввода на первый элемент формы.

На рис. 6 показан код, создающий HTML5-форму Contact, а на рис. 7 — сама форма Contact.

Рис. 6. Создание HTML5-формы Contact

<div id="contact" role="main"><!-- основной контент -->
  <!-- контент -->
    <section id="content">
      <article>
        <h2>Contact <span>Form</span></h2>
        <form id="contacts-form" action="" method="post">
          <fieldset>
            <div class="field">
              <label for="name" >Name </label>
              <input id="name" placeholder="John Smith" autofocus required
                aria-required="true" type="text" value="" />
            </div>
            <div class="field">
              <label for="email">E-mail</label>
              <input id="email" placeholder="john@msn.com" type="email" required
                aria-required="true" value=""/>
            </div>
            <div class="field">
              <label for="website">Website</label>
              <input id="website" placeholder="http://website.com"
                type="url" />
            </div>
            <div class="field">
              <label for="message">Message</label>
              <textarea id="message"
                placeholder="Write your message Here!" required
                aria-required="true" ></textarea>
            </div>
            <div><a href="#" onclick="submit()">Send Your Message!</a></div>
          </fieldset>
        </form>
      </article>
    </section>
</div>

Рис. 7. Страница с формой Contact в браузере

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

Обновления могут быть затруднительными для людей с ограниченными возможностями, но активные области (live regions) позволяют подсказывать вспомогательным устройствам о наличии обновлений, если вы применяете атрибут aria-live наряду с role-атрибутами status, log и alert:

• aria-live="off" — обновления не объявляются (область не является активной);
• aria-live="polite" — обновления объявляются в простое;
• aria-live="assertive" — более высокий приоритет, но обновления не обязательно объявляются немедленно;
• role="log", role="status" и role="alert" для сообщений различных типов.

Вот простой способ интеграции этого в HTML-код:

<div id="liveregion" role="log" aria-live="polite">

Теперь рассмотрим страницу FAQ с контентом, поддерживающим специальные возможности.

Создание страницы FAQ с изображениями для лиц с ограниченными возможностями

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

<i>italics</i>

вы пишете:

<em>emphasized</em>
  <cite>citation</cite>

а вместо:

<b>bold</b>

используете:

<strong>strong</strong>

Заметьте, что эти элементы добавляют смысл контенту и по-разному интерпретируются разными читателями экрана. Например, некоторые читатели экрана будут изменять тональность речи, встретив элемент <strong>, но не станут делать этого для элементов <b>.

Также важно корректно использовать заголовочные элементы, относящиеся к title, такие как <h1>, <h2> и др. В идеале, вы должны использовать один заголовок <h1> на странице и несколько подзаголовков, если это нужно. Убедитесь, что у каждого HTML-элемента есть парный закрывающий тег. Кроме того, обязательно закрывайте все списки Ordered и Unordered. Стандартная практика предполагает написание всех тегов буквами нижнего регистра и их корректное вложение. Пример приведен на рис. 8.

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

Рис. 8. Разметка для страницы FAQ

<h1>FAQ</h1>
  <h2>List of frequently asked questions</h2>
    <ul>
    <li><a href="#q1">Accessible Text</a></li>
    <li><a href="#q2">Accessible Tables</a></li>
    <li><a href="#q3">Accessible Links</a></li>
    <li><a href="#q4">Accessible Images</a></li>
    <li><a href="#q5">Accessible Titles</a></li>
    </ul>
  <h2 id="q1">Accessible Text</h2>
    <h3>Semantic HTML</h3>
    <h3>Proper hierarchy</h3>
    <h3>Localized content</h3>
    <h3>Acronym</h3>
    <h3>Font-size</h3>
    <h3>Color</h3>
  <h2 id="q2">Accessible Table</h2>
  <h2 id="q3">Accessible Links</h2>
  <h2 id="q4">Accessible Images</h2>
  <h2 id="q5">Accessible Titles</h2>

Чтобы создать локализованный контент, задайте язык страницы через атрибут lang в глобальном элементе <html>:

<html lang="en">

Для контента на другом языке используйте lang с элементами <p> или <span>, например:

<p><span lang="la">Carpe diem </span>(seize the day)</p>

А для аббревиатур применяйте тег abbr:

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.</p>

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

• процентная доля (%);
• em (относительно размеру заглавной буквы «M»);
• ex (относительно размеру заглавной буквы «X»);
• ключевые слова (small, medium, large, smaller, larger и т. д.).

Вот пример:

font-size:100%;
  line-height:1.125em;

Цвет должен использоваться как визуальная помощь в восприятии контента, и его не следует применять как единственное средство представления информации. Высокий цветовой контраст между фоном и текстом важен для того, чтобы страница была доступна людям с ограниченными возможностями. W3C рекомендует коэффициент контрастности от 4,5 до 1 для обычного текста и от 3 до 1 для более крупного текста.

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

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

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:100%;
  line-height:1.125em;
  background-color:#212222;
  color:#242424;
}

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

• <caption> — шапка таблицы;
• <details> — показывает дополнительные сведения, которые пользователь может скрывать или делать видимыми;
• <summary> — объявляется до того, как читатель экрана начинает считывать реальные табличные данные;
• <thead> — строка заголовка в таблице;
• <tfoot> — строка нижнего заголовка в таблице.

На рис. 9 показан код для примера HTML-таблицы, доступной AT-средствам.

Рис. 9. Таблица, доступная AT-средствам

<h4>Table with Caption, Summary and Details</h4>
<table>
  <caption>
    <strong>Lorem Ipsum.</strong>
    <details>
      <summary>Help</summary>
      <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and </p>
     </details>
  </caption>
  <thead>
    <tr>
      <th>Table header column 1</th>
      <th>Table header column 2</th>
      <th>Table header column 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table footer column 1</td>
      <td>Table footer column 2</td>
      <td>Table footer column 3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table data column 1</td>
      <td>Table data column 2</td>
      <td>Table data column 3</td>
    </tr>
  </tbody>
</table>

При создании ссылок избегайте использования универсальных «click here» и «see more». Указывайте атрибут title и осмысленный текст. Вот корректный способ добавления ссылок:

<p>Designandmethod.com has an article on accessibility. See the <a title="click for more information at the Design & Method Web site" href="http://designandmethod.com">Big picture at Design and Method</a></p>

Будьте осторожны в использовании ASCII-символов. При наличии множества страниц избегайте включения символов «>» и «<» для перехода вперед и назад к следующему набору элементов. Вместо этого вставляйте ясный текст, например «Next 10 items» и «Previous 10 items». Заметьте, что использование символа «>» может показаться логичным в иерархической навигации (breadcrumb navigation), но, к сожалению, читатели экрана считывают «Next >>» как «Next, greater than, greater than», что вовсе не то, что вы хотели бы. Используйте фоновое изображение в CSS, если ваш дизайн требует наличия символа «>».

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

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

{
  text-decoration: underline;
  display:block;
  border-bottom:1px solid #000;
}

Чтобы сделать изображения доступными людям с ограниченными возможностями, начните с описательного атрибута alt и используйте пустой alt (alt="") для декоративных изображений. Не забудьте включить атрибут title — он появляется как всплывающая подсказка и проверяется читателями экрана в отсутствие атрибута alt. Не найдя ни alt, ни title, AT-устройство объявит название изображения, поэтому всегда присваивайте изображениям описательные названия.

Используйте role=presentation для изображения или любого другого элемента, нерелевантного для AT-устройств. Если вы включаете карты изображений, указывайте alt для каждой области. Вы также можете использовать для изображений теги figure и figcaption. Количество анимационных изображений сводите к минимуму; они могут вызывать приступы у эпилептиков.

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

<figure><img src="images/maingraphics.png" alt="Example screen shot" title="main graphics showing screenshot example"><figcaption>Image with caption.</figcaption></figure>

Вот код для карты изображений:

<area shape=rect coords=0,0,10,10 href="example.htm" alt="example">

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

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

<a href="#q1"><!--How to make content Accessible-->Accessible Content</a>
<a href="#q2"><!--How to make links Accessible-->Accessible Links</a>
<a href="#q3"><!--How to make images Accessible-->Accessible Image</a>
<a href="#q4"><!--How to make titles Accessible-->Accessible Titles</a>

Теперь кратко рассмотрим добавление страницы About на веб-сайт с поддержкой специальных возможностей — такой, который содержит аудио- и видеоконтент.

Страница About с аудио- и видеоконтентом

Допустим, я хочу, чтобы на моей странице About был видеоролик, поясняющий, для чего был создан мой веб-сайт. Теги <audio> и <video> в HTML5 упрощают встраивание мультимедийного контента в веб-страницу, но создают проблемы с доступом к контенту глухим, слабослышащим, слепым и тем, для кого данный язык не является родным или кто просто сломал колонки либо находится в сильно зашумленной среде. Существуют специальные правила, которых следует придерживаться в каждом из этих случаев. Вот некоторые способы сделать аудио- и видеоконтент понятным людям с ограниченными возможностями:

• включайте текстовые расшифровки аудио- и видеозаписей в формате HTML;
• включайте альтернативный контент для браузеров, не поддерживающих media-теги;
• среди элементов управления должна быть, как минимум, кнопка On/Off (включения/выключения);
• воспроизведение медиа не должно запускаться автоматически — только по команде пользователя;
• предоставляйте ссылку для скачивания медийного файла;
• позаботьтесь о субтитрах, используя видео- или звуковую дорожку.

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

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

• WebVTT — для ввода специальных субтитров в видеоконтент;
• SMPTE-TT — формат текста с метками времени для обычных субтитров;
• SRT — для файлов субтитров.

Заметьте, что работа над поддержкой специальных возможностей тегом video все еще продолжается, но вот пример:

<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<track src="en.vtt" kind="subtitles" srclang="en"
label="English p subtitles" default/>
<track src="en.ttml" kind="captions" srclang="en"
label="English p captions" default/>
</video>

Хотя детального контроля над воспроизведением нет, HTML5 предлагает атрибут controls, который отображает элементы управления для элемента media. Эти элементы управления доступны и с клавиатуры:

• пробел переключает между воспроизведением и паузой;
• стрелки влево или вправо перематывает видео вперед или назад на 5 секунд при каждом нажатии;
• CTRL+стрелка влево или вправо перематывает видео вперед или назад на 60 секунд;
• HOME+стрелка влево или вправо позволяет перейти в начало или конец видеоролика;
• если в фокусе ввода находится кнопка громкости, то нажатие стрелки вверх или вниз увеличивает или уменьшает громкость.

Поддержка специальных возможностей в Visual Studio 2012

Вы обрадуетесь, узнав, что Visual Studio 2012 упрощает поддержку специальных возможностей. Теперь IntelliSense поддерживает ARIA-роли, атрибуты и свойства в HTML-элементах, как показано на рис. 10 и 11.

Рис. 10. IntelliSense поддерживает ARIA-роли в Visual Studio 2012

Рис. 11. ARIA-свойства, поддерживаемые IntelliSense

Создав веб-страницу со специальными возможностями, вы захотите проверить ее, чтобы убедиться в том, что она действительно отвечает соответствующим требованиям. С помощью Visual Studio 2012 для этого достаточно щелкнуть страницу правой кнопкой мыши и выбрать Check Accessibility (рис. 12).

Рис. 12. Вы можете проверять специальные возможности веб-страницы в Visual Studio 2012

Затем вы выбираете уровень Web Content Accessibility Guidelines, или WCAG, соответствие которому вы хотите проверить: Priority 1 или Priority 2 (см. bit.ly/S0Nb66). Кроме того, возможна проверка на соответствие Access Board Section 508, который относится к стандартам, определенным правительством США в разделе 508 закона о реабилитации инвалидов (section508.gov). После выбора правил Visual Studio 2012 проверяет все HTML-элементы и показывает детальный отчет о любых ошибках или предупреждениях, связанных с данной страницей (рис. 13).

Рис. 13. Отчет по Web Content Accessibility в Visual Studio 2012

Все современные операционные системы имеют свои API специальных возможностей

Теперь вы знаете, как создать веб-сайт с поддержкой специальных возможностей, используя HTML5, и увидели, чем могут помочь в этом деле некоторые средства Visual Studio 2012.