Начиная со статьи Стива о примерах ARIA Toggle Button и Tri-state Checkbox , мы предоставим больше примеров того, как использовать роли и состояния ARIA на практике. Как отметил Стив, ARIA (Accessible Rich Internet Applications) неуклонно получает большую поддержку со стороны всех основных браузеров, теперь, когда Internet Explorer, Opera и Safari находятся на борту. Наша цель — показать, насколько простым может быть добавление ARIA.
В этой статье я приведу пример роли слайдера .
Примечание: этот пост является первым в серии из трех. Здесь я расскажу об основной разметке, необходимой для добавления информации ARIA в виджет слайдера. Во втором посте основное внимание будет уделено дополнительным факторам доступности, которые необходимо учитывать при создании слайдеров (таким как фокусировка, масштабируемость и прогрессивное улучшение). Наконец, третий пост покажет, как использовать два слайдера для создания двойных (ранжированных) слайдеров.
Базовый пример слайдера ARIA
[Img_assist | NID = 3711 | название = | убывание = | ссылка = нет | Align = нет | ширина = 300 | высота = 104]
Чтобы увидеть рабочий пример слайдера ARIA, посмотрите пример слайдера ARIA .
Этот пример содержит простой макет для виджета-слайдера управления громкостью, состоящий из a divэлемента и buttonэлемента. Значение слайдера находится в диапазоне от 0 до 100%. Обратите внимание, что для упрощения примера и его ориентации на ARIA, функциональность этого слайдера была очень простой. Более подробные и сложные примеры будут представлены в моем следующем посте. Остальная часть текущей статьи будет обсуждать связанные с ARIA особенности этого примера.
Применение роли и где
Чтобы вспомогательный элемент интерпретировал элемент как слайдер, необходимо добавить атрибут ‘role’ со значением ‘slider’.
Итак, где вы должны применить эту роль? Ползунки обычно состоят из двух базовых компонентов: рельса и большого пальца . Пользователь может изменить значение ползунка, перетаскивая большой палец через направляющую (или используя клавиатуру для его перемещения). Однако, что касается ARIA, вам действительно нужен только один элемент для создания слайдера. Это может быть элемент большого пальца или рельс. Элемент, который вы предоставляете с ролью ползунка, также является элементом, который должен быть доступен с клавиатуры (это означает, что он должен быть частью порядка табуляции и иметь назначенные обработчики событий для изменения значения ползунка).
Например, если мы решим дать ползунку атрибут роли, вы можете пометить его, используя следующий код:
<div class="sliderRail">
<button class="sliderThumb" role="slider"></button>
</div>
Если бы мы использовали элемент рельса, роль была бы размещена на внешнем элементе. Важно отметить, что для того, чтобы быть доступным с клавиатуры, на самом деле только один элемент должен быть частью порядка табуляции. Размещение большого пальца и рельса в порядке вкладок излишне загромождает их. В следующем посте я расскажу о клавиатуре и сфокусируюсь на вопросах более подробно.
маркировка и описание
Как и все элементы управления формой, ползунки должны распознаваться пользователями. Чтобы пометить слайдер, вы можете выбрать один из следующих подходов:
- Используйте свойство ‘aria-labelledby ‘, чтобы указать на идентификатор элемента, содержащего имя слайдера.
- Используйте HTML-атрибут title, чтобы указать имя.
- Используйте HTML-элемент label, а его атрибут for указывает на элемент слайдера.
Все подходы приводят к тому, что текст подвергается вспомогательной технологии. Однако, поскольку мы не только нацеливаемся на программы чтения с экрана, всегда требуется иметь визуальную метку рядом с элементом управления, чего нельзя достичь, используя только атрибут title.
Одна вещь, которую я заметил, заключается в том, что при использовании изображения или элемента ввода изображения в качестве слайдера, его (обязательное) значение ‘alt’ будет неправильно отображаться как имя слайдера, независимо от указанных значений ‘aria-labelledby’ или ‘title’. Кроме того, бета-версия IE8 неправильно отображает атрибут src изображения как значение ползунка, а не указанное значение aria-valuenow. К сожалению, это усложняет обслуживание пользователей, которые не «готовы к ARIA», так как вы можете использовать атрибут alt для указания дополнительной информации, которую пропускают пользователи. Например, элемент управления вводом изображения, помеченный как ползунок ARIA, может иметь следующий заданный альтернативный текст: «громкость, 40 из 100%». Этот текст затем будет читаться программами чтения с экрана и браузерами, не поддерживающими ARIA, что делает слайдер как минимум более читабельным.Поскольку ARIA заставляет роль «ползунка» переопределять роль «кнопки», обычно предоставляемую элементом управления вводом типа изображения, вы также можете ожидать, что значение «alt» будет переопределено выбранным методом маркировки.
Штаты и свойства
Для виджета-слайдера требуются следующие свойства ARIA:
- ария-valuenow
Текущее значение слайдера.
- Aria-значение-мин
Минимум диапазона значений
- Aria-значение-макс
Максимум диапазона значений
Кроме того, вы можете использовать свойство ‘aria-value-text ‘, которое предоставляет вспомогательные технологии более читабельному значению для человека. Например, вместо того, чтобы просто установить для свойства aria-valuenow ползунка значение 50, свойство aria-valuetext может иметь значение «50 долларов». Это свойство также крайне важно для слайдеров, которые имеют нечисловые значения, которые будут обсуждаться в моем следующем посте.
Как и для всех элементов управления ARIA, вы можете указать общее свойство ‘aria-descriptionby ‘, чтобы оно указывало на элемент, содержащий более подробную информацию, такую как любые ограничения, которые может иметь ползунок.
Пример кода ниже показывает полную разметку ползунка ARIA:
<p id="sliderDescription">Use the arrow keys to change the value.</p>
<div class="sliderRail">
<button class="sliderThumb" role="slider" title="Volume" aria-describedby="sliderDescription" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" aria-valuetext="20 percent" ></button>
</div>
Служба поддержки
В настоящее время роль слайдера правильно отображается в Firefox 1.5 и выше, а также в бета-версии Internet Explorer 8. Текст aria-valuetext должным образом поддерживается Firefox 3. Я не смог подтвердить, поддерживается ли ARIA в бета-версии Opera 9.5, поэтому если кто-то может рассказать мне больше об этом, я хотел бы услышать это.
Ниже приведен список часто используемых вспомогательных технологий, доступных для Windows:
- Версии JAWS с 7.1 по 9.0 распознают роль ползунка и изменение значения, но неверно объявляют каждое значение в процентах (например,
800%
). Кроме того, при использовании свойства ‘aria-valuetext’ JAWS будет считывать значение только в том случае, если это значение фактически начинается с числа. В противном случае он просто объявит 0%. Например, установка aria-valuetext в «9am» приведет к тому, что JAWS объявит «9 процентов», но значение «aria-valuetext» для «morning» не будет распознано. - Window Eyes 5.5 и 6.1 Правильно объявляют правильное изменение как роли, так и значения, включая значения, установленные с помощью ‘aria-valuetext’.
- NVDA также правильно объявляет роль и значение при ее изменении.
- Zoomtext 9.1 объявляет ползунок как «пользовательский элемент управления», но правильно воспринимает указанное значение. Однако значение объявляется только тогда, когда ползунок получает фокус, а не когда значение фактически изменяется. Кроме того, Zoomtext не объявляет описания, установленные с помощью «aria-descriptionby».