お問い合わせボックスのマークアップ

2014年11月26日著

お問い合わせボックスのワイヤーフレーム

本日、勤務先で第4回のマークアップ部が開催されました。お題は「お問い合わせボックス」。まぁ、確かにそこかしこでよく見かけるモジュールではあります（ちなみに前回は7月のローカルナビ）。今回のお題で最も判断が分かれるだろうと思ったのが、電話番号の上に並ぶ語呂（「コールミツエー」）の部分。個人的には、そこを各グループがどうマークアップしてくるか？というのが楽しみでした。以下は、自分の考えたマークアップ例：

<section class="inquiry" itemscope itemtype="http://schema.org/Corporation">
<h2>お問い合わせ先</h2>
<p>ご不明な点がございましたら、下記カスタマーセンターまでお問い合わせください。</p>
<dl>
<dt>電話</dt>
<dd class="tel"><b itemprop="telephone">0120-506-328</b> <strong>(通話料無料)</strong> <span class="wordplay"><span class="former">コール</span><span class="latter">ミツエー</span><span class="description">と覚えてください。</span></span>
<div class="opening_hours">
受付時間
<dl>
<dt>平日</dt>
<dd>10:00〜18:00</dd>
<dt>土日祝</dt>
<dd>10:00〜16:00</dd>
</dl>
</div>
</dd>
<dt>E-mail</dt>
<dd><a href="mailto:xxx@mail.co.jp" itemprop="email">xxx@mail.co.jp</a></dd>
</dl>
<div itemprop="legalName">株式会社ミツエーリンクス</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="postalCode">〒160-6133</span> <span itemprop="addressRegion">東京都</span><span itemprop="addressLocality">新宿区</span><span itemprop="streetAddress">西新宿8丁目17番1号</span> 住友不動産新宿グランドタワー33階</div>
<div itemprop="employee">担当：田中、佐藤</div>
</section>

以下は、上記の私案に対する簡単な解説というか思考のプロセスというか：

このお問い合わせ先モジュールはサイト内の他のページでも登場し得るものとして、使いまわしやすいよう全体を単一のセクション（ section.inquiry ）として構成。
先頭のお問い合わせ先はレベル2の見出しとしてマークアップ。ページ全体の内容を短く言い表す最も重要な見出しがレベル1だとして、それに次ぐ重要度と仮定。
ご不明な点がございましたら、で始まる一文は、段落としてマークアップ。
「電話」「E-mail」の各ラベルとそれぞれに対応した内容は、dl/dt/dd要素としてマークアップ。
電話番号を含むdd要素に class="tel" を指定しているのは、あくまで見た目の調整用（ :first-child とか使えないし）。
電話番号のところは、印刷時や制作者CSS無効時でも視認・区別しやすいようb要素でマークアップ。
(通話料無料)は、強調の意図を込めてstrong要素でマークアップ。
語呂については、順番的に電話番号より後ろに持ってきつつ（レイアウトについては絶対配置で処理する想定）全体を span.wordplay で括り、それだけでは何が何だかわからないだろう（数字と文字が上下に並んでいる前提があって初めてそれが語呂だと分かるわけで、それが成り立たない前提では何かしら補足が必要では）......ということで、勝手に末尾に「と覚えてください。」を追加（ span.description ）。
span.description はCSSで画面上からは隠す（けれど音声読み上げ環境では読み上げられるよう実装する）想定。ユーザーのためのテキストであるからして、SEO的にバンされないことを期待。
span.description のなかを span.former と span.latter で分けているのは、単に見た目の調整用。電話番号と語呂は文字サイズが違うから、数字とそれに呼応した文字を綺麗に上下に並べるのはちょっと面倒かもだけど（試したらやっぱり面倒）。
受付時間は全体を div.opening_hours でくくって、中はdl/dt/dd要素で。見た目的には中身全部 display:inline; な感じ。
会社名、住所、担当者のところは、まんまデザイン通りにdivで括りつつ分割。
最後にマイクロデータで意味付けを強化。使ったのアイテムタイプは http://schema.org/Corporation と http://schema.org/PostalAddress の2通り。構造化データテストツールで試した限り、一応意図した通りに構造化データを抽出できるぽい。

以下、蛇足というか補足。構造化データの埋め込みには、ひねくれてマイクロデータではなくmicroformats2でも使おうかとも思ったけれど、そこは素直にschema.org（謎）。あと、語呂のところにひょっとするとruby要素とか使うグループが出てくるかなと思ったけれど、自分の方針としては語呂は語呂であってルビに非ず、でマークアップ。余談だけれど、電話番号の文字列のところに余計なマークアップを挟むと、iOSの電話番号への自動リンクがおかしくなる（文字列全体が <a href="tel:〜"> で括られなくなる）のを知っていたから、それを嫌ったという側面もあり。まぁその自動リンクについてどう考えるかは、もう少し前提条件を膨らませる必要があるけれど（ <meta name="format-detection" content="telephone=no"> で自動リンクを禁止しているかどうかとか）。

各グループの発表を聞き終えての感想

time要素、使うべきでした。加えて、その辺りのマイクロデータも。
やはりruby要素を使うかどうかで判断分かれましたね。使わないほうが少数派。
アウトラインアルゴリズム、FirefoxとJAWSの組み合わせならいけるというお話は初耳でした。
句点で終わらないとp要素じゃないとかいうわけではなく......まぁそれに近い認識はありますが......宗教みたいな感じで。
自分の案、「〒」って <span itemprop="postalCode"> に含めるべきではなかったか。