Webアクセシビリティ・デザイン

このページではWebインタフェス・デザインやビジュアル・デザインを、障害のある人が利用しやすいものにするための基本的な仕様を紹介しています。

Webアクセシビリティ・ガイドライン (WCAG/Web Content Accessibility Guidelines)の要件を満たすための基本ガイドです。

記事元は以下ですが、わかりやすい文章にするために、大幅に意訳しています。
自分の理解で学びたい方は、直接以下のリンクをご覧ください。

引用:Writing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI) | W3CWeb 

Webアクセシビリティを考えた開発

Table of Contents

すべての入力フォームにラベルを設置

要素のfor属性をform要素のid属性にリンクさせるか、 WAI-ARIA 属性を使用してください。特定の状況下では、要素を視覚的に隠しても問題ありませんが、一般的にはすべてのユーザーが入力内容を理解するためにラベルが必要です。

例:

入力ボックス

コードスニペット

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

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

見出し、リスト、テーブルなどに適切なマークアップを使用します。

HTML5では、<nav>や<aside>など追加要素が用意され、コンテンツをより適切に構成することができます。

WAI-ARIA の”role”は、例えば、role=”search”を使用して検索機能を識別するなど、追加の意味をもたせることができます。

HTML を使用した構造

例:

見出しとコンテンツ

コードスニペット

<section>
  <article>
    <h2>ここは見出しタイトルです</h2>
    <time datetime="2011-08-07">7 Aug 2015</time>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    <aside>
      <h3関連記事</h3>
      <ul>
        <li><a href="#">ダミーリストその1</a></li>
        <li><a href="#">ダミーリストその2</a></li>
      </ul>
    </aside>
  </article>
</section>

WAI-ARIAを利用した検索フィールド

例:

検索用入力ボックス

コードスニペット

<form action="#" method="post">
  <div role="serach">
    <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>

ユーザーが間違えずに入力できるようにする

ユーザーがWebサイトでスムーズにフォームへ入力できるように、明確な指示、エラーメッセージ、通知を表示します。

  • ユーザーが問題の個所を見つけやすくする
  • 具体的で分かりやすい説明をする
  • 修正例などを表示する

ユーザーが入力した文字や数値を処理するときは、可能な限り多種フォーマットを想定します。たとえば、スペースを含む電話番号が入力されても、スペースを削除するようにします。

電話番号を入力

コードスニペット

<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>

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

コード内の要素の順序が、実際に表示された情報の論理的な順序と一致していることを確認してください。

悪い例

×見出しの前に画像タグを入れると、見出しが見落とされる場合があります。

<img src="images/trainer.png" alt="...">
<h3>スペーストレーナー</h3>
<p>スペース・・・</p>
<a href="...">カートに追加</a>

見出しはセクションの開始を意味します。

<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>

ユーザーの技術に適応したコードを書く

レスポンシブデザインを使用し、モバイルデバイスやタブレットなど、ズーム状態やビューポートサイズにWeb表示を適応させます。フォントサイズを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="Main Navigation" role="navigation">
  <ul>
    <li><a href="...">Home</a></li>
    <li><a href="...">Shop</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>

すべてのインタラクティブ要素をキーボードでアクセス可能にする

特にメニュー、マウスオーバー、折りたたみ可能なアコーディオン、メディアプレーヤーなどのインタラクティブな要素を開発する際には、キーボードからのアクセスを考慮してください。

tabindex=”0 “を使用し、<div>や<span>のような通常はフォーカスを受けない要素が インタラクション に使用されているとき、ナビゲーションの順番を追加します。スクリプトを使用し、キーボードイベントで応答します。

例:

メニュー

コードスニペット

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を解決するための2つ以上の方法を提供する
  • CAPTCHAをさけ、代理人(人間)担当者へ代理アクセスができるようにする
  • 許可されたユーザーにCAPTCHAを必要としない
google 広告