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

Question

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

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

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

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

<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>

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

Другая проблема заключается в том, что, например, отображается как индикатор выполнения в 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>

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

Answer 1

Согласно 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, возможно, имеет больше смысла в контексте интерактивного виджета, когда нет другого понятного человеку описания его состояния.Хотя я могу ошибаться.