MarkupCafe Tokyo Vol.2のお題について考えてみた

- by konitter

1019(土)にて東京で行われたイベント「MarkupCafe Tokyo Vol.2」で出されたお題について、自分ならどうマークアップするかを考えてみました。
当日参加された方々のコードは、以下のページから参照できます。

お題1 「ページネーション」

MarkupCafe Tokyo Vol.2 お題1 「ページネーション」 #html5j - jsdo.it

このお題は、他の2つと比べても特に人によってマークアップの違いが出やすいUIの一つな気がします。マークアップするうえでのポイントを挙げてみます。

  • UI自体を何の要素でくくるか
    • 上記レポートにもあるnavを使うという意見については、確かにメインコンテンツにより近い「主要な」ナビゲーション(となるケースが多い)とも取れるので、それもアリな気もするけど、まだ自分の中で消化しきれてない
  • リンクの羅列はリストか
    • ulではなくol、というパターンについては1つの長い記事などを複数のページに分けるような場合だと、そのページの順番に意味があるので、それもアリだと思う
    • ただし、ブログのインデックスとかただの記事一覧みたいな場合だと、ページ順にそれほど意味があるとは思えないので、その場合olがふさわしいとは思えない
    • あと、「…」で間をとばすような感じのパターンの場合、olだとハマらない気がする
    • また、リストではなくspanを並べるってのもありそうだけど、個人的にナシ。単純に好き嫌いの範疇かも。パンくずリストのマークアップみたいな
  • 「前へ」「次へ」なリンクを分離するかどうか
    • ページ番号のリンクと分けて別の要素にするという人もいるようだけど、別の要素を使うこと自体にメリットは感じられない
    • ただ、「次へ」をコード上で最後ではなく「前へ」のすぐ後ろに持ってくるについては、正直言ってわからない。音声読み上げの支援技術ユーザーへの配慮だと思うんだけど、実際そうしてくれた方が嬉しい、とかいう意見があるのかな。あるならそうした方がいいんかも

他にも、1ページ目の時の「前へ」と最後のページの時の「次へ」をどうするか、カレントページの番号をどうするか(どんなクラス名を付けるか)などなどありますが、長くなりそうなのでこの辺で。

お題2 「予約フォーム」

MarkupCafe Tokyo Vol.2 お題2 「予約フォーム」 #html5j - jsdo.it

このお題に限らずですが、フォームのマークアップは、どこまでセマンティックに(マシンリーダブルな形で)表現するかってところで違いが出てくる内容だと思います。

  • フォーム部分のレイアウト
    • このお題画像の見た目で時間制限がある中では、素直にtableを使うでいい
    • 実際の案件でマルチデバイス云々みたいな場合だと、無理ではないけれどもtableじゃない方がやりやすいってのはあると思う。状況によりけりで
    • あと、ラベルとフォーム要素は上下に配置した方が視線の移動が少なくなって良い、みたいな話もあるけど、全てのフォームがそうできるわけじゃないので、それも状況によりけりでいいと思う
  • 必須のアスタリスク
    • フォームのデザインにおいて「必須」を表すのにアスタリスク(もしくは米印などのマーク)を使うこと、また必須であることをフォーム要素の後ろで表すのは(・A・)イクナイ!!ので、そもそもお題として相応しいかどうか
  • 必須項目の表現方法
    • 音声読み上げのことを考慮すると、アスタリスクだけではダメなので、aria-labelrequiredrequiredに対応していない環境に配慮してaria-required="true"を付けた
    • 音声読み上げ周りの最新の情報として要・不要なものがあるかもだけど、その辺の話はよくわからない。ぜひそっち系に詳しい方のマークアップが見てみたい

(半角英字)みたいな注釈的なものがフォーム要素の上とか下にあった場合、フォーム要素に単位が付いている場合、あと最近では多くなってきているラベルをプレースホルダーとして使うとか、他にもパターンは色々ありますけど、フォームのマークアップというのは経験がものをいう部分だとも言えると思います。

お題3 「財務諸表」

MarkupCafe Tokyo Vol.2 お題3 「財務諸表」 #html5j - jsdo.it

このお題ならもう見たままコーディングで問題ないはず。当のイベントでは各チーム似たような感じだったのも当然といえば当然。これといったポイントもナシで。

tableなんか使わない、tableが許されるのは小学生までだよねって人もいるかもしれないけど、そんなの十分変態だし通報レベルなので注意が必要です。

まとめ

ざっと調べたところ、このイベントやお題に対して意見を表明している人がいなさそうなのですが、この辺のマークアップなネタについては一家言ある、という人が自分の周りにはたくさんいるので、そういった方々がどう書くか非常に興味があります。|д゚)チラッ