Основы доступности

Альтернативный контент

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

Одной из групп пользователей с ограниченными возможностями, для которой может быть не обязательна поддержка текстовой альтернативы, являются люди с ограниченными познавательными возможностями. Трудность поддержки людей с ограниченными познавательными возможностями состоит в том, что они часто требуют другого контента, а не тот же контент в другой среде представления. Это не означает, что вы не должны пытаться что-то сделать. Упрощение языка и терминологии, используемых на сайте, будет на пользу всем. Такие группы как Plain Language Commission (Комиссия простого языка) (http://www.clearest.co.uk/) пропагандируют подход на основе "простой речи" к материалам, которые компании используют для информирования своих заказчиков о таких вопросах, как юридические требования и условия и требования для использования. Они предоставляют лексикон простого английского языка (http://www.clearest.co.uk/?id=46), содержащий термины, которые можно использовать, чтобы облегчить эффективную коммуникацию, используя самый простой возможный язык.

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

Интересным произведением искусства является работа Микеланджело "Сотворение Адама" 
<img src="images/adam.jpg" alt="Изображение мужчины тянущего вверх руку, 
чтобы коснуться руки Бога, тянущейся вниз. Она потрескалась от возраста." longdesc="adam.html" >.</p>

Изображение в этом примере является интегральной частью контента. Атрибут alt содержит краткое описание изображения для людей (или поисковых систем), которые могут не видеть изображение правильно. Атрибут longdesc позволяет соединиться со страницей HTML, содержащей полное описание изображения. Он обычно используется только для описания сложных изображений, которые используются как основной контент. Он также пока плохо поддерживается в браузерах. Большую часть времени можно будет использовать только атрибут alt.

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

В случае чисто декоративных изображений, т.е. изображений, используемых для отслеживания рекламы, или любого другого изображения, которое вряд ли могли бы заинтересовать пользователя или служить для взаимодействия, необходимо задать атрибут alt пустым. Это означает не пропуск атрибута, а задание в виде alt ="". Это связано с тем, что тактические считыватели экрана обычно помогают своим пользователям справиться с плохо доступными страницами. Когда изображение не имеет атрибута alt, особенно когда оно является частью ссылки, считыватель экрана читает пользователю URL изображения. Это делается для того, чтобы можно было по URL догадаться, что из себя представляет изображение, например, если изображение называется add_to_cart.gif (добавить_в_корзину.gif). Поэтому нужно задавать alt =" " для изображений, которые, как вы знаете, не заинтересуют пользователя, чтобы считыватель экрана не читал URL такого изображения, что может быть достаточно утомительно для пользователя считывателя экрана.

Не все формы контента являются такими простыми, как изображение. Многие сложные информационные среды, такие как Flash (файлы Flash сами могут быть целыми Web -сайтами) или фильмы, требуют более сложных описаний. Самые последние версии Flash позволяют предоставить текстовую альтернативу для объектов в фильмах Flash, также как в HTML.

Определение взаимодействия

Большая часть современной Web активно использует кроме HTML дополнительные технологии. Даже что-то базовое, такое как CSS, можно использовать таким образом, что сделает страницу или взаимодействие значительно менее доступными. Ключевым моментом доступности во взаимодействии является начало с простейших взаимодействий и использование их как строительных блоков более сложных взаимодействий.

Отметим, что задача этого примера - заставить вас подумать о роли, которую играют различные объекты на Web -странице. Чтобы обеспечить их доступность, они должны быть семантически содержательны как с позиции использованных элементов HTML, так и использованной визуальной метафоры. Если вы считаете это слишком запутанным, то перечитайте пример несколько раз, и рассмотрите несколько меню и других компонентов Web -страницы, думая при этом не только о том, что используется правильный код HTML, но также о том, что удачное представление компонента имеет смысл с точки зрения его функции. Вы вряд ли будете ожидать, что посетитель Web -страницы для поиска будет использовать текстовое поле помеченное " введите свой адрес e-mail, чтобы подписаться на эту рассылку ", и также не будете ожидать, что зрячий посетитель сможет найти интересующий его контент, если все заголовки будут оформлены также как обычный текст (аналогично, вы не будете ожидать, что слепой пользователь найдет интересующий его контент, если все "заголовки" будут, на самом деле, просто параграфами, которые сделаны крупнее с помощью CSS или элементов font ).

Хорошим примером этого является широко используемая визуальная метафора вкладок. Метафора вкладки создана на основе архивных папок, индексированных по теме. Это было перенесено на компьютеры, чтобы позволить одной области на экране выводить информацию по различным темам, представленным вкладками, соединенными с этой областью - можно видеть хороший пример использования вкладок на сайте http://dev.opera.com — посмотрите на них вверху страницы. До сих пор все это достаточно просто. Проблема лежит в технологиях, используемых для создания вкладок — они часто реализуются с помощью JavaScript.

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

<div class="tabcontrol">
  <div class="hd">
    <ul>
      <li><a href="#dogs" class="selected">Dogs</a></li>
      <li><a href="#cats">Cats</a></li>
      <li><a href="#fish">Fish</a></li>
    </ul>
  </div>
  <div class="bd">
    <p id="dogs" class="selected">Some information about dogs. 
      The dogs tab is the default tab.</p>
    <p id="cats">Some information about cats.</p>
    <p id="fish">Some information about fish.</p>
  </div>
</div>

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

Такая структура прекрасно подходит для информационного контента. В этом примере будет использоваться class со значением selected для указания, какая вкладка является активной, т.е. вкладкой, которая открыта и показывает свою информацию; другие вкладки будут закрыты (т.е. их параграфы скрыты), пока не будут выполнен щелчок на соответствующих им ссылках. Вкладка dogs является используемой по умолчанию активной вкладкой, как показано на рис. 25.1.

Рис. 25.1. Простой элемент управления вкладками показывает вкладку dogs, по умолчанию, активной

Когда будет сделан щелчок на другой ссылке (как показано на рис. 25.2), затем будет использоваться JavaScript для динамического перемещения class="selected" в эту ссылку, и в этом случае стилевое оформление будет применяться для вывода к этой вкладке, а та, которая выводилась раньше, будет скрыта.

Рис. 25.2. Теперь был сделан щелчок на другой ссылке, и соответствующая ей вкладка становится активной

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

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

<div class="tabcontrol">
  <div class="hd">
    <ul>
      <li><a href="#dogs" class="selected">Dogs</a></li>
      <li><a href="#cats">Cats</a></li>
      <li><a href="#fish">Fish</a></li>
    </ul>
  </div>
  <div class="bd">
    <form id="dogs" class="selected" action="search.html" method="GET"><div><label for="dogsearch">
<input type="text" name="dogsearch" id="dogsearch">
<input type="submit" value="Search for Dogs"></div></form>
    <form id="cats" action="search.html" method="GET"><div><label for="catsearch">
<input type="text" name="catsearch" id="catsearch">
<input type="submit" value="Search for cats"></div></form>
    <form id="fish" action="search.html" method="GET"><div><label for="fishsearch">
<input type="text" name="fishsearch" id="fishsearch">
<input type="submit" value="Search for fish"></div></form>
  </div>
</div>

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

<form action="search.html" method="GET">
  <fieldset>
    <legend>Search within:</legend>
      <ul>
        <li><label for="dogs">Dogs</label><input id="dogs" type="radio" name="animal" value="dog" checked></li>
        <li><label for="cats">Cats</label><input id="cats" type="radio" name="animal" value="cat"></li>
        <li><label for="fish">Fish</label><input id="fish" type="radio" name="animal" value="fish"></li>
      </ul>
    </fieldset>
  <input type="text" id="searchfield" name="search">
  <input type="submit" value="Search">
</form>

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

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