社内マークアップ部: 「ステップ」

投稿
最終更新

勤務先でときどき開催されているマークアップ部に出席せよとのお達しが出たので参加することになりました。活動目的や過去開催分の内容は木達さんの覚え書きにあるので省略。

今回のお題は「ステップ」。フォームの「入力」→「確認」→「完了」のような流れで、フォームページの上部に置かれることのあるフローを表したやつです。

オリジナル画像
「ステップ」のWF

私のマークアップはこんな感じ。

<form action="DUMMY" method="post">
  <ol class="step">
    <li><button type="submit" name="DUMMY" value="1" formnovalidate="">お客様情報入力</button></li>
    <li class="current">お支払い方法の設定</li>
    <li>確認</li>
    <li>完了</li>
  </ol>
</form>
  • ステップは順序に意味があるので、ol要素で。
  • 「現在地より前には戻れる」「現在地以降には進めない」と仮定して、「お客様情報入力」のみボタンを設定。
  • 入力フォームに戻る場合、その画面（お客様情報入力）で入力した値を保持した状態で戻るのが望ましいので、a要素によるリンクではなく送信ボタンにした（実際は hidden に入力値なりセッションIDを持っておく想定）。
  • 同じ理由で全体をform要素で囲った。
  • button要素の type="submit" はHTML仕様上は省略可能だが、IE7以下のデフォルトが button(msdn.microsoft.com)なため明記しておく。
  • どのボタンが押されたのかサーバーサイドで把握できるようにするため、button要素にはname属性とvalue属性を設定。
  • value属性はなくても良いが、省略した場合button要素の中身を値として送信してしまうブラウザが存在するので一応付けた。
  • 前画面へ戻る際は、当該ページ（お支払い方法の設定）に存在するであろう必須入力欄などのバリデーションを行う必要はないため、formnovalidate属性を設定。

2014年2月22日追記以下、開催後の追記です。

チーム内で話し合った結果、最終的にこうなりました。

<form action="DUMMY" method="post">
  <ol class="step">
    <li><button type="submit" name="DUMMY" value="1" formnovalidate="">お客様情報入力</button></li>
    <li><em class="current">お支払い方法の設定</em></li>
    <li>確認</li>
    <li>完了</li>
  </ol>
</form>

変更点としては、現在地表示をem要素で示したことです。

元々の私の案では、li要素の class="current" だけで区別をしていました。別チームを含め多くの方がem要素またはb要素を使っていましたが[1]、私があえてそれらの要素を入れなかったのはこういう理由です。

  • CSS無効環境で斜体や太字で表示され区別できる面はあるが、実際にスタイルがあたらないケースはRSS/Atomフィード全文配信など限られた環境であり、また非視覚環境ではスクリーンリーダーが声質を変えて喋ってくれるという例も聞かず、そこまでのメリットが感じられない。
  • 「お支払い方法の<em>設定</em>」のように、文中の一部を強調する目的でこれらの要素を使う場合、現在地として全体をemで囲うと強調部分の区別がつかなくなりかえってデメリットになる可能性もある[2]。

とはいえ、「ステップ」で示されるような単語あるいは短い文言だと、一部のみを強調することもあまりないでしょうから、他の方の意見を取り入れてem要素を含めました。

その際 class="current" をどの要素に付けるか、すなわち

<li class="current"><em>お支払い方法の設定</em></li>

にするか

<li><em class="current">お支払い方法の設定</em></li>

かという点での議論も行いました。

これについては、たとえば i要素の仕様(W3C)には何のためにその要素を使っているのかを識別するためにclass属性を付ける（ことができる）という記述がありますが、同様に単なる強調でしかないem要素に「現在地」という意味付けをするならそれにクラスを設定したほうが良いのではないか、ということで後者を採用しました。

ただし、スタイルを当てるにあたっては親であるli要素から区別できたほうが都合が良いことから、実際はそちらにクラス名を書くことが多いでしょうね（両方に書いてもいいと思いますけど）。

脚注