WAI-ARIA アクセス可能な Web 仕様_html/css_WEB-ITnose

アクセシブルなデザイン

アクセシブルなデザインとは、製品、機器、サービス、環境が障害のある人向けに設計されていることを意味します。アクセシブルなデザインの概念は、人の支援技術 (コンピューターのスクリーン リーダーなど) との互換性を意味し、直接アクセス (つまり独立) と「間接アクセス」を保証します。

アクセシブル デザインは「アクセシブル」として理解でき、身体障害のある人、特別なニーズを持つ人、または支援技術に依存している人が Web にアクセスできるようにすることに重点を置いているシステムまたはエンティティにとって有益です。そして、アクセシブルなデザインを研究開発することは、すべての人に利益をもたらします。

アクセシビリティのデザインをユーザビリティと混同しないでください。 ほとんどの場合、ユーザビリティとは、指定された目標を効果的に達成するために、特定の環境で特定のユーザーが使用できる製品 (デバイス、サービス、環境など) の能力を指します。

アクセシブルデザインとユニバーサルデザインは密接な関係があります。ユニバーサルデザインとは、さまざまな状況であらゆる能力や業務を行う人々が利用できる、可能な限り幅広い人々が利用できる製品を作成するプロセスを指します。つまり、（アクセスの障害の有無に関係なく）誰もがアクセスできる製品です。ウェブ）。

リッチ インターネット アプリケーション

HTML、CSS、JavaScript を使用してリッチ インターネット アプリケーションを作成する場合、開発者は障害を持つ人々を置き去りにすることがよくあります。これらのアプリケーションは、支援技術が必要なセマンティック情報を理解できる機能を提供していないためです。 。残念ながら、これまでのところ大きな変化はありませんが、実際にこの状況を逆転させることはできます。 WAI-ARIA は、リッチ インターネット アプリケーションを理解できるようにするために十分なセマンティクスを提供でき、現在では比較的よくサポートされています。

ARIAとは何ですか?

ARIA は、「**Accessible Rich Internet Applications**」の略称です。これは、W3C の Web Accessibility Initiative (WAI) によって 2014 年 3 月 20 日にリリースされた、Accessible Rich Internet Application Implementation Guide (アクセシブル リッチ インターネット アプリケーション実装ガイド) です。

WAI-ARIA は、障害を持つ人々に動的でインタラクティブな Web コンテンツへのバリアフリー アクセスを提供する技術仕様です。 WAI-ARIA およびその他のサポート文書については、「WAI-ARIA の概要」で説明されています。

簡単な説明:

• ARIA は、Web アプリケーションと Web ページをよりアクセスしやすくするのに役立つ W3C からの独立した仕様です
• ARIA は主に、 Web ページの使いやすさと、障害を持つ人々が Web ページにアクセスできるようにする
• HTML5 は ARIA を使用し始めており、W3C によってリリースされた他の多くの標準も ARIA を使用し始めています
• ARIA は HTML のセマンティックです補充してください。既存の HTML 要素と属性よりも完全な表現機能があり、ページ内の要素の関係と意味がより明確になります
• ARIA 仕様は、HTML ドキュメントを解析する標準的な方法であるブラウザーと補助テクノロジーの標準を提供します。人々がさまざまな方法で Web にアクセスして使用できるようにする

ARIA の使用方法

HTML に適用される ARIA には、**role** (役割) と 2 つの部分があります。 **aria-** で始まる属性。その役割は次のとおりです:

• role (role) 要素の役割を識別します
• aria- 属性は、それに関係するもの(特性)とそれがどのようなもの(状態)かを記述します

HTMLにおけるARIA

ARIAはHTML内で使用されます 独自の仕様があり、これは、HTML で ARIA を使用すると Web ページがアクセス可能になり、アクセシビリティが向上するという意味ではありません。つまり、ARIA をうまく使用しないと、別の落とし穴に陥り、ページがアクセスしにくくなるということです。

HTML での ARIA に関するドキュメントは、ここで読むことができます。

HTML での ARIA の使用法

ARIA 使用規則 1

使用する要素 (HTML5) がセマンティックである場合、これらの要素を再定義せずに使用する必要があります。 ARIA のロール、状態、または属性を追加します。

それでは、ARIA がいつ利用可能になり、いつ利用できなくなるのでしょうか?

• HTML (HTML5) 要素機能がサポートされているかどうかに関係なく、セマンティックでない限り、ARIA を使用して
• の使用から視覚的なデザインの制約を除外できます。特定の要素、ただしスタイル必須要素は除く
• 現在サポートされていない HTML 機能

ARIA 使用規則 2

は、実際に使用する必要がない限り、セマンティクスを変更しません。たとえば、開発者はタイトルを作成したいと考えていますが、それはボタンです。

これは行わないでください:

<h1 role=button>标题按钮</h1>

これを行うことをお勧めします:

<h1><button>标题按钮</button></h1>

あるいは、正しい要素を使用していませんが、次のようにすることもできます。

<h1><span role=button>标题按钮</span></h1>

非インタラクティブな要素がインタラクティブな要素として使用される場合、開発者は ARIA を使用してセマンティクスを追加し、適切なスクリプトを使用してインタラクティブな動作を追加する必要があります。

ARIA 使用規則 3

すべての ARIA コントロールにはキーボード イベントが必要です。

コンポーネント (ウィジェット) を作成すると、ユーザーはキーボードを使用して、作成したコンポーネントを見つけて、対応する操作を実行できます。

例如，如果使用 role=button 必须能够接收到焦点和用户能够使用键盘激活相应动作，比如Win操作系统上的 enter 和iOS系统上的 return 或者键盘的空格键( space )。

ARIA使用规则四

不建议在可获取焦点元素( focusable )使用ARIA的角色： role=presentation 或 aria-hidden="true" 。

可获取焦点元素上使用ARIA这两规则，会导致一些用户无法获取元素焦点。

不要这样做：

<button role=presentation>按下我，按下我</button>

也不要这样做：

<button aria-hidden="true">按下我，按下我</button>

如果说一个交互元素无法看到或者不能与之交互，那么可以尝试使用 aria-hidden ，例如：

button {visibility:hidden}<button aria-hidden="true">按下我，按下我</button>

如果一个交互元素使用 display:none; 来隐藏，那么它对应的 可访问性 也将一并被删除，如此一来，在可交互元素上使用 aria-hidden="true" 就没有必要了。

ARIA使用规则五

所有交互元素都必须有一个 可访问的名称 。

当可交互元素的可访问性API的可访问名属性只有一个值时，那么可交互元素就只有一个可访问的名称。

比如下面的示例， input type="text" 有一个可见的 标签,但它并没有可访问的名称：

user name <input type="text">

或者:

<label>user name</label><input type="text" />

此时MSAA( Microsoft Active Accessibility )控制器的 accName 属性是空的：

相比之下，下面示例中 input type="text" 有一个可见的 标签并且包含一个可访问性名称：

user name <input type="text">

或者：

<label for="uname">user name</label> <input type="text" id="uname">

此时MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是 user name ：

另外 label 标签元素是不能被用来给自定义控件提供一个访问性名称，除非 label 引用了HTML的 labelable 元素 。

<!-- HTML input element with combox role -->  <label>  user name <input type="text"  role="combobox" >  </label>

MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是 user name ：

除此之外，使用非HTML labelable 元素来模拟控件，不管给其分配什么角色( role )都不会是HTML的 labelable 元素，比如下面的 div 元素：

<!-- HTML div element with combox role -->  <label>  user name <div  role="combobox"></div>  </label>

MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是空的：

ARIA 的角色 role

下面的表格详细的示意了HTML中元素如何使用ARIA的角色 role ，以及对应的含意：

を表します。 listbox メニュー メニューバー はメニューバーを表します

menuitem はメニュー項目 を表します

menuitemcheckbox チェック可能なメニュー項目

menuitemradio 個別にのみ選択できるメニュー項目を表します

オプション はオプション <🎜 を表します>

上の表には、すべての ARIA ロールがリストされているわけではありません。もちろん、すべての HTML 要素に対応する ARIA ロールがあるわけではありません。次の表は、一般的に使用されるタグ要素に対応する ARIA ロールをリストしています。

role 属性值

含义

HTML示意

说明

alert

表示警告

...

ajax操作返回错误信息的 div 标签 如Bootstrap中的 Alert组件

dialog

表示Modal弹出窗

...

自定义的弹出框,如Bootstrap中的 Modal组件

presentation

表示描述

text

删除HTML元素的语义化角色。加上后， 可访问树 就变成： 【注释一】

application

表示应用

...

例如自定义的时间选择器

button

表示按钮

使用 span 元素模拟按钮控件

checkbox

表示复选框

使用 div 模拟复选框

radio

表示单选按钮

div 要素を使用してラジオ ボタンをシミュレートします

コンボボックス

はフォーム コントロールを表します

入力要素、その type 属性値はテキスト、検索、電話、URL、または電子メールです。そして、aria-owns 属性値は list 属性と同じ値に設定されます。さらに、select 要素に multiple 属性がないか、size 属性の値が 1 より大きいです。

グリッド

はグリッド

< を意味します。 div aria-readonly="true " role="grid">

グリッドを表します

グリッドセル

グリッド セル

Fido

td の祖先要素 (または table 要素) は role="grid" を定義します (列ヘッダーまたは行ヘッダー、およびその祖先要素または table 要素は role="grid" を定義します)

グループ

はグループの合併を意味します

...< ; /div>

たとえば、Bootstrap のボタンの組み合わせ

はタイトル

div を使用して h1 をシミュレートします

はリストボックス

を表します。複数の属性とサイズ値を使用してシミュレートします。1 より大きい select 要素、または aria-multiselectable 属性値が false に設定されたデータリストです。たとえば、ドロップダウン選択ボックスのリスト項目をシミュレートするには、ul を使用します。

はメニュー

🎜>

HTML元素	ARIA ( role = )	备注
a	link	不带 href 属性的 a 元素不具有 role="link"
a	menuitem	父元素是一个菜单
article	article
aside	complementary
body	document
button	button
dd	definition
dialog	dialog
footer	contentinfo
form	form
h1~h6	heading	使用 aria-level 属性来设置标题的级别，对应的是 1~6
header	banner
hr	separator
img	img
input	button	input 的 type 属性为 button (或 image 、 reset 、 submit )
input	button	input 的 type 属性为 button (或 image )，并且其父元素是一个菜单 menu
input	checkbox	input 的 type 属性设置为 checkbox ，并且 aria-checked 默认值为 mixed
input	menuitemcheckbox	input 的 type 为 checkbox ,并且其父元素是一个菜单
input	textbox	input 的 type 为 text (或 password 、 search 、 telephone 、 email 、 url )
input	spinbutton	input 的 type 为 number
input	slider	input 的 type 为 rang
input	combobox	input 的 type 为 text 、 search 、 telephone 、 url 、 email ，并且 aria-owns 属性的值和 list 属性值一样
li	listitem	父元素是 ol 或 ul 或 menu
main	main
nav	navigation
ol 或 ul	list
optgroup	group
option	option	aria-selected 的默认值为 true
progress	progressbar	aria-valuemax 设置最大值， aria-valumin 设置最小值， aria-valuenow 设置当前值
section	region
table	table
tbody	rowgroup	thead 对应的 role 值和 tbody 一样
td	cell	祖先元素具有 table 的作用，如果祖先元素是一个 grid ，那么其 role 为 gridcell
th	columnheader	表格的列标题，表格的横标题对应的 role 为 rowheader
tr	row

注释一

通过一个示例来看看 role="presentation" 运用前后对HTML元素可访问树对比。

<table> <tr>  <td>    <table>     <tr>      <td>       <abbr>API</abbr>      </td>     </tr>    </table>  </td> </tr></table>

在上面的代码上添加 role="presentation" ：

<table role="presentation"> <tr>  <td>    <table>     <tr>      <td>       <abbr>API</abbr>      </td>     </tr>    </table>  </td> </tr></table>

table 元素可访问树前后对比示意图如下：

前面也说到过，并不是在HTML中添加ARIA角色对屏幕阅读器就是好的，特别是对于一些默认带有交互功能的元素中，添加ARIA就是浪费时间，比如：

<button role="button">按我</button><h1 role="heading" aria-level="1">标题一</h1>

当然在HTML5的一些特定元素上，ARIA的 role 和自带的语义化元素是可以重叠的，如下表所示:

HTML5元素	ARIA Role
	role="banner"
	role="navigation"
	role="main"
	role="contentinfo"
	role="complementary"
	role="region"
	role="article"
	role="form"
搜索表单	role="search"

假设有一个简单的HTML5页<面:

<header role="banner">    <nav role="navigation">    </nav></header><main role="main"></main><aside class="complementary"></aside><footer role="contentinfo"></footer>

如果你不想使用HTML5的元素，可以使用 div 来替代：

<div role="banner">    <div role="navigation">    </div></div><div role="main"></div><div class="complementary"></div><div role="contentinfo"></div>

如图所示：

ARIA的属性

下表介绍了ARIA相关属性的使用方法。

> aria-valuenow aria-valuetext

ARAI ステータス

次の表は、ARIA 関連のステータスの使用方法を示しています。

属性名	属性值	HTML示意	说明
aria-activedescendant	字符串(后代元素的 id 值)		aria-activedescendant 属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取焦点。在这个示例中， id="button1" 的按钮控件先获取焦点
aria-atomic	字符串。表示区域内容是否完整播报。值为 true 和 false 。值为 true 时，读屏软件会把整个区域内容都播报出来，如果为 false 则表示只需要播报修改的部分。		这里的 aria-atomic 为 true ，则表示当时间改变的时候，日期的年月都要完整播报出来，不要只改了月份就播报月份的内容。
aria-autocomplete	字符串，表示用户的文本框的自动提示是否提供，可选值有 inline 、 list 、 both 和 none		aria-autocomplete 对应HTML5中的 autocomplete 属性。如果 aria-autocomplete 取值为 list 、 inline 或 both 时，元素的 autocomplete 要设置为 on ,如果其值为 none ，则 autocomplete 取值为 off
aria-busy	字符串，表示当前区域的忙碌状态。默认为 false ，表示清除 busy 状态,取值为 true 时，表示该区域正在加载；取值为 error 时，表示该区域验证无效		如果某个区域内(如这里 ul )有多个地方需要修改，需要全部修改完毕再通知使用者的话，就可以先将 aria-busy 设为 true , 等到全部内容更新完毕后再设成 false 。该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。
aria-controls	字符串，空格分隔的 id 属性值列表		该属性定义了元素间不能通过文档结构决定的关联关系。 aria-controls 属性主要被 role 为 group , region , 或 widget 的元素使用。
aria-describedby	字符串，空格分隔的 id 属性值列表		同样的，该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个 id , 所有元素会合并在一起共同创建一条单独的描述。
aria-dropeffect	字符串。表示拖拽效果。可选值有： copy , move , reference , execute , popup , none , 依次表示：复制，移动，参照，执行，弹出以及没有效果。		该属性主要用在拖拽上
aria-flowto	字符串，空格分隔的的 id 值列表		如果该属性值对应的是单独的 id , 辅助技术会恢复目标元素的阅读；如果对应的是多个 id , 则辅助技术会让用户去选择、导航到目标元素。
aria-grabbed	字符串。拖拽中元素的捕获状态。可选值有: true , false , undefined 。默认为 undefined ，表示元素捕获状态未知。 true 表示元素可以捕获； false 表示不能被捕获。		该属性用在拖拽上。类似于HTML5中的 draggable 属性。
aira-haspopup	字符串。 true 表示点击的时候会出现菜单或是浮动元素； false 表示没有pop-up效果。
aria-label	字符串		定义一个字符串值标记当前元素。
aria-labelledby	字符串，空格分隔的 id 列表值		aria-labelledby 一般用在区域元素上，对于的 id 一般为对应的标题或是标签元素的 id 关系型属性。
aria-level	数值，表示等级	次标题	模拟 h2 标签元素
aria-live	字符串。可选值有： off , polite , assertive , rude 。默认为 off , 表示不宣布更新； polite 表示只有用户闲时宣布； assertive 表示尽快对用户宣布； rude 表示即时提醒用户，必要的时候甚至中断用户。	2012年 3月	绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的 aria-busy 。左侧的HTML为时间选择控件的年月标题部分， aria-live="assertive" 表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。
aria-multiselectable	字符串。表示是否可多选。默认为 false , 表示一次只能选择一个项。 true 表示一次可以选择多个项。		例如手风琴展开收起效果，我们可以使用 aria-multiselectable 来告知辅助设备，一次可以展开多个项还是只有一个展开。
aria-owns	字符串，值为目标元素 id		aria-owns 表示元素所拥有的
aria-posinset	数值，表示当前位置		用在设置和获取一个集合内某项的当前位置
aria-readonly	字符串。表示是否只读。默认为 false , 表示元素值可以被修改； true 表示元素指不能被改变
aria-relevant	字符串。表示区域内哪些操作行为需要做出反应。可选值有： additions , removals , text , all ，可以空格分隔多个一起显示。 additions 表示新增节点的时候做出反应； removals 表示删除节点时重要操作； text 表示文本改变是值得重视的； all 等同于同时使用上面三个属性值		左側の HTML は、ログの内容がいつ追加されるかを示します
aria に必要な	文字列。要素の値が必須かどうか。デフォルトは false で、要素値が空であってもよいことを意味します。true は要素値が必須であることを意味します		HTML5 の必須属性に対応する、主にフォーム コントロールで使用されます
aria-secret	機密ステータスを示す文字列
aria-setsize	値、設定size サイズ値
aria-sort	文字列。テーブルまたはグリッド内の項目が昇順または降順のどちらで並べ替えられるかを示します。オプションの値: 昇順 (↑)、降順 (↓)、なし、その他
aria-valuemax	値、最大許容値		は、HTML5 の最大値
aria-valuemin	値、最小許容値<に対応して、プログレスバー コンポーネントで使用されます。 🎜>	プログレスバーコンポーネントで使用され、HTML5 の min に対応します
値、現在の値を表します	< div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> プログレスバーで使用される	上記のコンポーネントは、HTML5 の値
文字列に対応します。 aria-valuenow 人間が読めるテキストと同等の定義

属性状态	属性值	HTML示意	说明
aria-checked	字符串。表示检查的状态。 true 表示元素被选择； false 表示元素未被选择； mixed 表示元素同时有选择和为选择状态。		该属性用来表明用户是否选择了某些项,类似于 input type="checkbox" 中的 checked
aria-disabled	字符串。表禁用状态， true 表示当前是非激活状态； false 表示清除非激活状态。		对应单复选框等控件的 disabled 属性，一般用在自定义模拟控件中
aria-expanded	字符串。表示展开状态。默认为 undefined , 表示当前展开状态未知。其它可选值： true 表示元素是展开的； false 表示元素不是展开的。
aria-hidden	字符串。可选值为 true 和 false , true 表示元素隐藏(不可见)， false 表示元素可见。		该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例HTML代码来自进度条进度值显示的 div , 当前 aria-hidden 为 false , 表示该进度值是可见的。
aria-invalid	字符串。表示元素值是否错误的。默认为 false , 表示是OK的，如果为 true , 则表示值验证不通过。
aria-pressed	字符串。表示按下的状态，可选值有： true , false , mixed , undfined 。默认为 undfined , 表示按下状态未知； true 表示元素往下（按钮按下）； false 表示元素抬起； mixed 表示元素同时有按下和没有按下的状态。		左边HTML表示按钮已经按下，同时处于禁用状态。
aria-selected	字符串。表示选择状态。可选值有： true , false , undefined 。 默认为 undefined ，表示元素选择状态未知。 true 表示元素已选择； false 表示未被选中。

役割、状態、プロパティに関する関連仕様書 (W3C 仕様)

Roles	States	Properties
alert	aria-busy	aria-activedescendant
alertdialog	aria-expanded	aria-atomic
gridcell	aria-grabbed	aria-controls
log	aria-hidden	aria-describedby
marquee	aria-pressed	aria-dropeffect
menuitemcheckbox		aria-flowto
menuitemradio		aria-haspopup
scrollbar		aria-label
status		aria-labelledby
tab		aria-level
tabpanel		aria-live
timer		aria-orientation
tooltip		aria-owns
treeitem		aria-posinset
grid		aria-relevant
menu		aria-setsize
menubar		aria-sort
tablist
toolbar
tree
treegrid
directory
document
group
note
presentation
region
application
search

开发最佳实践

开发一个可访问的 Web 应用不仅需要工具的支持，浏览器的支持，还需要开发人员遵循一定的规范提供对应的元素信息，才能达到最终的目的。下面着重介绍一些开发中的最佳实践。

关于 Image

图片或者动画均需提供 alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。如图所示：

对应的 HTML 如下:

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

对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。如图用于装饰页头的图片，实际并没有传递有价值的信息。

对应的 HTML 如下：

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

必须设置一个空 alt 属性的目的是为了能通过 Webking 的检查，并且使得读屏软件能够忽略此元素。

对于图表文件， alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来。例如下面的图 alt 信息设置为销售额从 1996 年到 2004 年间持续稳定增长，从 400 万增长到了 1600 万。并不需要把每一年的增长额都详细得描述出来。

对于放在链接里面的图片，如果已经有文字的说明， alt 也设置为空，这样避免读屏软件重复同样的内容。如下面的 HTML：

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

a 的内容已经指明了这是个苹果手机， img 的 alt 属性就没必要再设置一次了。否则读屏软件会连续读两次重复的内容，引起混乱。

CSS 将样式跟结构分离，使得 HTML 代码结构清晰。很多装饰性的图片也都放在 CSS 里面来加载，带来的一个问题就是在 CSS 里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的，还可以触发功能，那就需要从 CSS 里面拿出来，当成一个独立的 img 或者 input 元素。例如下面的一个提示保存的图片

写在 CSS 里面的做法是：

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

这样当用户切换到高对比度模式，这个图片就是一片空白，用户无法再去点击保存。修改如下：

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

在一个图片列表里面选中某个图片，区别选中去否我们通常的做法是用边框的颜色来标识。如下图，选中的图片边框为蓝色

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

但这样的一个实现实际上违反了可访问检查列表中的一项：不能仅仅通过颜色来区分不同的元素，因为在高对比度下只有黑色或白色，这样的区分在高对比度下是没有任何作用的。我们很容易想到的一种办法就是只有选中的时候才加边框，未选中时则没有边框，这样就可以区分出来了。修改如下：

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

这样引起的问题是，图片的布局在选中的时候会浮动，增加了 5px 的边框，看起来效果就很差。那么怎么保证布局又满足可访问性的要求呢？ 可以在上面 CSS 的基础上通过 padding 属性使得布局正确：

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

这样保证整体的边界都是 5px ，在高对比度下的效果如图所示：

关于 Table

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

以第一行的数字 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

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

<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 属性则更详细的扩展了这个描述。如下图所示：

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

<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 代码里面元素出现的顺序排列的，有时跟实际看到的页面顺序并不一致。例如图 所示的页面：

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

<!-- 页面获取 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 在前面的。所以为了不引起混淆，最后能保持代码的顺序与实际呈现出来的页面上的顺序一致。可以修改上面的代码为，如下所示：

<!-- 页面获取 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 对任何人都是隐藏的，如果想只给读屏软件读到就需要使用上面的绝对定位方式。例如在下图所示的菜单的选中项上加上如下的 css：

<!-- 只给读屏软件读的内容 --><span class="access">  is selected</span> .access{    position:absolute;    top:-30000px;}

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

高对比度模式的小技巧

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

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

<!-- 正常模式与高对比模式显示不同的 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;}

ARIA Widgets

Label

ARIA前

<h2 class="offscreen">System Folders</h2><ul role="listbox">    <li role="option">Inbox</li>    <li role="option">Drafts</li></ul><h2>Personal Folders</h2><ul role="listbox">    <li role="option">Folder 1</li>    <li role="option">Folder 2</li></ul>

ARIA后

<ul role="listbox" aria-label="System Folders">    <li role="option">Inbox</li>    <li role="option">Drafts</li></ul><h2 id="folders">Personal Folders</h2><ul role="listbox" aria-labelledby="folders">    <li role="option">Folder 1</li>    <li role="option">Folder 2</li></ul>

Alert Dialog

<div role="alertdialog" aria-labelledby="hd" aria-describedby="msg">    <div id="hd">Confirm Close</div>    <p id="msg">Your message has not been sent. Do you want tosave it in your Drafts folder?</p>    <div>            <button>Save to Drafts</button>            <button>Don't Save</button>            <button>Keep Writing</button>    </div></div>

headings

<p class="heading1" role="heading" aria-level="1" >Heading 1</p><p class="heading2" role="heading" aria-level="2" >Heading 2</p><p class="heading3" role="heading" aria-level="3" >Heading 3</p>

list/listitem

<div role="list">    <div role="listitem">...</div>    <div role="listitem">...</div>    <div role="listitem">...</div></div>

button

<span tabindex="0" role="button" class="...">Button?</span>

toggle button

<span tabindex="0" role="button"  aria-pressed="false" class="...">Option</span><span tabindex="0" role="button" aria-pressed="true" class="... pressed">Option</span>

checkbox

<span tabindex="0" role="checkbox" aria-checked="false" class="...">Option</span><span tabindex="0" class="... checked" role="checkbox" aria-checked="true">Option</span>

radio

<span tabindex="-1" role="radio" aria-checked="false" class="...">Yes</span><span tabindex="0" role="radio" aria-checked="true" class="... selected">No</span><span tabindex="-1" role="radio" aria-checked="false" class="...">Maybe</span>

link

<span tabindex="0" role="link" onclick="document.location(...)">link</span>

tooltip

<span tabindex="0" onmouseover="..." onfocus="..." aria-describedby="tooltip" >...</span>...<span role="tooltip" id="tooltip"> this is the tooltip text</span>

status bar

<span role="status" >some form of status bar message...</span>

alert

<span role="alert" >an alert message (no user interaction)</span>

progress bar

<div tabindex="0" aria-valuemin="0" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="..." aria-valuenow="40" aria-valuetext="40% complete">     <span style="width:40%"></span></div>

menu

<div role="menu">    <div role="menuitem"></div>    <div role="menuitem"></div>    <div role="menuitem"></div></div>

Menubar

<div role="menubar">     <div role="menuitem">        <div role="menu">             <div role="menuitem"></div>            <div role="menuitem"></div>            <div role="menuitem"></div>            </div>    </div></div>

listbox

<div role="listbox" aria-activedescendant="opt2" tabindex="0">    <div role="option" id="opt1">Option 1</div>    <div role="option" id="opt2" class="active">Option 2</div>    <div role="option" id="opt3">Option 3</div></div>

combobox

<!-- similar to <select> --><input type="text" role="combobox" aira-expanded="true" aira-autocomplete="list" aria-owns="optlist" aira-activedescendant="opt2" /><div role="listbox" id="optlist">    <div role="option" id="opt1">Option 1</div>    <div role="option" id="opt2" class="active">Option 2</div>    <div role="option" id="opt3">Option 3</div></div>

tree

<!-- list with selectable items, expand/collapse, nesting --><div role="tree">    <div role="treeitem">...</div>    <div role="treeitem">...</div>    <div role="treeitem">...        <div role="group">            <div role="treeitem">...</div>            <div role="treeitem">...</div>        </div>    </div></div>

grid

<!-- interactive table/spreadsheet --><div role="grid">    <div role="row">        <div role="columnheader">...</div>        <div role="columnheader">...</div>    </div>    <div role="row">        <div role="gridcell">...</div>        <div role="gridcell">...</div>    </div></div>

Bootstrap ARIA示例

Glyphicons

<button type="button" class="btn btn-default" aria-label="Left Align">  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>

Dropdowns

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropdown    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>

Divider

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">  ...  <li role="separator" class="divider"></li>  ...</ul>

Button Groups

<div class="btn-group" role="group" aria-label="First group">     <button type="button" class="btn btn-default">1</button>     <button type="button" class="btn btn-default">2</button>     <button type="button" class="btn btn-default">3</button>     <button type="button" class="btn btn-default">4</button> </div>

Button dropdowns

<!-- Single button --><div class="btn-group">  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Action <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>

Input groups

<div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group">  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">  <span class="input-group-addon" id="basic-addon2">@example.com</span></div>

Pagination

<nav>  <ul class="pagination">    <li>      <a href="#" aria-label="Previous">        <span aria-hidden="true">&laquo;</span>      </a>    </li>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li>      <a href="#" aria-label="Next">        <span aria-hidden="true">&raquo;</span>      </a>    </li>  </ul></nav>

Alert

<div class="alert alert-warning alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>  <strong>Warning!</strong> Better check yourself, you're not looking too good.</div>

Progress bars

<div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    60%  </div></div>