ウェブ・アクセシビリティのための開発

本翻訳について

ボランティアによる本翻訳は原文（英語）の内容を正確に反映できていない可能性があります。

本翻訳後に英語版が更新されています：変更履歴
英語版更新 2024-07-16. 翻訳更新済 2024-04-16.

翻訳者 Jay Kishigami.
WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します

すべてのフォームコントロールにラベルを関連付ける

フォーム要素の id 属性にリンクされた <label> 要素の for 性を使うか､ WAI-ARIA 属性を使います｡特定の状況では <label> 要素を視覚的に隠すことが許容されるかもしれませんが､ほとんどの場合ラベルは全ての読者が必要な入力を理解するのに必要です｡

例: for　属性と id 属性の使用

表現

ユーザーネーム

短いコード

<label for="username">ユーザーネーム</label>
<input id="username" type="text" name="ユーザーネーム">

画像の代替テキストを含める

すべての情報画像と機能画像に画像の代替テキストが追加されていることを確認すること｡装飾的な画像は空の代替テキスト､alt=""を使うか､画像自体をCSSに含めてください｡代替テキストは通常､文章コンテンツの責任者が提供します｡

ページの言語と言語の変更を特定する

例えば <html lang="en"> のように　html　タグで lang 属性を使うことで､すべてのページの主要言語を示します｡要素の言語がページの他の部分と異なる場合､特定の要素でlang属性を使います｡

マークアップを使って意味と構造を伝える

見出し､リスト､表などには適切なマークアップを使用しましょう｡HTML5 は <nav> や <aside>　のような追加要素を提供し､コンテンツをよりよく構造化します｡ WAI-ARIA の役割は､例えば､ role="search" を使って検索機能を識別するなど､追加の意味を提供することができます｡デザイナーやコンテンツ・ライターと協力して､意味について合意し､一貫して使用しましょう｡

例: 構造と意味を提供するためにHTMLを使用

表示

スーパーベアが窮地を救う

2015年8月7日

街の人気者であるクマが､またしても若いネコを木から救い出すという偉業を成し遂げた｡目撃者によると､スーパーベアーの努力はネコには理解されず､救助者に軽い引っかき傷を負わせたという｡

短いコード

<section>
  <article>
    <h2>スーパーベアが窮地を救う</h2>
    <time datetime="2015-08-07">2015年8月7日</time>
    <p>街の人気者であるクマが､またしても若いネコを木から救い出すという偉業を成し遂げた｡目撃者によると､スーパーベアーの努力はネコには理解されず､救助者に軽い引っかき傷を負わせたという｡</p>
    <aside>
      <h3>Related Articles</h3>
      <ul>
        <li><a href="#">クマが市の鍵を受け取る</a></li>
        <li><a href="#">スーパーベアが市長に立候補</a></li>
      </ul>
    </aside>
  </article>
</section>

例: WAI-ARIAを使った検索フィールド

表示

短いコード

<form action="#" method="post">
  <div role="search">
    <label for="search">検索</label>
    <input type="search" id="search" aria-describedby="search-help">
    <div id="search-help">顧客IDまたは名前でレコードを検索</div>
    <button type="submit">Go</button>
  </div>
</form>

ユーザーのミスの回避と修正をサポート

ユーザーがサイトのフォームを完了できるように､明確な指示､エラーメッセージ､通知を提供しましょう｡エラーが発生したら

ユーザーが問題の場所を見つけるのを助けるましょう
具体的でわかりやすい説明をしましょう
修正を提案しましょう

ユーザー入力を処理する際には､できるだけ書式に寛容であること｡例えば､スペースを含む電話番号を受け付け､必要に応じてスペースを削除します｡

例: バリデーションに寛容なオーストラリアの電話番号フィールド

表示

電話番号

例として, (02) 1234 1234

短いコード

<label for="phone">電話番号</label>
<input id="phone" name="phone" type="tel"
       pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
       aria-describedby="phone-desc">
<p id="phone-desc">例として, (02) 1234 1234</p>

読み取り順をコード順に反映

コード内の要素の順序が､提示される情報の論理的な順序と一致していることを確認する｡これをチェックするひとつの方法は､CSSのスタイルを削除し､コンテンツの順序が理にかなっているかどうかを確認することです｡

例: 論理的な読み取り順序をコードに反映

宇宙トレーナー

クラシックでスタイリッシュな宇宙トレーナー

カートに加える

ヘッダーより前の画像は見逃す可能性がある

<img src="images/trainer.png" alt="...">
<h3>宇宙トレーナー</h3>
<p>宇宙...</p>
<a href="...">カートに加える</a>

すべてのコードを見る

<article class="product">
  <img alt="パープルのハイトップ・トレーナーに白いシューレース、足首の外側に空白の白いドット、白いトゥキャップがあしらわれている。" src="images/trainer.png">
  <h3 class="name">宇宙トレーナー</h3>
  <p class="desc">クラシックでスタイリッシュな宇宙トレーナー</p>
  <p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> カートに加える</a></p>
</article>

見出しは章のはじめに

<h3>宇宙トレーナー</h3>
<img src="images/trainer.png" alt="...">
<p>宇宙...</p>
<a href="...">カートに加える</a>

すべてのコードを見る

<article class="product">
  <h3 class="name">宇宙トレーナー</h3>
  <img alt="パープルのハイトップ・トレーナーに白いシューレース、足首の外側に空白の白いドット、白いトゥキャップがあしらわれている。" src="images/trainer.png">
  <p class="desc">クラシックでスタイリッシュな宇宙トレーナー</p>
  <p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> カートに加える</a></p>
</article>

ユーザーの技術に適応するコードを書く

モバイルデバイスやタブレットなど､異なるズーム状態やビューポートサイズに表示を適応させるために､レスポンシブデザインを使用すること｡フォントサイズを少なくとも200%大きくする場合は､横スクロールを避け､コンテンツのクリッピングを防ぐこと｡プログレッシブ・エンハンスメントを使用して､使用するテクノロジーに関係なく､コア機能とコンテンツが利用できるようにします｡

例: メディアクエリを使ってナビゲーションを適応させる

/* 狭いビューポートでは､ナビゲーションを全幅にする */
@media screen and (min-width: 25em) {
  #nav {
    float: none;
    width: auto;
  }
  #main {
    margin-left: 0;
  }
}

/* より広いビューポートでは､ナビゲーションを左に配置する*/
@media screen and (min-width: 43em) {
  #nav {
    float: left;
    width: 24%;
  }
  #main {
    margin-left: 27%;
  }
}

非標準のインタラクティブ要素に意味を与える

WAI-ARIAを使用して､アコーディオンや特注ボタンなどのカスタムウィジェットの機能と状態に関する情報を提供します｡例えばrole="navigation" や aria-expanded="true"です｡｡このようなウィジェットの動作､例えばコンテンツの展開や折りたたみ､ウィジェットがキーボード・イベントにどのように応答するかなどを実装するには､追加のコードが必要です｡

例: WAI-ARIAを使ったメニューの機能と状態の識別

<nav aria-label="主たるナビゲーション" role="navigation">
  <ul>
    <li><a href="...">ホーム</a></li>
    <li><a href="...">ショップ</a></li>
    <li class="has-submenu">
      <a aria-expanded="false" aria-haspopup="true" href="...">SpaceBears</a>
      <ul>
          <li><a href="...">SpaceBear 6</a></li>
          <li><a href="...">SpaceBear 6 Plus</a></li>
      </ul>
    </li>
    <li><a href="...">MarsCars</a></li>
    <li><a href="...">Contact</a></li>
  </ul>
</nav>

すべてのインタラクティブ要素がキーボードでアクセスできるようにすること｡

特に､メニュー､マウスオーバー情報､折りたたみ可能なアコーディオン､メディアプレーヤーなどのインタラクティブ要素を開発するときは､キーボードアクセスについて考えてください｡ Use tabindex="0"を使って <div> あるいは <span>のようみ通常はフォーカスを受けない要素を､インタラクションのために使うときにはナビゲーション・オーダーに加えましょう｡スクリプトを使ってキーボード・イベントを捕捉し､それに応答することが必要です｡

例: キーボードからアクセス可能なメニューボタン

表示

Code Snippet

var buttonExample = document.getElementById('example-button');

buttonExample.addEventListener('keydown', function(e) {
  // Toggle the menu when RETURN is pressed
  if(e.keyCode && e.keyCode == 13) {
    toggleMenu(document.getElementById('example-button-menu'));
  }
});

buttonExample.addEventListener('click', function(e) {
// Toggle the menu on mouse click
  toggleMenu(document.getElementById('example-button-menu'));
});

可能な限りCAPTCHAを避ける

CAPTCHAは多くの人々に問題を引き起こす｡ユーザー入力が人間によって生成されたものであることを検証するには､自動検出やインターフェイスのインタラクションなど､もっと使いやすい手段があります｡CAPTCHAを本当に含める必要がある場合は､理解しやすく､障害を持つユーザーのための代替手段を含むようにしてください｡下記にその例を示します｡

CAPTCHAを解く3つ以上の方法を提供すること｡
CAPTCHAを迂回できる人間の担当者へのアクセスを提供すること｡
認証されたユーザーにはCAPTCHAを要求しないこと｡

アクセシビリティについてより学ぶために

これらのヒントは､Webアクセシビリティのために考慮すべきことのほんの一部です｡アクセシビリティが重要である理由､および障害者がWebをより利用しやすくするためのガイドラインについては､以下のリソースを参照してください｡

ウェブ・アクセシビリティ入門 (英語版) — アクセシビリティを紹介し､多くの有用なリソースへのリンクを提供
アクセシビリティ原則 (英語版) — WCAG 要求事項の紹介
障害者はどのようにウェブを利用しているか (英語版) — 障害者にとってのアクセシビリティの利点の実例
ウェブ・アクセシビリティ・チュートリアル (英語版) —障害者がアクセスしやすいウェブコンテンツを開発する方法を紹介
ビフォー・アフター・デモンストレーション — 同じビジュアル・デザインを共有するアクセシブルなウェブサイトとアクセシブルでないウェブサイトの例で､主要なアクセシビリティの障害と修復を強調する注釈､およびWCAGの評価レポートが掲載されています｡
WCAGを満たす方法（クイックリファレンス） —すべてのWCAG要件とテクニックのカスタマイズ可能なリファレンス
ウェブ・アクセシビリティ評価ツールリスト — コードのアクセシビリティを調査するのに役立つさまざまなツールを提供しています｡
WAI-ARIA 概要 (英語版) — WAI-ARIA の紹介と全仕様へのリンク

最初に戻る