[不定期連載] 山本和泉の「izuizuのアクセシビリティ100本ノック」
2本目コーチ指導

izuizuです。とうとうやってきました、この時間。そう、あの鬼（たぶん）コーチたちの添削がやってきたのです。

さてさて、どうなることやら。

植木コーチの添削

こんにちは、植木です。8月14日に配信したメルマガ第23号でのお題ですが、まずはワタクシからコメントさせていただきます！

お題となったのは、とある中華屋さんで見つけた「空芯菜のガーリック炒め」のPOPです。これがHTMLのWebページの一部だとしたら、アクセシブルにコーディングするにはどうしたらよいか？ということでしたね。その写真がこちらです。

さて、まずは構成要素を確認しましょう。このPOPは次の五つで構成されています。

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

レイアウトとしては、写真が左半分に大きくドーンとあり、その右側に「旬のオススメ」というのが大きめの文字であって、ここだけが赤い背景に白抜きの文字。その下には白い背景に黒字で「空芯菜のガーリック炒め」というのがやはり大きめの文字で続いています。

そして、「本場の野菜も･･･」という小さい文字の文章。その下に、やや大きめの文字で「980円」とあります。

コーディングを考える際、まずこれが一つの情報の固まり、つまり一つのセクションだと考えることができそうです。HTML5であれば、全体を<section>要素で囲う感じでしょうか。そして、セクション内の先頭には見出しがまず来てほしいところです。そこで、「旬のオススメ」と「空芯菜のガーリック炒め」をセットにして、これをh1要素でマークアップします。

次に「本場の野菜も･･･」というテキスト、そして「980円」と続きますが、これはそれぞれp要素でしょうか。「980円」は例えばstrong要素で強調してもいいかもしれません。

そして、最後に画像をimg要素で指定して、alt属性に代替テキストとして「写真：空芯菜のガーリック炒め」と記述する感じでしょうか。

結果的に次のようなマークアップになります。

続きはメルマガで・・・

中根コーチの添削

こんにちは、中根です。続いて僕の考えた中で植木さんのコメントと違っている点について書きます。といっても、実際には違っているのではなく、違った考え方もできるけれどもどちらが良いのかは判断が難しい、といった感じです。

前提

まず前提として、このPOPをHTML化した後、どういった扱いになるのかを考えておく必要がありそうです。すなわち、このPOPにある情報だけが掲載されているページが1枚できるのか、あるいは他の品目の情報も併せて掲載されているようなページになるのか、といったことです。

ここまではなんとなく前者が想定されて話が進められていますが、この点をはっきりとさせておくことは重要だと思います。というのは、次に書く見出しについて、適切な扱い方が変わってくると思うからです。

見出し

植木さんのコメントでは、「旬のオススメ　空芯菜のガーリック炒め」が一つのh1要素に入れてあります。このPOPの内容だけを掲載するページを作るという前提ならば、これで全く問題ないと思います。

一方、複数の品目が掲載されているページ、という前提の場合は、「旬のオススメ」の扱いをちょっと考える必要があるのではないかと思います。

というのは、もし、掲載されている複数の品目が「旬のオススメ」の場合、その品目を読み上げさせる度に「旬のオススメ」と発声されることになりますが、見出しジャンプ機能を使って品目名を確認しているだけの場合などには、これはかなり煩わしく感じられてしまう可能性があります。その品目が旬のオススメであるという事実も重要ですが、やはり一番重要な情報は品目名だと考える人が多いのではないかと思うからです。 (もちろん何が重要かはユーザーごとに違うのですが。)

もしページに掲載されている全ての品目が旬のオススメならば、ページ先頭にh1要素で「旬のオススメ」と一度だけ記載し、各品目名はh2要素で、品目名だけを記載するようにするのが良いかもしれません。

つづきはメルマガで……。