Javascript アクセシビリティ 意味の通るテキストラベル

リンクテキストのアクセシビリティ

テキストリンクは、
理解可能であり、
かつ、
ボタンとリンクテキストのラベルが、
弁別可能である必要があります。


悪い例（ボタンとの区別がむずかしい。）


<p>Angularはフレームワークです。Angularについてもっと知るには、<a href="whales.html">ここをクリックしてください</a>。</p>


良い例


<p>Angularはフレームワークです。<a href="whales.html">Angularについてもっと知るのは素晴らしいです</a>。</p>

フォームラベルのアクセシビリティ

フォームラベルは、
ラベルが明確に入力欄と結びつけられる必要があります。

下に悪い例と良い例を表示していますが、
HTMに表示すると、
見た目はどちらも同じに見えます。

日本語の場合は、
スクリーンリーダーでも、
どちらも区別がないのが現状です。
しかし、
将来は修正される事も考えられるので、
「きっちりとした仕事」が良いかと思います。


悪い例


名前を入力: <input type="text" id="name" name="name">


良い例


<div>
  <label for="name">名前を入力:</label>
  <input type="text" id="name" name="name">
</div>

データテーブルのアクセシビリティ

アクセシビリティを向上させるには、
table 要素:表、
tr 要素:行、
td要素:個々のセル、
だけのテーブルではなく、
以下の要素、属性も使用する必要があります。

caption 要素:テーブルのタイトル、
summary 属性:概要（HTML5 では廃止されcaptionを使用することに）、
th 要素:テーブルの見出し、
scope 属性:見出しの列、行の区別、
thead 属性:テーブルのヘッダ部分、
tbody 属性:テーブルの本体部分、
tfoot 属性:テーブルのフッタ部分、

下が使用例になります。


良い例


<table>
    <caption>日本の有名なパンクバンド（いずれも解散）</caption>
    <thead>
      <tr>
        <th scope="col">バンド名</th>
        <th scope="col">結成年 </th>
        <th scope="col">アルバム数</th>
        <th scope="col">有名アルバム</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">THE BLUE HEARTS</th>
        <td>1985</td>
        <td>14</td>
        <td>リンダリンダ</td>
      </tr>
      <tr>
        <th scope="row">Hi-STANDARD</th>
        <td>1991</td>
        <td>4</td>
        <td>Vintage & New, Gift Shits</td>
      </tr>
      <tr>
        <th scope="row">THE STALIN</th>
        <td>1980</td>
        <td>3</td>
        <td>STOP JAP</td>
      </tr>      
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">合計</th>
        <td colspan="2">21</td>
      </tr>
    </tfoot>
  </table>


以上です。