[不定期連載] 山本和泉の「izuizuのアクセシビリティ100本ノック」
2本目：中華屋にあったPOPのマークアップを考える

こんにちは。
やってまいりました「izuizuのアクセシビリティ100本ノック！」2本目。
今回は、とある中華屋さんで見つけた「空芯菜のガーリック炒め」のPOPのようなレイアウトをアクセシブルにコーディングするには？ということにチャレンジしてみたいと思います。

こんな感じのレイアウトでした。

記載されている内容は以下の通りです。
------------
2段組のレイアウトで、左エリアに商品写真がどーんと幅を利かせています。
右エリアに上から4つの情報があります。

• 旬のオススメ
• 空芯菜のガーリック炒め
• 本場の野菜も強火でシャキシャキ、季節の中華の王道です。ビールのお供にも最高です！
• 980円

------------

私は以下のようなマークアップを考えてみました。

<p>旬のオススメ</p>
<h1>空芯菜のガーリック炒め</h1>
<p>本場の野菜も強火でシャキシャキ、季節の中華の王道です。ビールのお供にも最高です！</p>
<p>980円</p>
<p><img src="img/kushinsai.jpg"  alt="空芯菜のガーリック炒めの写真"/></p>

ブラウザーで見てみる

今回、空芯菜の写真はがっつりコンテンツなんじゃないかなって思ったので、背景画像にせずに<img>で記述しました。そして、この写真は左エリアにあるので一番最初に記述したくなったのですが、この商品写真は、マークアップでは一番最後に伝えつつ、CSSでfloatかpositionを使って左エリアに配置したらいいんじゃないかな、って思いました。

でも、もしかして背景画像のほうがいいのかなぁ・・・みなさんはどう思いますか？（不安になってきた・・・）

もうひとつ気がかりなのは「旬のオススメ」です。「旬のオススメ 空芯菜のガーリック炒め」をひとつの見出しにしたほうがいいのか、かなり悩みつつ、「旬のオススメ」を見出しにしませんでした。これはどうなんかなぁ・・・

ということで、私はこのようなマークアップを考えてみました。
さて、中根コーチ、植木コーチの判定はいかに？！

「わたしならこうする！」というお便りももちろんお待ちしています！