First

HTML5 のタグを使う

アクセシビリティとは

アクセシビリティとは

英語の「Accessibility」である。
「近づきやすさ」「利用のしやすさ」「便利であること」などを意味する言葉である。
。ITの分野では、高齢者や障害者など、身体の状態や能力が異なる人でも、機器やソフトウェア、システム、情報などを同じように利用できる状態やその度合いを指す。

文書構造的

HTML5(HTML Living Standard) は、従来のHTMLと比べて、文書の論理構造をより明確に記述したり、アプリケーションの作成を容易にした仕様となっている。もっと具体的いうと、<header>、<footer>、<main>、<nav>、<article>、<aside>、<section>などの要素でマークアップされた部分は文書構造的な解釈を鮮明にした。

これは、検索エンジンのクローラー、ボットに対して、そのページの持つ情報をより正確に伝えることができるということになる。

従来、複雑なネスト構造(入れ子構造)のソースコードを編集・管理するために を用いてきたが、このコメントアウトという存在の一部と置き換えて考えると分かり易い。

Second

header 要素の構成

header要素の内容には、セクション（または文書全体）に対するイントロダクションやナビゲーションの手助けとなる内容を配置する。具体的には以下のような内容を配置する。

見出し（ページのタイトル、セクションの見出し）
リンクメニュー（グローバルナビゲーション、ページ内リンクのメニュー、補助的なリンクメニュー）
イントロダクション（序説、前置き）
発行日時（文書や記事の発行日時）
検索フォーム（サイト内検索、商品検索）
関連ロゴ（サイトや企業のロゴ）

以下に<header> のサンプルを提示した。また、グローバルナビゲーションと呼ばれる重装備のナビゲーションもあるので調べておこう。

<header>
  <h1>ヘッダー</h1>
</header>

    <!-- header -->
    <header class="site-header">
      <div class="wrapper site-header__wrapper">
        <a href="#" class="brand">Brand</a>
        <p class="introduction">まずはじめに…</p>
        <nav class="nav">
          <ul class="nav__wrapper">
            <li class="nav__item"><a href="#">Home</a></li>
            <li class="nav__item"><a href="#">About</a></li>
            <li class="nav__item"><a href="#">Services</a></li>
            <li class="nav__item"><a href="#">Hire us</a></li>
            <li class="nav__item"><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- //header -->

<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snugly soft!</p>
</article>

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, 
      <time datetime="2017-10-04">4 October 2017</time>by Jane Smith
    </p>
  </header>
  <p>We live on a planet that's blue and green, with so many things still unseen. </p>
  <p>
    <a href="https://example.com/the-planet-earth/">Continue reading…</a>
  </p>
</article>

mdm web docs <header>より引用

Third

article と section

main ＞ article

「main」は、文書内の主要な部分をマークアップするタグである。主にアクセシビリティ向上のために使用する。 <main> タグを使うことで、音声読み上げソフトがページ上方のナビゲーションメニューをスキップし、すぐに本文を読み上げる、といったことをできるようになるらしい。

article ＞ section

<article>: は HTML の要素で、ページの中で自己完結しており、（集合したものの中で）個別に配信や再利用を行うことを意図した構成物を表す「記事コンテンツ要素」のことである。大概の場合、<article>: の中に <setion> が入りそうだ。

article と section を使った例─1

<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
    </article>
  </section>
</article>

mdm web docs <article>より引用

<section> は汎用的な区分要素であるので、それを表現するためのより具体的な要素がない場合にのみ使用する。例えば、ナビゲーションメニューは <nav> 要素で囲むべきだが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 <section> の中に入れることができる。

それぞれの <section> はできるだけ、特に見出し (h1 - h6 要素) を <section> の子要素に含めて識別できるようにするべきである。

section を使った例─2

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple ? size, color, firmness, sweetness,
    tartness...
  </p>
</section>

mdm web docs <section>より引用

Fourth

aside 余談要素

aside は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現する。サイドバーやコールアウトボックスなどを表現するためによく使われる。

補足や脚注、用語の説明などのモーダル、本筋とは別に触れておきたい内容、広告または本筋から分離して問題のない内容を含んだセクションを表す。

モーダルに aside を加える

ここでは、本ページで使われているモーダルに手を加えてみよう。対象に選んだモーダルは、本ウェブサイトのリンク集である。だから、<nav> も加わる。対象の外枠に <aside> を加える。

<nav> と <aside> を加えた html souce

<aside>
  <div class="modal fade" id="slideleft-1" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-slideout slideleft-1">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <nav>
            <h2 style="background-color: #c3f7f1;display: inline-block; font-weight: 100;padding: 4px; color: #66817e;">table of contents</h2>
            <ul class="lines" style="padding: 6px 16px 16px 40px;">
              <li class="sign" id="btn-1" style="text-align: left;padding-bottom: 1em; color: #333;">
                <i class="fas fa-angle-right fa-lg"></i>
                <a href="http://zyco.jp/" class="fancy">
                  <span style="border-bottom: dotted 2px #4286f4; display:inline;">1.トップページナビゲーション</span>
                </a>
              </li>
              &lt;!-- 2から 5までの&lt;li&gt; &lt;/li&gt; は省略 --&gt;
            </ul>
          </nav>
          <div style="height: 30px;"></div>
        </div>
      </div>
    </div>
  </div>
</aside>

Fifth

hgroup 見出しグループ要素

hgroup の使い方

現段階では、その効能についてはそれなりに想像できる程度のものに留まるのだが、その使い方は以下のようになる。

Frankenstein

Or: The Modern Prometheus

mdm web docs <hgroup>より引用

<hgroup> は、 HTML の要素で、見出しとそれに関連する内容を表す。これは 1 つの <h1>～<h6> 要素と、1 つ以上の <p> 要素をグループ化する。

見出しと副次的な内容（副題や代替タイトル、キャッチフレーズなど）をグループ化することが可能である。これらのコンテンツは、 <hgroup> 要素内の <p> 要素として表現される。

hgroup の構成

<hgroup>
  <h1>Frankenstein</h1>
  <p>Or: The Modern Prometheus</p>
</hgroup>

Sixth

figure

figureタグは、HTML5で導入されたタグの一つであり、画像や図版、コードブロックなどを文書の本文とは独立した要素として扱うために使用される。

このタグを使うことで、ウェブページの構造をよりセマンティック（意味的）に表現でき、検索エンジンや支援技術（スクリーンリーダーなど）にとって理解しやすくなる。

キャプションの付いた figure

zyco.jp のロゴ

figcaption とは

「figcaption」とは、図表やソースコードなどの様々なものへキャプション（タイトルや説明）を指定するためのタグである。 <figure> とあわせて使う。 <figure>～</figure> の先頭か末尾に<figcaption> 要素を配置することで、キャプションを付けることができる。

<!-- キャプションが付いた画像 -->
<figure>
  <img src="images/logo.png" width="150" height="150" alt="zyco.jp のロゴ" />
  <figcaption>zyco.jp のロゴ</figcaption>
</figure>