Как разметить сложный индикатор состояния в HTML5?

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

введите здесь описание изображения

Учитывая новый тег progress в HTML моей первой мыслью было сделать что-то вроде этого:

<progress value="2" max="3">
    <ul>
        <li>Beginning</li>
        <li class="now">Right now</li>
        <li>End</li>
    </ul>
</progress>

... но поскольку ‹progress› принимает только фразовое содержимое с использованием списка, на самом деле это не вариант. Так что прямо сейчас я бы, вероятно, пошел с чем-то вроде этого, интегрировав прогрессбар-роль:

<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
    <li id="state1">Beginning</li>
    <li id="state2" class="now">Right now</li>
    <li id="state3">End</li>
</ul>

Но опять же, я не совсем уверен, можно ли таким образом применить роль индикатора прогресса к списку.

Другая проблема заключается в том, что «прогресс» отображается, например, как индикатор выполнения в Opera, поэтому «прогресс» сам по себе, вероятно, не совсем жизнеспособное решение :-(

Может ли кто-нибудь порекомендовать доступную строку состояния, которая не использует только одно изображение?

Текущее решение

Пока я буду использовать следующую разметку:

<section class="progress">
    <h1 class="supportive">Your current progress</h1>
    <ol>
        <li><span class="supportive">Completed step:</span> Login</li>
        <li class="now"><span class="supportive">Current step:</span> Right now</li>
        <li><span class="supportive">Future step:</span> End</li>
    </ol>
</section>

Все элементы класса «поддерживающие» будут располагаться за пределами экрана. ИМО, таким образом, у нас должен быть хороший компромисс семантической разметки (на мой взгляд, последовательность состояний - это действительно упорядоченный список ;-)) и доступности благодаря дополнительному заголовку и тексту состояния для каждого шага.


html accessibility wai-aria
person Horst Gutmann    schedule 01.06.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Согласно whatwg, вы не должны назначать progressbar роль <ul> элементам.

Я бы просто отбросил <ul> и описал прогресс, используя (неожиданно) фразовое содержание:

<section role="status">
    <h2>Task Progress</h2>
    <p>You're now at <progress value=2 max=3>"Right now" step</progress>.
</section>

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

Однако я признаю, что это не полный ответ на ваш вопрос.

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

person Anton Strogonoff    schedule 01.06.2011
comment
Так что в основном вы просто разметите текущее состояние, используя progress. Звучит как план для меня. Спасибо :-) Суть дополнительного aria-valuetext заключалась в том, что я хотел предоставить вывод на естественном языке для текущего состояния, а не только числовое значение, которое будет выдавать valuenow. Я попытаюсь перефразировать исходный вопрос и предоставить несколько каркасов, чтобы лучше продемонстрировать мою настоящую проблему :-) - person Horst Gutmann; 01.06.2011
comment
Да, я думаю, что эта разметка лучше с точки зрения доступности. Те индикаторы прогресса, которые так часто встречаются в мастерах (взгляните, например, на процесс оформления заказа на Amazon), хорошо выглядят на экранах, но полагаю они звучат ерундой для тех, кто их не видит. (Кстати, Amazon использует даже не список, а обычное изображение — по одному для каждого шага. Также может подойти, избавит вас от большого количества разметки, и вы можете просто поместить текст состояния в alt.) - person Anton Strogonoff; 01.06.2011
comment
ОК, спасибо :-) В моем случае решение с чистым изображением не сработает (из-за проблем с обслуживанием), но теперь я уверен, что благодаря вашему вкладу я найду подходящее решение :-) - person Horst Gutmann; 01.06.2011
comment
Нет проблем =) Что касается aria-valuetext, я вижу цель, но разве вывод на естественном языке уже не предоставлен в удобной для пользователя форме li.now, на который ссылается aria-describedby? Хотя я не специалист в этой области; возможно, такая избыточность полезна для программ чтения с экрана. - person Anton Strogonoff; 01.06.2011
comment
Я не очень уверен, что aria-describedby действительно делает это, поэтому я также добавил valuetext :-) Проблема с ‹progress› в целом заключается в том, что он автоматически отображается как индикатор выполнения в Opera (что было немного неожиданно). Я должен признать :-)). Учитывая, что я должен снова открыть этот вопрос, извините :-) - person Horst Gutmann; 01.06.2011
comment
Вы правы, я обновил пост. Задача интересная, надеюсь будут ответы получше. - person Anton Strogonoff; 01.06.2011
comment
После вашего последнего обновления я убежден, что мы уже на правильном пути :-) Я обновлю свой исходный пост решением, которое буду использовать сейчас. Извините за игру в пинг-понг с вашими баллами ;-) - person Horst Gutmann; 01.06.2011