HTML 5での<figure>要素の使い方と疑問点。

例1 画像のブロックを作る。

従来、文章に組み入れられない画像などは、しばしばリストとしてマークアップすると言う方法が、ストリクト志向とでも言うべき方々が推奨しておりました。

• <div>要素などとするのは推奨されないものとしておりました。
• リストは、制作者も推奨しておりましたが、HTML 4/XHTML 1では仕様に定義のないブロックレヴェル要素をマークアップするためにしばしば活用されておりました。

具体的には以下のようにしておりました。

キャプションを伴わない場合

キャプションが無い場合は、<ul>要素とする事が考えられます。

<ul class="images">
    <li><img alt="堀北真希ちゃんの画像(JPEG形式)" src="HORIKITA_Maki.JPG" width="240" height="320" /></li>
    </ul>

キャプションを伴う場合

キャプションが必要な場合には、<dl>要素とする事が考えられます。

<dl class="images">
    <dt>平成22年度の売り上げ予想</dt>
    <dd><a href="Sales2010.html"><img alt="平成22年度の売り上げ予想の詳細" src="Sales2010.GIF" width="480" height="320" /></a></dd>
    </dl>

• HTML 4/XHTML 1では、画像内容を記した文書へのリンクにはリンク先URLを<img>要素のlongdesc属性の値とする事が推奨されておりますが、実装例が少ないため、<a>要素でのアンカーとしております。

HTML 5では専用のブロックレヴェル要素(実際にはフロウ要素と言う異なる概念ですが)として<figure>要素が定義されたため、このような故事付けがましいマークアップとは決別出来るようになります。

キャプションを伴わない場合

<figure class="images">
    <img alt="堀北真希ちゃんの画像(JPEG形式)" src="HORIKITA_Maki.JPG" width="240" height="320" />
    </figure>

キャプションを伴う場合

キャプションが必要な場合には、それを<figcaption>要素とします。

<figure class="images">
    <figcaption>平成22年度の売り上げ予想</figcaption>
    <a href="Sales2010.html"><img alt="平成22年度の売り上げ予想の詳細" src="Sales2010.GIF" width="480" height="320" /></a>
    </figure>

• HTML 5では、<img>要素のlongdesc属性は廃止されます。<a>要素でのリンクで充分だからです。

例2 動画を埋め込む。

静止画像の例と殆ど同じですが、埋め込みのためのマークアップが異なります。

一応、HTML 5では<video>要素も定義されているのですが、形式の互換性の問題とアクセシビリティの問題があるため、ここではプラグインを用いる事で対応が可能になり、代替コンテンツも入れられる<object>要素を用いる事とします。

<figure class="video">
    <figcaption>堀北真希ちゃん&#9825;</figcaption>
    <object type="video/mpeg" data="HORIKITA_Maki.mpeg" width="320" height="240">
        <param name="src" value="HORIKITA_Maki.mpeg" />
        <param name="autostart" value="true" />
        <img alt="堀北真希ちゃんの動画を公開しております。" src="HORIKITA_Maki.JPG" width="320" height="240" />
        </object>
    </figure>

ここでは、MPEG動画が見られない方のためにせめて静止画でもと思い、JPEG画像を代替内容(HTML 5ではフォールバック内容と呼ぶそうです)としております。

尚、<figure>要素の内容は<figcaption>要素とフロウ内容となっており、このため、<object>要素内に従来のブロックレヴェル要素を入れても、<object>要素の内容モデルに反する恐れはありません。

• 但し、インターネットエクスプローラ 7.0までの実装が問題になるので、ここではそのような事はしませんでした。

また、一番目の<param>要素は、インターネットエクスプローラが<object>要素のdata属性を認識しない事に依ります(フラッシュの場合にはname="movie"に変更します)。

例3 コンピュータ言語のコード例を挙げる。

仕様草案にもJAVAスクリプトコードの例が挙げられております。

ただ、日頃サイトでコードなどを公開している制作者としては、コンピュータ言語のコードは文章から切り離せないものと考えているので、<figure>要素とする事は殆どありません。

それでも、コーディング例など省略されても困らないものであれば<figure>要素とするのが妥当と考えております。

例えば、以下のような場合です。

<section>
    <h2>getElementById()メソッドの実装状況</h2>
    <figure class="code">
        <figcaption>JAVAスクリプトでの例</figcaption>
        <pre class="JAVAScript"><code>function showOrHide(e) {</code>
<code>var ele=<mark>document.getElementById(e)</mark>;</code>
<code>var d=(ele.style.display || 'block').toLowerCase();</code>
<code>if (d!='none') ele.style.display='none';</code>
<code>else ele.style.display='block';</code>
<code>}</code></pre>
        </figure>
    <p>getElementById()メソッドは、いくつかの言語に実装されております。</p>
    <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p>
    </secton>

この場合、DOMでのgetElementById()メソッドのJAVAスクリプトでの使い方を例として出しているだけですので、これが無くても文章が通じなくなる恐れはありません。

こう言う場合には、<figure>要素とするのが良いでしょう。

例4 アスキィアートを図代わりに掲載する。

アスキィアートをウェブ文書に載せる事は、アクセシビリティの見地から好ましいとは言えません。

ですが、<figure>要素の使い方としては有効と思われます。

• アスキィアートに関しては今後機会があればまた書きたいテーマです。

アスキィアートを利用する場合には、せめてアクセシビリティを少しでも向上させるようにする事が必要でしょう。

例えば、以下のように前後にスキップ出来るようなリンクを与えます。

<ul>
    <li><a href="#NEXT1">アスキィアートを読み飛ばす</a></li>
    </ul>

<figure class="ASCIIArt">
    <pre class="ASCIIArt">

    (ここにAAが入る)

        </pre>
    </figure>

<p id="NEXT1">
    (文章が続く)
    </p>

ここではAAは<pre>要素としております。

• アスキィアートも整形済みテキストの一種だからです。

<figure>要素を用いる場合の注意点。

<figure>要素と言えども、アクセシビリティへの配慮を忘れてはいけません。

特に<figcaption>要素を伴う場合、内容となっている画像や動画などが見られなければ、<figcaption>要素となっているテキストだけが何の脈絡も無く現われ、意味不明になってしまう恐れがあります。

不安な場合には、Lynx(リンクス)などで開いてみると良いでしょう。

その際、文書として読めなくなるようであれば改善が必要でしょう。