Javascript アクセシビリティ ページレイアウト

HTMLのページレイアウト

昔のスタイルである、
ページレイアウトは、
すでに過去のものに成りつつあります。
そして、有害に成りつつあります。

例えば、
ヘッダー、フッター、サイドバー、主要コンテンツの列などの、
ページレイアウトなどは、
スクリーンリーダーが、
混乱したリーディングをする可能性があります。

1つ目の例は次の様になります。

 <header>
      <h1>見出し</h1>
    </header>
　
 　<!-- ここにナビゲーションが入ります。-->
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">我々の組織</a></li>
        <li><a href="#">プロジェクト</a></li>
        <li><a href="#">連絡</a></li>
      </ul>

        <form>
        <input type="search" name="q" placeholder="検索">
        <input type="submit" value="Go!">
      </form>
    </nav>

    <!-- ここにメインコンテンツが入ります。-->
    <main>

      <!-- 記事入力-->
      <article>
        <h2>記事見出し</h2>

        <p>段落1</p>

        <h3>小区分1</h3>

        <p>段落1</p>

        <p>段落2</p>

        <h3>小区分2</h3>

        <p>段落1</p>

        <p>段落2</p>
      </article>

      <!-- 関連記事 -->
      <aside>
        <h2>関連</h2>

        <ul>
          <li><a href="#">関連記事1</a></li>
          <li><a href="#">関連記事2</a></li>
          <li><a href="#">関連記事3</a></li>         
        </ul>
      </aside>

    </main>

    <!-- フッタ-->
    <footer>
      <p>©Copyright 2050 by …. All rights reversed.</p>
    </footer>

こういった、
モダンなスタイルにより、
スクリーンリーダーは混乱することなく、
コンテンツの読み上げることが出来るようになります。

div 要素だけを使うよりも、
header、nav、article、
aside、footer などを使って区切る方が優れています。

HTMLのUIコントロール

2つ目は、
ボタン、リンク、およびフォームコントロールなどの、
UIコントロールの例です。

ボタン、リンク、フォーム、ラベルは、
適切に使用する必要があります。
ボタンをdivで代替えするのは良くありません。

コントロールのテキストラベルを適切に使うのは、
ユーザーにとって非常に有益です。

フォーム入力欄に何を入力するか知る必要があるので、
フォーム・ラベルは重要になります。


<h1>リンク</h1>

<p>これは <a href="...">リンク先1</a>へリンクしています。</p>

<p>これは <a href="...">リンク先1</a>へリンクしています。</p>

<h2>ボタン</h2>

<p>
  <button data-message="button1">ボタン1をクリックしてください。</button>
  <button data-message="button2">ボタン2をクリックしてください。</button>
  <button data-message="Tbutton3">ボタン3をクリックしてください。</button>
</p>

<h2>フォーム</h2>

<form>
  <div>
    <label for="name">名前を入力してください:</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="age">年齢を入力してください:</label>
    <input type="text" id="age" name="age">
  </div>
  <div>
    <label for="mood">健康状態を入力してください:</label>
    <select id="mood" name="mood">
      <option>良好</option>
      <option>普通</option>
      <option>不調</option>
    </select>
  </div>

以上です。