December 2012
Volume 27 Number 12
HTML5 アプリケーションをビルドする - HTML5 によるアクセシビリティの設計
Rajesh Lal | December 2012
幅広いユーザーが利用することを重視している方は、アクセシビリティ (ユーザー補助) を考えて Web サイトを設計しているでしょう。アクセシビリティとは、Web ページをアクセスしやすく、使いやすく、だれでも利用できるようにすることです。一般には、最新のテクノロジを使用すればアクセシビリティを容易に実現できます。そこで、今回は HTML5 を使用します。
アクセシビリティに対応するには、キーボードやマウスを備えた通常のコンピューター、スクリーン リーダー、オーディオ ブラウザー、帯域幅が限られたデバイス、以前のブラウザーやコンピューター、携帯電話やタッチ デバイスなど、幅広いデバイスでコンテンツを使用できるようにする必要があります。さらに、障碍者、高齢者、識字能力の低い人、一時的に病気にかかっている人、キーボードやマウスだけを使用することを好む人など、多様な人々が利用できるようにすることも必要です。
アクセシビリティでは、障碍の次の 4 つの主要分野に取り組みます。
- 聴覚
- 運動
- 認識
- 視覚
聴覚に障碍があると、Web サイトから流れる音を聞くことができません。これに対処するには、テキスト以外のすべてのコンテンツに副題や字幕などのテキストを使用して、コンテンツを認識できるようにします。可能であれば、発話内容を文字表示し、手話を含めます。
ここでの運動障碍とは、マウスやキーボードを使えないことを指します。Web で運動障碍に対処するには、コンテンツを操作可能にします。つまり、キーボードのみでもすべての機能にアクセスできるようにします。可能であれば、ジョイスティック、音声認識、およびオーディオ フィードバックでもアクセスできるようにします。見出しやアンカーを適切に使用してナビゲーションを可能にし、時間によって変化するコンテンツはユーザーが停止できるようにします。ページの自動更新は許可しません。
認識障碍は、テキストや画像のサイズ、色のコントラストなど、コンテンツそのものに影響します。ユーザーによっては、派手なグラフィックスやフォントの種類も問題となる方もいます。これに対処するには、コンテンツを理解可能にします。読みやすい sans-serif フォントを使い、フォント サイズを変更できるようにします。背景と前景にはコントラストに大きな差がある色を使います。自動更新、画像の点滅、メディアやアニメーションの自動再生は行いません。コンテンツを理解しやすくするには、見た目の手掛かりや標準のアイコンを複数使用します。
視覚障碍は、色を識別できない方から、コンテンツをまったく見ることができない方まで広い範囲に及びます。こうした障碍に対処するには、コンテンツを堅ろうにして、ユーザー エージェントが確実に解釈でき、スクリーン リーダーから容易にアクセスできるようにします。セマンティック HTML を使用して標準に従い、正しい構文の HTML を使用して、ページを検証します。適用可能であれば、lang 属性と abbr タグを使用します。
簡単に言えば、アクセシビリティに対応するには、Web のコンテンツを知覚可能、操作可能、理解可能、および堅ろうにすることが求められます。これらの特性を組み合わせて構成されたのが、World Wide Web コンソーシアム (W3C) の POUR モデルです。このモデルでは、ユーザーに表示する情報と UI 要素がそのユーザーの能力で知覚できること、ユーザーが UI を操作する手段が備わっていること、ユーザーが情報およびインターフェイス要素の操作方法を理解できること、およびコンテンツが堅ろうで多様なユーザー エージェント (補助テクノロジ (AT) など) を使用してアクセスできることが義務付けられています。
アクセシビリティの基礎を理解したところで、これに対応する Web の設計に関連して非常に重要な 2 つの概念、プログレッシブ エンハンスメントと Accessible Rich Internet Applications (ARIA) について説明しましょう。
プログレッシブ エンハンスメントと ARIA
プログレッシブ エンハンスメントは Web 設計手法の 1 つで、セマンティック HTML、スタイル シート、およびスクリプトを使用してアクセシビリティを推進します。基本コンテンツはだれでも利用できます。一方、高い能力を備え、時間的に余裕があり、高度なツールを利用できる方は、より高度なコンテンツや機能を利用できます。サイトを作成するときは、まず、コンテンツを最も単純な方式で表示することに集中します。ページの設計には、意味を中心に構造化した HTML を使用します。表示コンテンツ (太字や斜体など) を変更するプレゼンテーション要素は、外部スタイル シートに含めます。
セマンティック HTML は、コンテンツを表示する方法ではなく、その意味合いに関連した方法で、ページ内の HTML タグに意味を持たせます。コンテンツの装飾に関する情報はすべて CSS ファイルに格納します。Web ページのロジックとクライアント側の動作は、ページが読み込まれてスタイル シートが解析および適用された後、外部にリンクされた JavaScript で追加します。プログレッシブ エンハンスメントでは、JavaScript ファイルにエラーがある場合でも、ページを適切なスタイルで読み込みます。また、CSS ファイルが (スクリーン リーダーなどによって) 無視される場合でも、HTML ページにはすべてのコンテンツが表示されます。
最新の OS には、すべて独自のアクセシビリティ API が組み込まれています。各 API は、テキストの読み取りや解析を行うためにブラウザーが公開するオープン メソッドやインターフェイスのセットです。マイクロソフト API には Windows 用 UI オートメーション (UIA) の一部である Microsoft Active Accessibility (MSAA)、Linux OS には IAccessible2、Apple OS には Mac OS X Accessibility Protocol がありますが、いずれの API も W3C (bit.ly/OlD4lX、英語) によって定義された ARIA 規格に準拠しています。ユーザーが、スクリーン リーダーなどの AT デバイスを使用してアクセシビリティ対応の Web ページを操作する方法を、図 1 に示します。このようなデバイスでは、アクセシビリティ API を使用して Web ページにアクセスします。
.jpg)
図 1 アクセシビリティ テクノロジを使用してユーザーが Web ページにアクセスする方法
ARIA は、W3C の Web Accessibility Initiative (WAI) の一部で、Web コンテンツと Web アプリケーションのアクセシビリティを向上する方法を定義しています。ARIA は、HTML、CSS、JavaScript、AJAX、および関連するテクノロジを使って作成された動的コンテンツや高度な UI コントロールのアクセシビリティを向上するために使用します。現在は正式に HTML5 仕様の一部になり、広く普及している JavaScript ライブラリ (JQuery、Dojo、YUI など) にも組み込まれています。詳細については、bit.ly/b89BEJ (英語) を参照してください。
ARIA は、一連のロール、状態、およびプロパティを使用して、Web ページをアクセシビリティ API に公開します。これらのロール、状態、およびプロパティは、ページの (AT に公開されている) 要素に割り当てられます。最新の AT ツール (JAWS、NVDA、VoiceOver など) では、ARIA がサポートされます。では、ARIA について詳しく見ていきましょう。
ARIA のロール
ロールは、要素の種類を意味のある方法で示します。スクリーン リーダーが、ページ上で role=navigation を含む HTML 要素を見つけるとします。スクリーン リーダーはこの HTML 要素をナビゲーション要素と認識するため、ユーザーは、すべてのリンクをタブで移動しなくても直接ナビゲーションを利用できます。
ARIA のロール属性は、HTML 要素に次のように適用します。
<div role="XXX"> </div>
この "XXX" の値は、ページの HTML 要素の種類とそのロールによって異なります。表現するコンテンツに基づいて、form、navigation、search、article など多くの値を受け取ることができます。ロールには、次の 3 種類があります。
- ランドマーク ロール: ナビゲーションの目印として機能します。
- 構造的なロール: ドキュメントの構造を定義し、コンテンツを整理しやすくします。
- ウィジェット ロール: スタンドアロンの UI ウィジェットと、スタンドアロン ウィジェットを 2 つ以上格納する複合ウィジェットから構成されます。
図 2 に、ARIA で使用できるすべてのロール値を示します。ARIA には、ランドマーク ロールが 8 個、構造的なロールが 18 個、スタンドアロンのインターフェイス ウィジェット ロールが 25 個、および UI 複合ウィジェット ロールが 9 個用意されています。詳細については、bit.ly/S0HUvi (英語) を参照してください。
図 2 ARIA ロールの値
| ランドマーク ロール | 構造的なロール | ウィジェット ロール | |||
| スタンドアロンのウィジェット | 複合ウィジェット | ||||
| application | article | region | alert | progressbar | combobox |
| banner | columnheader | row | alertdialog | radio | grid |
| complementary | definition | rowheader | button | scrollbar | listbox |
| contentinfo | directory | separator | checkbox | slider | menu |
| form | document | toolbar | dialog | spinbutton | menubar |
| main | group | gridcell | status | radiogroup | |
| navigation | heading | link | tab | tablist | |
| search | img | log | tabpanel | tree | |
| list | marquee | textbox | treegrid | ||
| listitem | menuitem | timer | |||
| math | menuitemcheckbox | tooltip | |||
| note | menuitemradio | treeitem | |||
| presentation | option | ||||
ロールとは異なり、ARIA の状態とプロパティは、HTML 要素ごとに設定できる属性です。
ARIA の状態
ARIA の状態は、オブジェクトに関連付けられるデータを示す HTML 要素の動的プロパティです。ただし、その要素の根本的な性質に影響を与えることはありません。ARIA の状態には、グローバルとウィジェットの 2 種類があります (図 3 参照)。グローバル状態は、その要素にロールが適用されているかどうかにかかわらず、あらゆる要素に適用できます。ウィジェット状態は、ユーザーによる操作が必要な UI ウィジェットの属性です。
以下に、aria-hidden 属性を示します。
<div aria-hidden="true">
<p>Paragraph text here </p>
</div>
このコードにより、この段落はスクリーン リーダーに認識されなくなります。
ARIA のプロパティ
ARIA のプロパティは ARIA の状態と似ていますが、ページ上では比較的静的で、HTML 要素の追加プロパティとして機能します。ウィジェット プロパティはウィジェット状態に似ていますが、ページのスコープ内で値が変化することはありません。グローバル プロパティは 11 個、ウィジェット プロパティは 14 個用意されています (図 3 参照)。
図 3 ARIA の状態とプロパティ
| 属性の種類 | グローバル | ウィジェット |
| ARIA の状態 | aria-busy aria-disabled aria-grabbed aria-hidden aria-invalid |
listitem math note presentation region row rowheader separator toolbar |
| ARIA のプロパティ | aria-atomic aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labelledby aria-live aria-owns aria-relevant |
aria-autocomplete aria-haspopup aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-readonly aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext |
aria-required ウィジェット プロパティの例を以下に示します。
<label for="username">User name:</label>
<input id="username" type="text" aria-required="true">
このコードでは、フォームの入力フィールドが必須になります。
図 3 は、ARIA の全状態と全プロパティをまとめたものです。詳細については、bit.ly/OlbLeh (英語) を参照してください。
ARIA と ARIA のロール、状態、およびプロパティについてある程度理解したところで、この ARIA を使用してプログレッシブ エンハンスメントを適用したアクセシビリティ対応の Web サイトを作成しましょう。
アクセシビリティ対応の Web サイトを作成する
通常の Web サイトには、多くのコンポーネントが含まれています。アクセシビリティに留意して HTML5 と ARIA を使用しながら、以下に示す要素を作成する方法をそれぞれ見ていきましょう。
- ホームページ
- ロゴを含むヘッダー領域
- ナビゲーション メニュー
- メイン グラフィックス
- メイン コンテンツ
- 情報ブロック
- 問い合わせフォーム
- FAQ ページ
- ビデオ付きの About ページ
図 4 に、作成するサイトの基本構造を示します。
.png)
図 4 Web サイトのサイト マップの例
図 5 に、製品サイトやサービス サイトでよく使われているホームページのレイアウトを示します。このページを作成するには、まず HTML5 を使用してプログレッシブ エンハンスメントを実現し、その後 AT デバイスからアクセスできるようにします。
.png)
図 5 ホームページの標準レイアウト
ご覧のように、ページにはたくさんの要素 (ヘッダー、ナビゲーション、操作誘導、メイン グラフィックス、簡単なウェルカム メッセージ、情報のブロック、およびフッター) があります。
プログレッシブ エンハンスメントの原則に従い、<header>、<nav>、<figure>、<article>、<section>、<aside>、および <footer> 要素を使用して、これらの要素に対応するシーケンシャルな HTML5 ページを作成します (図 6 参照)。
図 6 HTML5 ホームページ
<!doctype html>
<html lang="en">
<head><title>HTML5 Home Page</title></head>
<body>
<header><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</header>
<nav><!-- navigation -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div><!-- main content -->
<section>
<figure><img src="images/maingraphics.png">
<figcaption>Welcome image. More help on image<a href="#/">Help</a></figcaption>
</figure>
</section>
<section>
<h2><a href="Action" target="_blank">Subscribe</a></h2>
<article>
<h2>Welcome!</h2>
<p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
</article>
</section>
</div>
<aside><!-- info blocks -->
<h4>Promotion</h4><ul><li>items</li></ul>
<h4>Awards</h4><ul><li>items</li></ul>
<h4>News</h4><ul><li>items</li></ul>
</aside>
<footer><!-- footer -->
<div>Copyright © 2012</div>
<div><a href="">Privacy Policy</div>
</footer>
</body>
</html>
このコードは、現行のブラウザーの大半でサポートされ、サポートされていない HTML5 要素はすべて既定で <div> 要素になります。たとえば、<header> 要素をサポートしていないブラウザーは、次のように <div> 要素に置き換えます。
<header><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</header>
<div><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</div>
ナビゲーションのランドマークやドキュメントの構造部分を AT ツールが認識できるよう、各要素に以下のロールを追加します (図 7 参照)。
- header role=banner
- nav role=navigation
- maincontent role=main
- section role=region
- article role=article
- aside role=complementary
- footer role=contentinfo
図 7 ロールの追加
<!doctype html>
<html lang="en">
<head><title> Accessible HTML5 Home Page</title></head>
<body>
<header role="banner"><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</header>
<nav role="navigation"><!-- navigation -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div id="maincontent" role="main"><!-- main content -->
<section>
<figure><img src="images/maingraphics.png">
<figcaption>Welcome image. More help on image<a href="#/">Help</a></figcaption>
</figure>
</section>
<section role="region">
<h2><a href="Action" target="_blank">Subscribe</a></h2>
<article role="article">
<h2>Welcome!</h2>
<p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
</article>
</section>
</div>
<aside role="complementary"><!-- info blocks -->
<h4>Promotion</h4><ul><li>items</li></ul>
<h4>Awards</h4><ul><li>items</li></ul>
<h4>News</h4><ul><li>items</li></ul>
</aside>
<footer role="contentinfo"><!-- footer -->
<div>Copyright © 2012</div>
<div><a href="">Privacy Policy</div>
</footer>
</body>
</html>
すべてのブラウザーに対応するスタイルを適用するには、まず、次のようにスタイル シートですべての HTML5 要素をブロック レベルの要素にします。
<style>
header,footer,nav,article,aside,section,figure,figcaption{display:block;}
</style>
特定の要素ごとにスタイルが適用されるよう、ARIA のロールを含めます。
<style>
header[role="banner"]{/* Styles for banner */}
header{/* Styles for other headers */}
#maincontent[role="main"]{ /* Styles for main content */}
nav[role="navigation"]{/* Styles for navigation */}
section[role="group"]{/* Styles for section */}
article[role="article"]{/* Styles for article */}
aside[role="complementary"]{/* Styles for info blocks */}
footer[role="contentinfo"]{/* Styles */}
</style>
HTML ページの解析はシーケンシャルに実行されるため、JavaScript ファイルを配置するのに最適な位置は、ページの下部 (フッターの後) になります。これにより、サイトは JavaScript と完全に切り離されます。JavaScript 関数は、ドキュメントの準備が完了し、ドキュメントが完全に読み込まれてからしかインスタンスが作成されません。次のコードは、今回の例に挿入したスクリプト ファイルを示します。
<footer role="contentinfo"><!-- ><!-- footer -->
<div>Copyright © 2012</div>
<div><a href="">Privacy Policy</div>
</footer>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
アクセシビリティ対応の問い合わせフォームを作成する
フォームは、Web ベースの対話操作に不可欠です。HTML5 には、アクセシビリティを向上する input 要素の type 属性やその他の属性が多数用意されています。HTML5 フォームに関連する属性を、図 8 に一覧します。
図 8 フォームの Input 要素の Type 属性とその他の属性
| Input 要素の Type 属性 | input type=datetime input type=datetime-local input type=date input type=month input type=time input type=week input type=number |
input type=range input type=email input type=url input type=search input type=tel input type=color |
| その他の属性 | autocomplete autofocus form formaction formenctype formmethod formnovalidate |
formtarget list multiple pattern placeholder required step |
アクセシビリティのために、フォームの用途を 1 つに限定します。問い合わせページには問い合わせフォームのみを含め、不要なものは追加しません。その結果、AT デバイスを使用するユーザーが格段に操作しやすくなります。
input 要素の適切な type 属性を使用することも重要です。こうすることで、その属性をサポートするデバイスのユーザー エクスペリエンスが向上します。たとえば、input type=number は、モバイル デバイスの数字キーパッドを表示し、input type=url は、多くのスマートフォンの仮想キーボードに特殊な ".com" ボタンを表示します。
次に示すように、label 要素の for 属性は、input 要素の id 属性と併せて使用します。
<label for="useremail">Your E-mail:</label>
<input id="useremail" name="useremail" type="email" value=""/>
このコードにより、補助デバイスでは label が input 要素にマップされます。この処理は、aria-describedby 属性を使用して、さらに説明的に行うことも可能です。たとえば、入力フィールドごとにヘルプ テキストがある場合は、入力テキストにヘルプ テキストを関連付けることができます。
<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>
次は、HTML5 の placeholder 属性と (aria-required="true" を使用して) required 属性を追加します。placeholder 属性を使用して有効な入力既定値を表示でき、required 属性はその入力ボックスを必須フィールドにすることができます。
<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" placeholder="john@msn.com" required
aria-required="true" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>
placeholder は label ではありません。また、必須フィールドであることを示すためにアスタリスクをテキストに添えると、スクリーン リーダーがフィールドごとにアスタリスクを読み取るため、視覚に障碍のある方にとっては不便なユーザー エクスペリエンスになります。必須フィールドであることをユーザーに示すには、アスタリスクではなく、フィールドが必須であることを AT デバイスに示す aria-required フィールド属性や、背景色または背景画像を使用します。
フォームの最初の要素にフォーカスを設定する便利な autofocus 属性を追加することもできます。
図 9 に、アクセシビリティ対応の HTML5 問い合わせフォームを作成するコードを示し、その問い合わせフォームを図 10 に示します。
図 9 HTML5 問い合わせフォームの作成
<div id="contact" role="main"><!-- main content -->
<!-- content -->
<section id="content">
<article>
<h2>Contact <span>Form</span></h2>
<form id="contacts-form" action="" method="post">
<fieldset>
<div class="field">
<label for="name" >Name </label>
<input id="name" placeholder="John Smith" autofocus required
aria-required="true" type="text" value="" />
</div>
<div class="field">
<label for="email">E-mail</label>
<input id="email" placeholder="john@msn.com" type="email" required
aria-required="true" value=""/>
</div>
<div class="field">
<label for="website">Website</label>
<input id="website" placeholder="http://website.com"
type="url" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea id="message"
placeholder="Write your message Here!" required
aria-required="true" ></textarea>
</div>
<div><a href="#" onclick="submit()">Send Your Message!</a></div>
</fieldset>
</form>
</article>
</section>
</div>
.png)
図 10 ブラウザーでの問い合わせフォーム ページ
障碍を持つユーザーにとっては更新は難しくなることがあります。しかし、status、log、alert の role 属性と一緒に aria-live 属性を使用すると、ライブ領域によって補助デバイスで更新を認識できるようになります。
- aria-live="off": 更新を読み上げない (領域がライブでない)
- aria-live="polite": ユーザーがアイドル状態のときに更新を読み上げる
- aria-live="assertive": 優先度は高いが、更新をすぐに読み上げる必要はない
- role="log"、role="status"、および role="alert": さまざまな種類のメッセージに使用する
これを HTML コードと組み合わせる簡単な方法を、以下に示します。
<div id="liveregion" role="log" aria-live="polite">
次に、アクセシビリティ対応のコンテンツを備えた FAQ ページを取り上げます。
画像を備えたアクセシビリティ対応の FAQ ページを作成する
多くの Web サイトで、FAQ ページは最も閲覧されるページの 1 つです。FAQ には、テキスト、表、リンク、画像、タイトルを含めることができますが、これらはすべてアクセシビリティに対応している必要があります。これを実現する方法を見ていきます。まず、HTML コンテンツにはセマンティック HTML タグのみを含め、すべての装飾要素をスタイル シートに移動します。したがって、
<i>italics</i>
の代わりに
<em>emphasized</em>
<cite>citation</cite>
を使用し、
<b>bold</b>
の代わりに
<strong>strong</strong>
を使用します。これらの要素は、コンテンツに意味を持たせ、スクリーン リーダーが異なる解釈を行うようにします。たとえば、スクリーン リーダーによっては <strong> 要素の解釈が異なりますが、<b> 要素の解釈は同じです。
また、<h1>、<h2> など、タイトル関連の見出し要素を適切に使用することも重要です。理想は、1 ページに 1 つの <h1> 見出しと、必要に応じて複数の小見出しを使用することです。各 HTML 要素には対応する終了タグがあることを確認してください。同様に、すべての番号付きリストおよび記号付きリストにも正しく終了タグを記述します。標準の手法では、すべてのタグを小文字で記述し、入れ子を適切に行うことが推奨されています。図 11 に例を示します。
図 11 FAQ ページのマークアップ
<h1>FAQ</h1>
<h2>List of frequently asked questions</h2>
<ul>
<li><a href="#q1">Accessible Text</a></li>
<li><a href="#q2">Accessible Tables</a></li>
<li><a href="#q3">Accessible Links</a></li>
<li><a href="#q4">Accessible Images</a></li>
<li><a href="#q5">Accessible Titles</a></li>
</ul>
<h2 id="q1">Accessible Text</h2>
<h3>Semantic HTML</h3>
<h3>Proper hierarchy</h3>
<h3>Localized content</h3>
<h3>Acronym</h3>
<h3>Font-size</h3>
<h3>Color</h3>
<h2 id="q2">Accessible Table</h2>
<h2 id="q3">Accessible Links</h2>
<h2 id="q4">Accessible Images</h2>
<h2 id="q5">Accessible Titles</h2>
ローカライズしたコンテンツを作成するには、<html> グローバル要素で lang 属性を使用して、ページの言語を設定します。
<html lang="en">
異なる言語のコンテンツには、次に示すように、<p> または <span> 要素内で lang 属性を使用します。
<p><span lang="la">Carpe diem </span>(seize the day)</p>
省略形には abbr タグを使用します。
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.</p>
コンテンツのフォントは、常に相対サイズにします。絶対サイズや固定サイズは、ブラウザーのフォント拡大/縮小機能が制限されるため、使用しないでください。フォント サイズをブラウザーの既定サイズから変更するには、以下のいずれかを使用します。
- パーセント (%)
- em (大文字の M のサイズと相対)
- ex (大文字の X のサイズと相対)
- キーワード (small、medium、large、smaller、larger など)
以下に例を示します。
font-size:100%;
line-height:1.125em;
色は、視覚補助として使用し、情報を表すためだけに使用することは避けます。ページをアクセシビリティ対応にするには、前景と背景にコントラストが大きく異なる色を使うことが重要です。W3C は、通常のテキストにはコントラスト比を 4.5:1 にし、サイズが大きなテキストにはコントラスト比を 3:1 にすることを推奨しています。
フォーム検証では、個々の input 要素に色付きの背景を表示してエラーを示すことがありますが、色覚に障碍のある方は判別できない可能性があります。同じ情報に複数の手掛かり (エラーを示す label など) を作成するようにします。
スタイル シートで色を使用するときは、補色を使用するよう background-color 要素を設定します。背景を黒くするとコンテンツが読みやすくなるユーザーもいるため、ページの色は暗めのテーマに変更できるようにします。以下に例を示します。
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.125em;
background-color:#212222;
color:#242424;
}
標準の表には、通常ヘッダー行があり、場合によってフッター行もありますが、単純な table タグではこれらを区別できません。しかし、HTML5 では、新しく便利なタグが多数用意されています。
- <caption>: 表のタイトル
- <details>: 追加の詳細情報を表示し、ユーザーは必要に応じて表示と非表示を切り替えることができる
- <summary>: 実際の表データが読み込まれる前にスクリーン リーダーによって読み上げられる
- <thead>: 表のヘッダー行を示す
- <tfoot>: 表のフッター行を示す
図 12 に、AT デバイスをアクセシビリティ対応にするサンプルの HTML 表のコードを示します。
図 12 アクセシビリティ対応の表
<h4>Table with Caption, Summary and Details</h4>
<table>
<caption>
<strong>Lorem Ipsum.</strong>
<details>
<summary>Help</summary>
<p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and </p>
</details>
</caption>
<thead>
<tr>
<th>Table header column 1</th>
<th>Table header column 2</th>
<th>Table header column 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table footer column 1</td>
<td>Table footer column 2</td>
<td>Table footer column 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table data column 1</td>
<td>Table data column 2</td>
<td>Table data column 3</td>
</tr>
</tbody>
</table>
リンクを作成するとき、よく使用される "ここをクリックしてください" や "詳細情報" と表示されるリンクは使用しません。title 属性と意味のあるアンカー テキストを使用します。リンクを追加する適切な方法を以下に示します。
<p>Designandmethod.com has an article on accessibility. See the <a title="click for more information at the Design & Method Web site" href="http://designandmethod.com">Big picture at Design and Method</a></p>
ASCII 記号の使用には注意が必要です。複数のページがあるときは、次の一連の項目に前後するために不等号 (> および <) を使用するのは避け、「次の 10 項目」や「前の 10 項目」などの明確なテキストを使用します。階層リンク ナビゲーションで不等号を使用するのは合理的のように思えますが、残念ながら、スクリーン リーダーは「次へ >>」を「次へ、大なり、大なり」と読み上げるため実用的ではありません。設計上「>」が必要な場合は CSS による背景画像を使用します。
最後に、リンクにはアンダーラインを引きます。これで、色覚に障碍のある方も、そのテキストがリンクであると判別できます。これは、スタイル シートで decoration を使用して行うことができます。
{
text-decoration: underline;
display:block;
border-bottom:1px solid #000;
}
画像をアクセシビリティ対応にするには、まず意味のある alt 属性 を使用して、装飾用の画像に空の alt (alt="") を適用します。title 属性を含めることを忘れないでください。title 属性は、alt 属性を使用できない場合にツールチップとして表示され、スクリーン リーダーによってチェックされます。alt 属性と title 属性がどちらも認識されない場合、AT デバイスは画像の名前を読み上げるため、画像の名前を意味のあるものにします。
画像、または AT デバイスに関連しないすべての要素には、role=presentation を使用します。画像マップを含める場合は、領域ごとに alt を使用します。画像に figure タグと figcaption タグを使用することもできます。アニメーション画像は、てんかんを持つユーザーが発作を起こす可能性があるため、使用を最小限に抑えます。
画像をアクセシビリティ対応にする方法を次の例に示します。
<figure><img src="images/maingraphics.png" alt="Example screen shot" title="main graphics showing screenshot example"><figcaption>Image with caption.</figcaption></figure>
次に画像マップのコードを示します。
<area shape=rect coords=0,0,10,10 href="example.htm" alt="example">
アクセシビリティ対応のコンテンツを作成するにあたって最後に重要となるのは、タイトルの先頭に関連するキーワードを含めることです。関連するキーワードが先頭に追加された簡潔なタイトルを使用することで、視覚に障碍のある方が内容を大まかに理解する速度を上げることができます。
次の例では、同じように「How to make」が各タイトルに付いているため読みやすいように思えますが、スクリーン リーダーはこれらの 3 語をタイトルごとに繰り返し読み上げるため、ユーザーがコンテンツをすばやくざっと理解するのが困難になります。タイトルの先頭に的確で関連性の高いキーワードを使用すれば、アクセシビリティを高めることができます。
<a href="#q1"><!--How to make content Accessible-->Accessible Content</a>
<a href="#q2"><!--How to make links Accessible-->Accessible Links</a>
<a href="#q3"><!--How to make images Accessible-->Accessible Image</a>
<a href="#q4"><!--How to make titles Accessible-->Accessible Titles</a>
次に、(オーディオとビデオを含む) アクセシビリティ対応の Web サイト に、About ページを追加する方法について簡単に紹介します。ここでは、オーディオ要素とビデオ要素をアクセシビリティ対応にするために必要なことを確認します。
オーディオとビデオを備えたアクセシビリティ対応の About ページ
About ページに、Web サイトの設立について説明するビデオを含めるとします。HTML5 の <audio> タグと <video> タグを使用すると、Web ページにマルチメディア コンテンツを組み込みやすくなりますが、母語話者以外のユーザー、聴覚に障碍のある方、視覚に障碍のある方、スピーカーが機能しないコンピューターを使用しているユーザー、騒がしい環境にいるユーザーなどは、コンテンツへのアクセスに問題が生じます。このような問題には、それぞれ従うべき特定のガイドラインがあります。オーディオ コンテンツとビデオ コンテンツをアクセシビリティ対応にする方法をいくつか示します。
- オーディオやビデオの台本をテキスト形式で HTML 書式に含める。
- メディア タグをサポートしていないブラウザー用に代替コンテンツを含める。
- 最低でもコントロールに [オン]/[オフ] ボタンを用意する。
- メディアを自動開始しないで、ユーザーが開始するようにする。
- メディア ファイルをダウンロードするリンクを含める。
- ビデオ/オーディオ トラックを使用して、キャプション (クローズド キャプションやサブタイトル) を含める。
サブタイトルは、通常ビデオ内で発話された語を時系列に並べたトランスクリプションで、ユーザーがコンテンツを理解するのに役立ちます。キャプションには、発話された語に加えて騒音、サウンド効果、音楽などのトランスクリプションも含まれているため、聴覚に障碍のある方にとっては優れたソリューションになります。
現時点では、track 要素を次の形式と合わせて使用することで、キャプションとサブタイトルをサポートできます。
- WebVTT: ビデオ コンテンツのキャプション用
- SMPTE-TT: サブタイトル用の時間付きテキスト形式
- SRT: サブタイトル ファイル用
ビデオに関するアクセシビリティのサポートはまだ発展途上ですが、1 つの例を以下に示します。
<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<track src="en.vtt" kind="subtitles" srclang="en"
label="English p subtitles" default/>
<track src="en.ttml" kind="captions" srclang="en"
label="English p captions" default/>
</video>
メディアに対する細かい制御は用意されていませんが、HTML5 にはメディア要素のコントロールを表示する controls 属性が用意されています。これらのコントロールにはキーボードでアクセスできます。
- Space キー: 再生と一時停止を切り替える。
- 左矢印キーまたは右矢印キー: ビデオの前後 5 秒間の早送りまたは巻き戻しを行う。
- Ctrl + 左矢印キーまたは Ctrl + 右矢印キー: ビデオの前後 60 秒間の早送りまたは巻き戻しを行う。
- Home + 左矢印キーまたは Home + 右矢印キー: ビデオの冒頭または最後にジャンプする。
- 上矢印キーと下矢印キー: ボリューム用のボタンにフォーカスがある場合、ボリュームを調節する。
Visual Studio 2012 におけるアクセシビリティのサポート
さいわいなことに、Visual Studio 2012 では容易にアクセシビリティに対応できます。HTML 要素の ARIA ロール、属性、およびプロパティに対して IntelliSense が機能するようになりました (図 13 と図 14 参照)。
.png)
図 13 Visual Studio 2012 における ARIA ロールの IntelliSense サポート
.png)
図 14 IntelliSense でサポートされる ARIA のプロパティ
アクセシビリティ対応の Web ページを作成した後は、本当にアクセシビリティ要件を満たしているかどうかをチェックすることをお勧めします。この作業は、Visual Studio 2012 でページを右クリックし、[アクセシビリティのテスト] をクリックすることで簡単に行うことができます (図 15 参照)。
.png)
図 15 Visual Studio 2012 でチェックできる Web ページのアクセシビリティ
次に、基準とする Web Content Accessibility Guidelines (WCAG) のレベルを、優先度 1 または優先度 2 (bit.ly/S0Nb66、英語) から選択します。また、Access Board Section 508 に関するチェックも行うことができます。Access Board Section 508 とは、米国政府によってリハビリテーション法の第 508 条で定義された基準です (section508.gov)。ガイドラインを選択すると、Visual Studio 2012 によってすべての HTML 要素がチェックされ、そのページにおけるすべてのエラーまたは警告に関する詳細なレポートが表示されます (図 16 参照)。
.png)
図 16 Visual Studio 2012 における Web コンテンツのアクセシビリティに関するレポート
今回は、HTML5 を使用してアクセシビリティ対応の Web サイトを作成する方法について説明し、Visual Studio 2012 の一部のアクセシビリティ機能がどのように役立つかを紹介しました。これらは、アクセシビリティ対応の Web を研究する際、作業において便利な追加要素となるでしょう。
Rajesh Lal は、Nokia に勤めており、HTML5 および Wev テクノロジに熱心に取り組んでいます。彼は、Windows ガジェット、Web ガジェット、モバイル Web、および Silverlight テクノロジに関する書籍を複数執筆しています。ソフトウェア設計と手法におけるアクセシビリティに関するディスカッションについては、dsgnmthd.com/accessibility (英語) を参照してください。筆者に関する詳細については、iRajLal.com (英語) を参照してください。
この記事のレビューに協力してくれた技術スタッフの Art Barstow、Lakshmi C. Chava、および Dennis Lembrée に心より感謝いたします。