アクセス可能な Web アプリケーションの開発とテスト_html/css_WEB-ITnose

A11Y と呼ばれるアクセシビリティは、ソフトウェア製品のアクセシビリティと使いやすさを指します。 A11Y の出発点は、すべてのグループと人々が Web またはソフトウェア アプリケーションにアクセスできるようにすることです。この記事では、主に Web アプリケーションにアクセスするのが難しい人々を対象として、Web アプリケーションのアクセシビリティに焦点を当てています。いくつかの主要なグループ向けに、開発中に解決すべき課題と問題が紹介されています。

視覚障害のある人は、普通の人のように目で Web を閲覧することができません。現時点での解決策は、画面読み上げソフトウェアを使用して Web ページ上のコンテンツを音声に変換し、ユーザーが画面上のコンテンツを理解しやすくすることです。聴覚や視覚に障害のある人も、Web コンテンツを点字に変換して読み取れるようにすることができます。その結果、開発者にとっての要件は次のとおりです。マウスが使用できなくなるため、キーボードのサポートを提供する必要がある。ユーザーが知っておくべき情報を示す便利なリンクを提供する必要がある。色が認識できなくなります。今日の Web サイト上で増え続けるオーディオおよびビデオ コンテンツを聴覚障害のある人が理解できるようにするには、字幕が必要です。

障害のある人にとって Web アプリケーションを使いやすく、アクセシブルにするにはどうすればよいでしょうか?まず、Web 開発者はこの標準に従って、アクセシビリティに使用される要素を識別できるようにする必要があります。これは W3C の一部であり、主にアクセシビリティを担当します。標準、ガイドライン、および Web コンテンツ アクセシビリティ ガイドラインの開発 (WCAG) は、WAI によって開発された一連の文書です。現在のバージョンは、Web2.0 用の WAI-Accessible Rich Client Applications です。

Webking は、Parasoft によって開発された自動テスト ツールで、ホワイト ボックス、ブラック ボックスに使用できます。この記事では、Webking による A11y の検査とテストに主に焦点を当てています。Webking が解決する問題は、CI162 標準を満たしていない要素を見つけることです。違反; SV: 重大な違反; PV: 重大な違反の可能性; ローカル ファイル検査テストと、静的テスト、動的テスト、および Ajax テストを含む Web サイト コンテンツの作成をサポートします。図 1 に示すように、WCAG2.0 に変換します。

静的ページの場合は、静的検査用にページのソース コードを直接コピーできます。静的 Web サイトの場合は、プロジェクトを作成することもできます。図 2 に示すようにスキャンします。

startURL に URL アドレスを入力するか、テスト用のローカル ファイルのローカル パスを指定します。Webking は、記録するための記録機能を提供します。ユーザーが Web サイトを操作するときにテストを再生します。

ますます普及している Ajax アプリケーション向けに、WebKing は仕様に準拠していない HTML をチェックアウトし、詳細な変更リファレンスを提供します。 、開発者が問題を迅速に特定して解決するのに役立ちます。

JAWS は Freedom Scientific のソフトウェアで、現在のバージョンは 11.0.734 です。ユーザーは、仮想バッファ内のページ全体をブラウズし、このバッファ内の対応するテキストを 1 文字ずつ、または 1 行ずつ聞くことができます。 ユーザーがアプリケーションと対話する必要がある場合、この仮想バッファーに依存できなくなり、アプリケーションと対話するためにこのバッファーから飛び出す必要があります。 JAWS は、バージョン 9 以降、通常の Form 要素の対話モードへの自動切り替えをサポートしています。 JAWS を使用する場合はマウスを使用しないでください。マウスを使用すると、仮想バッファーでエラーが発生し、読み取り内容が乱雑になります。もう 1 つの正しいテスト方法は、最初に JAWS を起動し、次にブラウザを開いて対応する URL を入力し、ページ全体の読み込みが完了したときに操作を開始することです。読み込みプロセス中に、JAWS は読み込まれたページの割合を表示します。この方法でのみ、この仮想バッファに格納されている内容の正確性を保証できます。

アクセシブルな Web アプリケーションを開発およびテストする手順

アクセシブルな Web アプリケーションを開発およびテストする主な手順は次のとおりです。

• Webking は、CI162 に対応するリストを満たさない HTML ページ内の項目をチェックするために、通常は単体テスト中に開発者によって実行される静的チェックを実行します。現在、WebKing は ARIA をサポートしていないため、多くの ARIA タグを正しく認識できません。そのため、WebKing によって検出されたエラーを 1 つずつチェックして、実際にチェックリストに違反しているのか、WebKing が ARIA タグを認識できないことが原因であるのかを判断する必要があります。
• キーボードのサポートでは、マウスで実行できるすべての操作がキーボードでも同じ効果を達成できることが必要です。
• ハイ コントラストのサポート: ハイ コントラスト モードでは、画面は白黒のみです。このモードでは Web アプリケーションが情報を失わないようにする必要があります。
• 画面読み上げソフトウェアのサポートは通常、テスターに​​よって行われます。テスターは、画面読み取りソフトウェアを使用して視覚障害者をシミュレートし、ページ上のコンテンツが基本的に画面読み取りソフトウェアによって認識され、さまざまな操作を完了できることを確認しました。

アクセシブルな Web アプリケーションを開発するには、ツールやブラウザのサポートが必要なだけでなく、開発者が最終的な目標を達成するために特定の仕様に従い、対応する要素情報を提供する必要もあります。以下では、開発におけるいくつかのベスト プラクティスを取り上げます。

1. 画面読み取りソフトウェアが画像アニメーションの内容を明確に読み取ることができるように、画像またはアニメーションに代替情報を提供する必要があります。図 4 に示すように:

対応する HTML は次のとおりです。

リスト 1. 画像の HTML

<img src="cat.gif" alt="Image about cat" />

2. 一部の装飾的な画像では、画面読み上げソフトウェアがこの要素を無視できるように、alt を空に設定する必要があります。図 5 など、ページ ヘッダーの装飾に使用される画像は、実際には貴重な情報を伝えません。

対応する HTML は次のとおりです。

リスト 2. 装飾画像の HTML

<img src="ring.gif" alt="" />

空の alt 属性を設定する目的は、Webking のチェックに合格し、画面読み上げソフトウェアがこの要素を無視できるようにすることです。

3. グラフ ファイルの場合、alt 属性の設定は、内部の詳細をすべて記述することなく、グラフの情報を簡潔に表現する必要があります。たとえば、以下の図 6: 代替情報は、1996 年から 2004 年にかけて 400 万から 1,600 万まで着実に成長し続けた売上に設定されています。毎年の成長量を詳しく説明する必要はありません。

4. リンクに配置された画像について、既にテキストの説明がある場合、画面読み上げソフトウェアが同じ内容を繰り返すのを防ぐために、alt も空に設定されます。 。たとえば、次の HTML:

リスト 3. alt を繰り返し設定しない画像

<a href=”http://apple.com/iphone/”> 	 <img src=”iphone.jpg” alt=””>Apple iPhone  </a>

A の内容は、すでに次のことを示しています。 this is an apple 携帯電話の場合、IMG の alt 属性を再度設定する必要はありません。そうしないと、画面読み上げソフトウェアが繰り返しのコンテンツを 2 回続けて読み上げることになり、混乱が生じます。

5.CSS はスタイルと構造を分離し、HTML コードの構造を明確にします。多くの装飾画像も CSS で読み込まれます。これによって生じる問題の 1 つは、CSS の画像をハイコントラスト モードで表示できないことです。画像が単なる装飾的なものではなく、機能をトリガーすることもできる場合は、その画像を CSS から取り出して、独立した IMG または INPUT 要素として使用する必要があります。たとえば、画像を保存するための次のプロンプト

は CSS で記述されています。

リスト 4. 画像は CSS で記述されています

<div class=” save_button” />  .save_button{ 	 background: url("images/save_button.png"); 	 width: 33px; 	 height: 33px; 	 vertical-align:middle; 	 }

このように、ユーザーがハイ コントラスト モードに切り替えると、画像は空白になり、ユーザーはクリックして保存できなくなります。次のように変更します。

リスト 5. CSS で画像を取り出します

<img src=“images/save_button.png” alt=“save”/>  <input type=“image” src=“images/save_button.png” alt=“save”/>

6. リスト内の画像を選択します。選択されているかどうかを区別するには、境界線の色を使用して識別するのが通常のアプローチです。以下に示すように、選択された画像の境界線は青色です

図 8. 選択された画像の通常のレンダリング リスト 6. 画像が選択されたときに対応する CSS

.selectedIcon{ 	 border:5px solid #ACC6F3;  }  .unSelectedIcon{ 	 border:5px solid #C0D4F7;  }

しかし、そのような実装は実際にはアクセシビリティ チェック リストの 1 つの項目に違反しています。高コントラストでは黒か白しか存在しないため、さまざまな要素を色だけで区別することはできません。高コントラストでは効果がありません。簡単に考えられる方法としては、選択されている場合のみ枠線を追加し、選択されていない場合は枠線を表示しないことで区別することが考えられます。次のように変更します。

リスト 7. 画像が選択されたときの CSS の変更

.selectedIcon{ 	 border:5px solid #ACC6F3;  }  .unSelectedIcon{ 	 border:0 none;  }

これによって生じる問題は、画像 選択するとフローティングになり、5 ピクセルの境界線が追加されますが、見栄えが非常に悪くなります。では、レイアウトがアクセシビリティ要件を満たしていることを確認するにはどうすればよいでしょうか? 上記の CSS に基づいてパディング属性を使用して、レイアウトを正しくすることができます。

リスト 8. 画像が選択されたときに CSS を修正する

.selectedIcon {border:1px solid #ACC6F3; 	 padding:4px;}  .unSelectedIcon {border:0 none; 	 padding:5px;}

これにより、全体の境界線が 5 ピクセルになります。高コントラスト時の効果を図 9 に示します。

図 9. 画像を選択した場合の高コントラスト効果

Table 分为两类：一类是做布局的 table，一类是数据 table。对于布局用的 table，读屏软件没必要知道这是一个表，可以通过设置 role=presentation 使 JAWS 忽略这个表，只关注里面的内容。对于数据表格，则需要设置 caption 属性，说明整个表是用来做什么的，使得 JAWS 可以告诉用户这个表的作用。对于每一个单元内的数据，还应该通过 th 属性使得 JAWS 能识别这个数据的表头是什么。对于复杂表，可以通过 id 和 header 属性来标识。如图 10 所示 :

以第一行的数字 5 为例，正常人可以很容易得看出 5 指的是一年级 Mr.Henry 老师这个班的男生有 5 个，但当 JAWS 面对这个数字 5 的时候，怎么能识别出来呢？通过 header 来标识表头，header 的值就指向对应表头的 id。对应的 HTML 如下：

<tr> 	 <th id="class"> Class </th> 	 <th id="teacher"> Teacher </th> 	 <th id="boys"> #of Boys </th> 	 <th id="girls"> #of Girls </th>  </tr>  <tr> 	 <th id="1stgrade" rowspan="2"> 1st Grade </th> 	 <th id="MrHenry" headers="1stgrade teacher"> Mr . Henry </th> 	 <td headers="1stgrade MrHenry boys"> 5 </td> 	 <td headers="1stgrade MrHenry girls"> 4 </td>  </tr>  <tr> 	 <th id="MrsSmith" headers="1stgrade teacher"> Mrs . Smith </th> 	 <td headers="1stgrade MrsSmith boys"> 7 </td> 	 <td headers="1stgrade MrsSmith girls"> 9 </td>  </tr>  <tr> 	 <th id="2ndgrade" rowspan="3"> 2nd Grade </th> 	 <th id="MrJones" headers="2ndgrade teacher"> Mr . Jones </th> 	 <td headers="2ndgrade MrJones boys"> 3 </td> 	 <td headers="2ndgrade MrJones girls"> 9 </td>  </tr>  <tr> 	 <th id="MrsSmith" headers="2ndgrade teacher"> Mrs . Smith </th> 	 <td headers="2ndgrade MrsSmith boys"> 4 </td> 	 <td headers="2ndgrade MrsSmith girls"> 3 </td>  </tr>  <tr> 	 <th id="MrsKelly" headers="2ndgrade teacher"> Mrs . Kelly </th> 	 <td headers="2ndgrade MrsKelly boys"> 6 </td> 	 <td headers="2ndgrade MrsKelly girls"> 9 </td>  </tr>

Form 元素需要关联一个 label 元素，所有的 button 都已经有了一个隐含的 label，所以不再需要显示关联。对于 Input，Select， Checkbox， Radio button 则都需要显示一个 label 元素。这样 JAWS 在面对这个表单元素的时候才能告诉用户这个表单的作用。例如下面清单 10 中的 input， JAWS 会告诉用户这个是需要输入名字的一个输入框。当 label 属性不方便使用的时候，还可以通过 title 属性达到相同的效果，也可以满足 Webking 检查的需要。清单 10 中的两种写法都可以。但前提是 Name 不需要被显示出来。当 title 和 label 都设置的时候 title 会被 JAWS 忽略。

清单 10. Form 元素示例

<label for="name1">Name:</label>  <input name="name" id="name1" size="30" /> 或  <input name=”name” id=”name1” size=”30” title=”name”>

当一个表单元素如果前后都需要描述的时候， label 就显得力不从心了。ARIA 规范的出现解决了这一问题。aria-labelledby 属性可以设置多个值，说明这个表单元素是被那些值所描述的, aria-describedby 属性则更详细的扩展了这个描述。如图 11 所示：

图 11. 需要多个 Label 描述的输入框

当 JAWS 把焦点放在 10 上的时候，会告诉用户 10 表示的是 10 分钟刷新一次。对应的 HTML 代码如清单 11 所示。aria-required 的属性标识这个元素是必须的，JAWS 识别此元素并告知用户必须输入此元素。我们可以看到中间的 input 元素被多个元素来描述（aria-labelledby 中的几个 id 值），这样 JAWS 就能够识别这个标签，并且按照这个标签的顺序读出前后的 label， 并且提示用户如果还有更详细的描述以及如何获取这个更详细的描述。当用户需要时，aria-describedby 所对应的元素信息就会被读出来。增强了视力有障碍人士与普通人了解内容的一致性。

清单 11. 需要多个 Label 描述的输入框

<div> 	 <span id="labelRefresh"> 		  <label for=“refreshTime">Refresh after</label> 	 </span> 	 <input id=“refreshTime" type="text" aria-describedby=“refreshDescriptor" 	 aria-labelledby=" labelRefresh refreshTime refreshUnit" value="10"/> 	 <span id=“refreshUnit"> minutes</span>  </div>  <div id=“refreshDescriptor">Allows you to specify the number of minutes of  refresh time.</div>

关于 Tabindex 与获取焦点的顺序

Tabindex 属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道，使用 Tab 键可以按文档顺序 tab 到所有可以获取焦点的元素。Tabindex 可以设置为 -1， 0 或者是任何自然数。

• Tabindex = 0 就使原本无法获取焦点的元素可以在用户 tab 的时候获取焦点，并且按照文档顺序排列。
• Tabindex = -1 使得元素可以获取焦点，但当用户用 tab 键访问的时候并不出现在 tab 的列表里面。可以方便的通过 Javascript 设置上下左右键的响应事件。非常有利于应用小部件（widget）内部的键盘访问。
• Tabindex 设置为大于 0 的数字则可以控制用户 Tab 时候的顺序，一般很少用。

当用户使用 Tab 键浏览页面时，元素获取焦点的顺序是按照 HTML 代码里面元素出现的顺序排列的，有时跟实际看到的页面顺序并不一致。例如图 12 所示的页面：

图 12. 图片被选中时的高对比度效果图

按照页面顺序，tab 的顺序为自左向右，可实际上操作的时候却发现“search all”出现在了“go to edit”的前面。对应的 HTML 代码如清单 12 所示：

清单 12. 页面获取 focus 的顺序

<div>    <span style=”float:left;”> 			 welcome page    </span>    <span style=”float:right;margin-left:6em;”> 			 search all    </span>    <span style=”float:right;”> 		   go to edit    </span>  </div>

原来是通过 float:right 达到了布局上的效果，实际文档顺序确实是 search all 在前面的。所以为了不引起混淆，最后能保持代码的顺序与实际呈现出来的页面上的顺序一致。可以修改上面的代码为清单 13 所示：

清单 13. 页面获取 focus 的顺序 -- 调整后

<div>    <span style=”float:left;”> 			 welcome page 	 </span> 	 <span style=”float:right;width:15em;”> 		<span style=”float:left;”> 				   go to edit 	    </span> 		<span style=”float:right;”> 				  search all 	    </span> 	 </span>  </div>

隐藏的内容分为两种，一种是为了布局的需要，在条件满足的情况下才会显示出来；另一种是只给读屏软件读的内容：有时候我们为了使读屏软件更准确的读取信 息，会提供一些额外的描述来达到此效果，但为了不给正常用户带来困扰，这些内容对正常用户来说是隐藏起来的。隐藏内容我们通常用 display：none 或者 visibility:hidden 来表示，但读屏软件同样也会忽略这类内容。那如何隐藏内容又能使读屏软件读出来呢？另外一种隐藏内容的方式是使用绝对定位使得内容不出现在当前屏幕上， 如：{position:absolute;top:-30000px;} 所以在选择使用哪种方式隐藏内容时就需要慎重考虑，display:none visibility:hidden 对任何人都是隐藏的，如果想只给读屏软件读到就需要使用上面的绝对定位方式。例如在图 13 所示的菜单的选中项上加上如下的 css：

清单 14. 只给读屏软件读的内容

<span class="access">  is selected</span>  .access{ position:absolute; top:-30000px; }

这样当用户使用 JAWS 浏览每一个菜单项时，在选中项上就能听到哪一项是当前的所选中。

系统切换到高对比度模式，只有黑白两色，很多在正常模式下依靠颜色来区分的（如界面边界）都无法辨识了，写在 CSS 里面的很多图片也都无法显示出来。此时就需要在高对比度下增加边界或者另外 DOM 节点来显示同样的内容。Dojo 的 WAIState Api 提供了一种方式来判断系统是否处于高对比模式，如果是则在 body 上增加 dijit_a11y 的一个 CSS。这样可以在正常模式下显示一个 DOM 节点在高对比度下显示另外一个 DOM 节点，从而方便的区分。如图 14 所展示的正常模式与高对比模式下的对比：

图 14. 高对比模式与正常模式的对比

正常模式下如左图所示，子菜单通过一个图片标识，但这个图片是在 CSS 里面设置的，切换到高对比度模式即无法显示出来。此时，我们增加一个在高对比度模式下才显示出来的节点，达到如图右所示的效果，在高对比度下显示一个 + 号。代码清单如清单 15 所示，在高对比模式下，dijit_a11y 加在 body 上，dijitMenuExpandA11y 所对应的 DOM 即应用右面的 CSS 得以显示出来。

清单 15. 正常模式与高对比模式显示不同的 Dom 节点

<td class="dijitReset dijitMenuArrowCell" waiRole="presentation"><div dojoAttachPoint="arrowWrapper" style="visibility: hidden"><img src="${_blankGif}" alt="" class="dijitMenuExpand"><span class="dijitMenuExpandA11y">+</span></div> </td>  tundra .dijitMenuExpand { width: 7px; height: 7px; background-image: url('images/spriteArrows.png'); background-position: -14px 0px; } .dijitMenuExpandA11y {display: none; } .dijit_a11y .dijitMenuExpandA11y {display: inline; }

本文介绍了开发测试可访问无障碍的 Web 应用的工具，步骤以及开发中的最佳实践。应用这些最佳实践与小技巧能帮助您在开发中迅速的为您的 Web 应用提供 A11Y 的支持。

9ea098decff8d02ee0f6079703c996da 6e0e94f3f36e60871feb7b278d3e065e 11ca1cea138d57f959a047834c1933cd

• 参 考 “ WAI-ARIA Roadmap 站点 ”，介绍 ARIA 的发展蓝图。
• 参考 Mozilla ARIA 文档 ，介绍如何使得 widget 和 Ajax 应用更加易用。
• 查看 W3C WAI-ARIA ，了解可访问的 富客户端应用指南的详细介绍。
• 参考 Dojo 官方网站 ，一个用 JavaScript 语言实现的开源 DHTML 工具包。
• developerWorks 技术活动 和 网络广播 ：随时关注 developerWorks 技术活动和网络广播。
• developerWorks Web development 专区 ：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。

http://www.ibm.com/developerworks/cn/web/1003_sunqy_access/