このウェブページは、「WCAG 2.0 達成方法集 : WCAG 2.0 の達成方法と失敗例」におけるARIA の達成方法を掲載している。ウェブコンテンツ技術特有の達成方法は、「一般 (General)」の達成方法に取って代わるものではない。コンテンツ制作者は適合に向けて作業する際には、「一般 (General)」の達成方法とウェブコンテンツ技術特有の達成方法の双方を考慮に入れる必要がある。
ウェブコンテンツ技術特有の達成方法は、あらゆる状況で WCAG 2.0 の達成基準と適合要件を満たすコンテンツを作るために使うことができる技術を指しているわけではない。 コンテンツ制作者はその技術の限界に注意を払い、障害のある人にアクセシブルな方法でコンテンツを提供す必要がある。
達成方法についての情報は、WCAG 2.0 達成方法集のイントロダクションを参照のこと。他のウェブコンテンツ技術の達成方法一覧については、目次を参照のこと。
WAI-ARIA は、アクセシビリティを向上させるために、ウェブページやリッチインターネットウィジェットに次のセマンティック情報を追加するオプションをウェブ開発者に提供する。その結果、そのセマンティック情報はブラウザに公開される。
"menu"、"treeitem"、"slider"、"progressbar" のような、提示されたウィジェットの種類を記述するためのロール。
見出し、領域、検索領域及びナビゲーション領域のような、ウェブページの構造を記述するためのロール。
チェックボックスのための "checked"、サブメニューやその他のポップアップを描画するメニューのための"haspopup"、及びツリーノードのための "expanded/collapsed" のような、ステート及びウィジェットを記述するためのプロパティ。
(たとえば株価情報のように) 情報が更新される予定があるページのライブ領域を定義するとともに、更新時の割込みポリシーを定義するためのプロパティ。支援技術は、重要な更新情報がレンダリングされたならすぐに提示してもよい。しかし、付随的な更新情報は、現在のタスクを完了した後のみに提示される。たとえば、スクリーンリーダーは、現在の段落を読み終えた後にのみ付随的な更新情報を利用者に通知する。
ドラッグソース及びドロップターゲットを記述するドラッグ＆ドロップのプロパティ。
リッチインターネットウィジェットにキーボードナビゲーションを提供するための方法。
これらの機能と DOM 構造によって伝えられる構造情報の組み合わせは、著者が支援技術に相互運用可能な解決策を作り出すことを可能にする。(出典: WAI-ARIA Overview)
WAI-ARIA に対するユーザエージェントのサポートは変化するが、全般的な WAI-ARIA のサポートは改善している。WAI-ARIA をサポートするブラウザは、プラットフォームのアクセシビリティ API に WAI-ARIA ロール及びプロパティを対応づける。
Firefox 1.5 と Firefox 2.0 は部分的に WAI-ARIA をサポートするが、名前空間を使用する必要があり、ライブ領域の使用をサポートしない。
Firefox 3 以降はライブ領域を含む、WAI-ARIA に対するより良いサポートを含む。
IE8 は、部分的に WAI-ARIA をサポートする。
JAWS 8 及び Window-Eyes 5.5 以降は、部分的に WAI-ARIA をサポートする。
Jaws 10 以降は WAI-ARIA をサポートする。
Firefox の音声拡張である FireVox はまた、直接の DOM アクセスを経由して WAI-ARIA をサポートする。
NVDA は、部分的に WAI-ARIA をサポートする。
訳注: 「FireVox」は 2018 年現在、最新の Firefox と互換性がないためにインストールできない。
アクセシビリティ サポーテッドな方法で技術を使用することは、適合性要求のために必要である。詳細はアクセシビリティ サポートについてを読むこと。WCAG ワーキンググループは、Accessible Rich Internet Application 仕様が W3C 勧告の状態に到達する際に、WAI-ARIA 達成方法が十分であるかどうかの見直しをする予定である。WAI-ARIA のステータスに関する最新情報については、WAI-ARIA Overview を参照のこと。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA1 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、プログラムによる解釈がされる、ユーザインタフェース要素に関する説明的な情報を提供するために、どのように WAI-ARIA aria-describedby プロパティを使用するかを示すことにある。aria-describedby プロパティは、ID 参照リストの使用を通して一つ以上の要素の説明的情報と結びつけるために使用してもよいものである。ID 参照リストは、一つ以上のユニークな要素 ID を含む。
XHTML や HTML とともに WAI-ARIA ステート及びプロパティを提供する方法については、Supporting ARIA in XHTML and HTML 4.01 を参照のこと。WAI-ARIA ステート及びプロパティは他の言語とも互換性がある。詳しくはそれらの言語の説明文書を参照のこと。
注記: aria-describedby プロパティは、外部リソース上の説明を参照するように設計されていない――これは ID なので、同一 DOM 文書内の要素を参照しなければならない。
訳注 1: 本文のリンク「Supporting ARIA in XHTML and HTML 4.01」は WAI-ARIA 1.0 Primer を参照しているが、この文書は作成が破棄されている。代わりに、WAI-ARIA 1.1 §A.6 HTML 4.01 plus WAI-ARIA DTD を参照できる。
訳注 2: XHTML 及び HTML 4.01 は廃止された勧告であることに注意されたい。
ダイアログ上の「閉じる」ボタンとして機能するボタンが、文書中の他の場所で説明されている。aria-describedby プロパティは、リンクと説明を関連付けるために使用される。
<button aria-label="Close" aria-describedby="descriptionClose"
onclick="myDialog.close()">X</button>
...
<div id="descriptionClose">Closing this window will discard any information entered and
return you back to the main page</div>
実装例: 事例 1
フォームフィールドに対してフォームラベルを用意するとともに、aria-describedby で指示を関連付けているサンプルフォームフィールド。
<form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="int2">
<p id="int2">A bit of instructions for this field linked with aria-describedby. </p>
</form>
<p><span id="fontDesc">Select the font faces and sizes to be used on this page</span>
<button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">Fonts</button>
</p>
<p><span id="colorDesc">Select the colors to be used on this page</span>
<button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">Colors</button>
</p>
<p><span id="customDesc">Customize the layout and styles used on this page</span>
<button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">Customize</button>
</p>
次のコードスニペットは、フォーカスが要素に置かれたときに、ツールチップを表示するために、aria-describedby と onfocus="tooltipShow()" 関数を使用する方法を示す。
<html lang="en-us">
<head>
<title>inline: Tooltip Example 1</title>
<link rel="stylesheet" href="css/tooltip1_inline.css" type="text/css">
<script type="text/javascript" src="js/tooltip1_inline.js"></script>
<script type="text/javascript" src="../js/widgets_inline.js"></script>
<script type="text/javascript" src="../js/globals.js"></script>
<link rel="icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
</head>
...
<body onload="initApp()">
<div id="container">
<h1>Tooltip Example 1</h1>
<h2>Create Account</h2>
<div class="text">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" size="20"
onmouseover="tooltipShow(event, this, 'tp1');"
onfocus="tooltipShow(event, this, 'tp1');"
aria-describedby="tp1"
aria-required="false"/>
<div id="tp1" role="tooltip" aria-hidden="true">Your first name is optional. </div>
</div>
この例は、XHTML でコーディングされ、application/xhtml+xml の MIME タイプで提供されている。このMIME タイプは、すべてのユーザエージェントでサポートされているわけではない。aria-describedby プロパティは、XHTML マークアップに直接追加され、追加のスクリプトを必要としない。
コード例:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications aria-describedby property
to provide more detailed information about the button action</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">
Fonts </button></span></p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">
Colors </button></span></p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">
Customize </button></span></p>
</div>
</body>
</html>
この例は、ページ上のボタンに aria-describedby プロパティを追加するためにスクリプトを使用している。この例は、説明テキストを含む要素の id を保持するために buttonIds 配列変数を作成する。setDescribedBy() 関数は、window オブジェクトの onload イベントから呼び出される。
setDescribedBy() 関数は、ボタン要素のすべてをループし、aria-describedby プロパティを設定するために各ボタン要素上で setAttribute() を呼び出す。各ボタンの aria-describedby プロパティは、その説明のテキストを含む要素の id に設定される。
WAI-ARIA をサポートするユーザエージェント及び／又は支援技術を使用すれば、ユーザインタフェースコントロールがフォーカスを受け取る際に説明が提供される。
コード例:
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
<script type="text/javascript">
//<![CDATA[
// array entries for each button on the page that associates the button id
// with the id of the element containing the text which describes the button
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";
// function that is run after the page has loaded to set the aria-describedBy
// property on each of the elements referenced by the array of id values
function setDescribedBy(){
if (buttonIds){
var buttons = document.getElementsByTagName("button");
if (buttons){
var buttonId;
for(var i=0; i<buttons.length; i++){
buttonId = buttons[i].id;
if (buttonId && buttonIds[buttonId]){
buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
}
}
}
}
}
// simulated action function - currently just displays an alert
function doAction(theAction){
alert("Perform the " + theAction + " action");
}
window.onload=setDescribedBy;
//]]>
</script>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications
aria-describedby property to provide more detailed information
about the button action.
</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
</p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
</p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
</p>
</div>
</body>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
一意な ID を経由して一つ以上の要素を参照する aria-describedby 属性を持つユーザインタフェースコントロールがあることを確認する。
参照される要素 (一つ又は複数) が、ユーザインタフェースコントロールに関する追加情報を提供することを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA2 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、(提示を通して必須であることが示されている) フォームフィールドが、フォームの正常送信のために必須であることを、プログラムの指標として提供することである。
要素が必須であるという事実は多くの場合、(テキスト又は非テキストのシンボル、又は入力が必須であることを示すテキスト、又は色/スタイルを介して) 視覚的に提示されるが、これは、フィールド名の一部としてプログラムによる解釈が可能にはならない。
WAI-ARIA aria-required プロパティは、送信前に利用者の入力が必須であることを示す。aria-required プロパティは、"true" 又は "false" の値を持つことができる。たとえば、利用者が住所のフィールドに入力しなければならない場合、aria-required は "true" に設定される。
注記 1:
aria-required="true" の使用は、アスタリスクや他のテキストシンボルがプログラム的にフィールドに関連付けられている場合であっても、一部の支援技術の利用者に対して required プロパティによって補強できるので、有益であるかもしれない。
注記 2:
多くの場合、要素が必須であるという事実は、(コントロールの後の符号や記号のように) 視覚的に提示される。視覚的な提示に加えて aria-required プロパティを使用することは、ユーザエージェントが、この重要な情報をユーザエージェント固有の方法で利用者に伝えることを、はるかに簡単にする。XHTML や HTML とともに WAI-ARIA ステート及びプロパティを提供する方法については、Supporting ARIA in XHTML and HTML 4.01 を参照のこと。なお、WAI-ARIA ステート及びプロパティは他の言語とも互換性がある。詳しくはその言語における文書の活用を参照のこと。
訳注 1: 注記 2 にあるリンク「Supporting ARIA in XHTML and HTML 4.01」は WAI-ARIA 1.0 Primer を参照しているが、この文書は作成が破棄されている。代わりに、WAI-ARIA 1.1 §A.6 HTML 4.01 plus WAI-ARIA DTD を参照できる。
訳注 2: XHTML 及び HTML 4.01 は廃止された勧告であることに注意されたい。
required プロパティが label 要素の後に置かれるアスタリスクによって示されている:
<form action="#" method="post" id="login1" onsubmit="return errorCheck1()">
<p>Note: [*]denotes mandatory field</p>
<p>
<label for="usrname">Login name: </label>
<input type="text" name="usrname" id="usrname" aria-required="true"/>[*]
</p>
<p>
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd" size="12" aria-required="true" />[*]
</p>
<p>
<input type="submit" value="Login" id="next_btn" name="next_btn"/>
</p>
</form> required プロパティが label 要素の後に置かれる単語 "required" によって示されている:
<head>
<form action="#" method="post" id="step1" onsubmit="return errorCheck2()">
<p>
<label for="fname">First name: </label>
<input type="text" id="fname" aria-required="true" />
[required]
</p>
<p>
<label for="mname">Middle name: </label>
<input type="text" id="mname" />
</p>
<p>
<label for="lname">Last name: </label>
<input type="text" id="lname" aria-required="true" />
[required]
</p>
<p>
<label for="email">Email address: </label>
<input type="text" id="email" aria-required="true" />
[required]
</p>
<p>
<label for="zip_post">Zip / Postal code: </label>
<input type="text" id="zip_post" size="6" aria-required="true" />
[required]
</p>
<p>
<input type="submit" value="Next Step" id="step_btn" name="step_btn" />
</p>
</form>
必須フィールドは、フィールドの周りの赤いボーダーと content:before を使用する CSS によってレンダリングされる星のアイコンで示される。この例はまた、role=radio をもつカスタムラジオボタンを使用するが、span を実際にラジオボタンのように動作させるためのスクリプトは、この例に含まれていない。CSS プロパティはフォームの下にある。
<form action="#" method="post" id="alerts1">
<label for="acctnum" data-required="true">Account Number</label>
<input size="12" type="text" id="acctnum"
aria-required="true" name="acctnum" />
<p id="radio_label" data-required="true">Please send an alert when balance exceeds $3,000.</p>
<ul id="rg" role="radiogroup" aria-required="true" aria-labelledby="radio_label">
<li id="rb1" role="radio">Yes</li>
<li id="rb2" role="radio">No</li>
</ul>
</form>
この例に対する関連する CSS スタイル定義:
[aria-required=true] {
border: red thin solid;
}
[data-required=true]:after {
content: url('/iconStar.gif');
}
訳注: 説明に「content:before を使用する CSS によって」とあるが、コード例は :after となっており、説明とコードが矛盾している。
訳注: MDN の疑似要素 (Pseudo-elements) に示されているように、:after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。
次の例は、フォームフィールドが送信されなければならないことを示すために aria-required プロパティを使用する XHTML 文書を示す。フィールドの必須の性質は、WAI-ARIA をサポートしないユーザエージェントのための予備として、ラベルでも表示される。
コード例:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Required Input</title>
</head>
<body>
<h1>Required Input</h1>
<p>The following form input field must be completed by the user
before the form can be submitted.</p>
<form action="http://example.com/submit">
<p>
<label for="test">Test (required)</label>
<input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
この例は、フォーム要素に aria-required プロパティを追加するためにスクリプトを使用する。必須プロパティは、setAttribute() API を使用して割り当てられる。
配列変数 requiredIds は、必須としてマークされる必要がある要素の ID とともに作成される。setRequired() 関数は、window オブジェクトの onload イベントから呼び出される。
setRequired() 関数は、提供された ID のすべてをループし、要素を取得し、setAttribute() 関数を使用して aria-required プロパティを true にする。
このページが Firefox 3.0 以降及び WAI-ARIA をサポートするスクリーンリーダーを使用してアクセスされる場合、入力フィールドのラベルを読む際にスクリーンリーダーは "required" と伝える。
コード例:
<head>
<script type="text/javascript">
//<![CDATA[
// array or ids on the required fields on this page
var requiredIds = new Array( "firstName", "lastName");
// function that is run after the page has loaded to set the aria-required property on each of the
//elements in requiredIds array of id values
function setRequired(){
if (requiredIds){
var field;
for (var i = 0; i< requiredIds.length; i++){
field = document.getElementById(requiredIds[i]);
field.setAttribute("aria-required", "true");
}
}
}
window.onload=setRequired;
//]]>
</script>
</head>
<body>
<p>Please enter the following data. Required fields have been programmatically identified
as required and marked with an asterisk (*) following the field label.</p>
<form action="submit.php">
<p>
<label for="firstName">First Name *: </label><input type="text" name="firstName"
id="firstName" value="" />
<label for="lastName">Last Name *: </label><input type="text" name="lastName"
id="lastName" value="" />
</p>
</form>
</body>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
必須であることがプレゼンテーションを経由して示される各コントロールに対して。
aria-required 属性が存在するかどうかを確認する:
aria-required 属性値が、そのユーザインタフェースコンポーネントに対する正しい required ステートであるかどうかを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA4 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、WAI-ARIA Definition of Roles で定義されたいずれかの非抽象の値を持つ role 属性を用いて要素のロールを定義することである。WAI-ARIA 仕様は、各ロールについて、他のロールとどのように関係するか、どのようなステート及びプロパティがあるかといった、参考となる説明を提供している。リッチインターネットアプリケーションが新しいユーザインタフェースウィジェットを定義する際、ロールを公開することで、利用者がウィジェット及びウィジェットと対話する方法を理解できるようになる。
WAI-ARIA Authoring Practices には、三つのボタンを含むツールバーのデモがある。div 要素は "toolbar" のロールを持ち、img 要素は "button" のロールを持つ:
<div role="toolbar"
tabindex="0"
id="customToolbar"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);"
onclick="return optionClickEvent(event);"
onblur="hideFocus()"
onfocus="showFocus()"
>
<img src="img/btn1.gif"
role="button"
tabindex="-1"
alt="Home"
id="b1"
title="Home">
<img src="img/btn2.gif"
role="button"
tabindex="-1"
alt="Refresh"
id="b2"
title="Refresh">
<img src="img/btn3.gif"
role="button"
tabindex="-1"
alt="Help"
id="b3"
title="Help">
</div>
Authoring Practices のツールバーパターンは、ツールバーの実装例を提供している。
WAI-ARIA Authoring Practices には、ツリーウィジェットのデモがある。ツリーとその構造を識別するためのロール "tree"、"treeitem"、"group" に注意。コードを単純化して抜粋したものは以下のとおり:
<ul role="tree" tabindex="0">
<li role="treeitem">Birds</li>
<li role="treeitem">Cats
<ul role="group">
<li role="treeitem">Siamese</li>
<li role="treeitem">Tabby</li>
</ul>
</li>
<li role="treeitem">Dogs
<ul role="group">
<li role="treeitem">Small Breeds
<ul role="group">
<li role="treeitem">Chihuahua</li>
<li role="treeitem">Italian Greyhound</li>
<li role="treeitem">Japanese Chin</li>
</ul>
</li>
<li role="treeitem">Medium Breeds
<ul role="group">
<li role="treeitem">Beagle</li>
<li role="treeitem">Cocker Spaniel</li>
<li role="treeitem">Pit Bull</li>
</ul>
</li>
<li role="treeitem">Large Breeds
<ul role="group">
<li role="treeitem">Afghan</li>
<li role="treeitem">Great Dane</li>
<li role="treeitem">Mastiff</li>
</ul>
</li>
</ul>
</li>
</ul>
Authoring Practices のツリービューパターンは、ツリーの実装例を提供している。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: 「WAI-ARIA 1.1 Authoring Practices」は、正しくは「WAI-ARIA Authoring Practices 1.1」となる。
(今のところ、なし。)
role 属性を使用するユーザインタフェースコンポーネントの場合:
role 属性の値が、WAI-ARIA 仕様で定義された値に由来する非抽象ロールのいずれかであることを確認する。
ユーザインタフェースコンポーネントの特性がロールで記述されていることを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA5 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、ユーザインタフェースコンポーネントのステート、プロパティ及び値を公開するために WAI-ARIA ステート及びプロパティを使用することであり、その結果それらが支援技術によって読み込まれて設定できるようになり、また、支援技術はそれらの値の変更を通知される。WAI-ARIA 仕様は、各属性の規範的記述、及びユーザインタフェース要素がサポートするロールを提供する。リッチインターネットアプリケーションが新しいユーザインタフェースウィジェットを定義する際、ステート及びプロパティ属性を公開することで、利用者がウィジェットを理解でき、そしてウィジェットと対話できるようになる。
button ロールを持つウィジェットが aria-pressed 属性を実装する場合、トグルボタンとして動作する。aria-pressed が true である場合、ボタンは「押されている」状態になる。aria-pressed が false である場合、押されていないことになる。この属性が存在しない場合、ボタンは単純なコマンドボタンとなる。
以下のスニペットは Open Ajax Accessibility Examples の例 38 からの引用であり、太字のテキストを選択するトグルボタンに対する WAI-ARIA マークアップを示している:
<li id="bold1"
class="toggleButton"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="bold_label"
aria-controls="text1">
<img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
</li>
この li 要素は、"button" ロールと "aria-pressed" 属性を持つ。以下は、この例において "aria-pressed" 属性の値を更新する Javascript の抜粋である:
/**
* togglePressed() toggles the aria-pressed atribute between true or false
*
* @param ( id object) button to be operated on
*
* @return N/A
*/
function togglePressed(id) {
// reverse the aria-pressed state
if ($(id).attr('aria-pressed') == 'true') {
$(id).attr('aria-pressed', 'false');
}
else {
$(id).attr('aria-pressed', 'true');
}
}
このボタンは、OpenAjax アライアンスのサイトで、working example of Example 38 - Toolbar using inline images for visual state の実装例の一部として提供されている。
slider ロールをもつウィジェットは、利用者に指定した範囲内から値を選択させる。スライダーは、スライダーの大きさやつまみの位置によって、現在の値、及びとり得る値の範囲を表す。これらのスライダーのプロパティは、属性 aria-valuemin、aria-valuemax、及び aria-valuenow で表される。
以下のスニペットは Open Ajax Accessibility Examples の例 32 からの引用であり、JavaScript で作成されたスライダーに対する WAI-ARIA マークアップを示している。Javascript が属性 aria-valuemin、aria-valuemax、及び aria-valuenow を設定することに注意:
var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
'aria-valuemin="' + this.min +
'" aria-valuemax="' + this.max +
'" aria-valuenow="' + (val == undefined ? this.min : val) +
'" aria-labelledby="' + label +
'" aria-controls="' + controls + '" tabindex="0"></img>';以下はこの例のための Javascript の抜粋であり、スライダーのつまみの値が変更された場合に "aria-valuenow" 属性値を更新する:
slider.prototype.positionHandle = function($handle, val) {
...
// Set the aria-valuenow position of the handle
$handle.attr('aria-valuenow', val);
...
}
このスライダーは、OpenAjax アライアンスのサイトで、working example of Example 32 - Slider の実装例の一部として提供されている。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
The WAI-ARIA specification, Section 5.3, Categorization of Roles は、各ロールに対し、必須であったり、継承されたりするステート及びプロパティを定義している。
WAI-ARIA role 属性を使用するユーザインタフェースコンポーネントの場合:
ロールに対して必須とされるステート及びプロパティが存在することを確認する。
必須でなく、サポートもされず、継承もされない WAI-ARIA ステート又はプロパティが存在しないことを確認する。
ユーザインタフェースコンポーネントが状態を変更するときに、ステート及びプロパティの値が現在の状態を反映するように更新されていることを確認する。
1.、2. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA6 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、支援技術によって読み取ることができるオブジェクトのラベルを提供することである。aria-label 属性は、ボタンなど、オブジェクトのテキストラベルを提供する。スクリーンリーダーがオブジェクトに遭遇した際、aria-label テキストが読み込まれ、利用者はそのオブジェクトがどのようなものかを知ることができる。
制作者は、aria-labelledby が同じオブジェクトに使用される状況では、aria-label が支援技術によって無視される場合があることに注意すべきである。名前付けの序列の詳細については、ARIA 仕様及び HTML to Platform Accessibility APIs Implementation Guide における accessible name and description calculation を参照。制作者は、aria-label の使用が画像の alt や for 属性を用いてフォームフィールドに関係付けられた label などのネイティブな名前付けを全て上書きすることに注意すべきである。
次の例は、同じページに同じ種類のランドマークが 2 個以上存在し、かつページ内にラベルとして参照できる既存のテキストが存在しない場合に、HTML4 及び XHTML 1.0 文書内で二つのナビゲーションランドマークを識別するために aria-label をどのように使用するのかを示している。
訳注: HTML4 及び XHTML 1.0 は Superseded Recommendation としてマークされ、廃止された仕様である。
<div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>次の例は、気象ポートレットに一般的な "region" ランドマークがどのように追加されうるのかを示している。ラベルとして参照できる既存のテキストがページ内に存在しないため、aria-label でラベル付けされている。
<div role="region" aria-label="weather portlet">
...
</div>以下は math ロール、適切なラベル、および MathML レンダリングを使用する、MathML の機能の例である。
<div role="math" aria-label="6 divided by 4 equals 1.5">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>6</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>1.5</mn>
</math>
</div>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
aria-label 属性が存在する各要素に対して。
テキストの説明が正確にオブジェクトをラベル付けする、又はその目的の説明を提供する、又は同等の情報を提供するかどうかを検査する。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA7 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
aria-labelledby 属性を用いることで、制作者は、ページ上の可視テキスト要素を、フォーカス可能な要素 (フォームコントロール又はリンク) のラベルとして使用できる。たとえば、"read more..." のリンクは、リンクの目的を明確にするために、先行するセクションの見出しテキストと関連付けることができるかもしれない (事例 1 を参照)。
aria-labelledby の助けを借りてフォーカス可能な要素にテキストを関連付ける場合、ターゲットのテキスト要素は、フォーカス可能な要素の aria-labelledby 属性値の中で参照される ID によって与えられる。
フォーカス可能な要素のラベルとして、ページ上の複数のテキスト要素を使用することも可能である。使用されるそれぞれのテキスト要素は、aria-labelledby 属性の値において IDs (IDREF) の文字列として参照される一意な ID を与えられなければならない。そして、ラベルテキストは aria-labelledby 属性の値における ID の順序に従って連結されるべきである。
リンクに適用する場合、aria-labelledby は、目の見える利用者に対して直ちに明白かもしれないが、スクリーンリーダーの利用者にはあまり明らかではないリンクの目的を識別するために使用できる。
aria-labelledby の仕様上の動作は、関連付けられたラベルテキストが (リンクテキストに加えられるのではなく) リンクテキストの代わりに告知されるものである。リンクテキスト自身がラベルテキストに含まれるべきである場合、aria-labelledby 属性の値を構成する IDs の文字列の中で、リンクの ID も参照されるべきである。
名前付けの序列の詳細については、ARIA specification 及び HTML to Platform Accessibility APIs Implementation Guide における accessible name and description calculation for links を参照。
この例は、画面に表示されるリンクテキストが、リンクに対するアクセシブルな名前の最初に使用されることを意図している。JAWS や NVDA のようなポピュラーなスクリーンリーダーは、これを "Read more ...Stormshit east coast" のように告知し、リンクだけを閲覧することがあるスクリーンリーダーの利用者にとって有益なリンク一覧にも同じテキストを表示する。
<h2 id="headline">Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>制作者は、参照したいコードのセクションを囲むタグを配置することもあるだろう。
注記: span 要素上の tabindex="-1" の使用は、スクリプトによってフォーカスをサポートすることを意味するものではない――ここでは、単に一部のブラウザ (IE9、IE10) がアクセシビリティツリーに span 要素を含めることを保証するためのものであり、その結果、aria-labelledby による参照に利用できるようになる。詳細については、Accessible HTML Elements を参照。
<p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(今のところ、なし。)
aria-labelledby 属性を持つ各リンクに対して:
aria-labelledby 属性の値に含まれる各 ID が、リンクの目的の一部として使用されるテキスト要素の ID と一致することを確認する。
aria-labelledby 属性に含まれる一つ以上の ID によって参照されるテキストを合成した値が、link 要素の目的を適切に説明していることを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA8 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、aria-label 属性を使用して、リンクの目的を説明することである。オブジェクトを説明する可視要素がページ上に存在しない場合、aria-label 属性は、リンクのようなオブジェクトに説明的なテキストラベルを配置する方法を提供する。説明的な要素がページ上で可視である場合、aria-label ではなく、aria-labelledby 属性が使用されるべきである。説明的なテキストラベルを提供することで、利用者は、そのリンクと、ウェブページ内にあるリンク先の異なるリンクとを区別できるようになり、リンクをたどるかどうかを判断する助けとなる。一部の支援技術において、aria-label の値は、実際のリンクテキストの代わりにリンクの一覧に表示される。
WAI-ARIA 仕様及び HTML to Platform Accessibility APIs Implementation Guide にあるように、aria-label テキストは、リンク内で与えられたテキストを上書きする。このように与えられたテキストは、支援技術によってリンクテキストの代わりに使用される。このため、aria-label で使用されるテキストは、リンク内で使用されているテキストから始めることが推奨されている。これは、利用者間で一貫性のあるコミュニケーションを可能にする。
場合によっては、デザイナーが、ページ上のリンクの見た目をコンパクトにするために、"read more" のような短く、繰り返されるリンクテキストを選択することがある。こういった状況は、より単純で非説明的な "read more" というページ上のテキストを、より説明的なリンクのラベルで置き換えることができるという点で、aria-label の望ましいユースケースとなる。単語 "read more" は、利用者間の一貫性のあるコミュニケーションを可能にするために (元のアンカーテキスト "[Read more...]" を置き換える) aria-label の中にも繰り返される。
<h4>Neighborhood News</h4>
<p>Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
<a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
</p>
<p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year
old Willy "Dusty" Williams in yesterday's mayoral election.
<a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
</p>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
aria-label 属性を使用するリンク要素に対して:
aria-label 属性の値が link 要素の目的を正確に説明していることを確認する。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA9 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
aria-labelledby プロパティは、すべての視覚的オブジェクトをラベル付けするために使用できる。
入力に適用する場合、aria-labelledby プロパティは、div contenteditable="true" によって構築されるカスタムテキスト入力のような非ネイティブ要素だけでなく、ネイティブの入力に対するラベル付けにも利用することができる。
aria-labelledby の特有の用途のひとつは、意味のあるラベルが複数のラベル文字列から構成される状況における、テキスト入力のためのものである。
制作者は、input 要素のラベルとして連結されるために、ラベル文字列に一意の id を割り当てる。aria-labelledby 属性の値は、参照されたラベル文字列がスクリーンリーダーで読みあげられるべき順序に並べられた、全 id のスペース区切りのリストである。サポートするユーザエージェントは、参照されたラベル文字列を連結して、入力欄の一つの連続したラベルとして読みあげる。
ラベル文字列の連結は、さまざまな理由で便利である。事例 1 において、入力欄は完全な一文のコンテキスト内に含まれている。望ましいスクリーンリーダーの出力は、"Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20" である。テキスト入力の id は aria-labelledby で参照される id の文字列に含まれているので、入力の値は連結されたラベルの正しい位置に含まれる。
aria-labelledby の別の応用は、入力欄の隣に視覚的なラベルを提供するためのスペースが存在しない場合、又はネイティブラベルの使用が不必要な冗長性を生む場合である。このとき、aria-labelledby を使用すると、ページ上の可視要素をそのような入力のラベルとして関連付けることができる。この方法は事例 2 において示されており、テーブルの列及び行の見出しが連結されて、テーブル内部のテキスト入力要素のラベルとなっている。
注記: ARIA accessible name and description calculation は、aria-labelledby で指定された文字列が、プロパティを有する要素のコンテンツに追加されるのではなく、置換するべきと規定している。よって、aria-labelledby プロパティをネイティブラベルに追加する場合、ラベル自体が aria-labelledby の id のシーケンスの一部として参照されていない限り、そのラベル内のテキストコンテンツが置換されるべきである。
テキスト入力欄があり、タイムアウトが発生する前に、利用者がデフォルトの時間を延長することを可能にしている。
文字列 "Extend time-out to" は、ネイティブの label 要素に含まれており、id="timeout-duration" により入力に関連付けられる。このラベルは、ARIA をサポートしないユーザエージェント上においてのみ、for/id 関連付けを使用してこの入力に関連付けられる。ARIA をサポートするユーザエージェント上では、for/id 関連付けは無視され、入力用のラベルは、HTML to Platform Accessibility APIs Implementation Guide における accessible name and description calculation に従って、aria-labelledby のみによって提供される。
テキスト入力上の aria-labelledby 属性は、三つの要素を参照する: (1) ネイティブのラベルを含む span、(2) デフォルトテキスト'20'を含むテキスト入力 (この入力が、ラベルテキストに関連する for/id でラベル付けされないことを思い起こすこと)、(3) span に含まれる文字列 'minutes'。これらの要素は、テキスト入力に対する完全なラベルを提供するために連結されるべきである。
注記: span 要素上の tabindex="-1" の使用は、スクリプトによってフォーカスをサポートすることを意味するものではない――ここでは、単に一部のブラウザ (IE9、IE10) がアクセシビリティツリーに span 要素を含めることを保証するためのものであり、その結果、aria-labelledby による参照に利用できるようになる。詳細については、Accessible HTML Elements を参照。
<form>
<p><span id="timeout-label" tabindex="-1"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20"
aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit" tabindex="-1"> minutes</span></p>
</form>実装例 連結されたラベルをもつタイムアウト入力フィールド は、Marco Zeheによってまとめられた Easy ARIA tip #2: aria-labelledby and aria-describedby から翻案した。
テキスト入力を含む単純なデータテーブルがある。入力ラベルは、それぞれの列及び行のヘッダーを参照する aria-labelledby を通して連結される。
<table>
<tr>
<td></td>
<th id="tpayer">Taxpayer</th>
<th id="sp">Spouse</th>
</tr>
<tr>
<th id="gross">W2 Gross</th>
<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
</tr>
<tr>
<th id="div">Dividends</th>
<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
<td><input type="text" size="20" aria-labelledby="sp div" /></td>
</tr>
</table>実装例 テキスト入力をもつ単純なテーブルに対する aria-labelledby を使用する は、Jim Thatcher による例に基づく。
二つの同時進行のトラックをもつ会議ワークショップ予約テーブルがあり、利用者が参加したいワークショップを選択することを可能にしている。テーブル内のチェックボックス入力の間をタブ移動するとき、トラック (1 又は 2)、タイトル、及び隣接するチェックボックスのラベル "Attend" に続くワークショップのスピーカーは、aria-labelledby を介してチェックボックスに対する連結ラベルとして提供される。
一部のブラウザ/スクリーンリーダーの組み合わせ (たとえば Mozilla Firefox と NVDA) は、さらに関連するテーブルセルのヘッダーを伝える。
<h1>Dinosaur Conference workshops timetable Thursday, 14. & Friday, 15. March 2013</h1>
<table>
<caption>Dinosaur Conference workshop booking table</caption>
<tbody><tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Thursday</th>
<th colspan="2" scope="colgroup">Friday</th>
</tr>
<tr>
<th scope="col" id="am1">9 to 12 AM</th>
<th scope="col" id="pm1">2 to 5 PM</th>
<th scope="col" id="am2">9 to 12 AM</th>
<th scope="col" id="pm2">2 to 5 PM</th>
</tr>
<tr>
<th id="track1" scope="row">track 1</th>
<td>
<h2 id="title-TM1">The Paleozoic era </h2>
<p>2 places left</p>
<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
<label id="TM1-att" for="TM1">Attend</label></p>
</td>
<td>
<h2 id="title-TA1">The Mesozoic era overview</h2>
<p>2 places left</p>
<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
<label id="TA1-att" for="TA1">Attend</label></p>
</td>
<td>
<h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
<p>1 place left</p>
<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
<label id="FM1-att" for="FM1">Attend</label></p>
</td>
<td>
<h2 id="title-FA1">The Jurassic period</h2>
<p>11 places left</p>
<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
<label id="FA1-att" for="FA1">Attend</label></p>
</td>
</tr>
<tr>
<th id="track2" scope="row">track 2</th>
<td>
<h2 id="title-TM2">The Cretaceous period</h2>
<p>18 places left</p>
<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
<label id="TM2-att" for="TM2">Attend</label></p>
</td>
<td>
<h2 id="title-TA2">The end of the dinosaurs</h2>
<p>2 places left</p>
<p><input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
<label id="TA2-att" for="TA2">Attend</label></p>
</td>
<td>
<h2 id="title-FM2">First discoveries of dinosaurs</h2>
<p>2 places left</p>
<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
<label id="FM2-att" for="FM2">Attend</label></p>
</td>
<td>
<h2 id="title-FA2">Emerging scholarship</h2>
<p>19 places left</p>
<p><input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
<label id="FA2-att" for="FA2">Attend</label></p>
</td>
</tr>
</tbody>
</table>実装例: 会議ワークショップ予約時間表
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
Using WAI-ARIA in HTML: Section 2.7 aria-labelledby and aria-describedby
aria-labelledby を使用する入力に対して:
aria-labelledby で参照される id が一意であり、かつ組み合わせてラベルを提供するテキストノードの id と一致することを確認する
aria-labelledby によって参照される要素を連結したコンテンツが、ラベル付けされた要素の目的又は機能に対する説明であることを確認する
1. 及び 2. の結果が真である。
これが達成基準に対して十分な達成方法である場合、このテスト手順を失敗しても、この達成方法がうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではない。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
これは、次の達成基準に関連する達成方法である:
ARIA10 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、aria-labelledby 属性を使用することで支援技術 (AT) によって読み取ることのできる要素に対する短い説明を提供することである。aria-labelledby 属性は、ラベル付けする要素の ID 属性とマッチする ID 参照値を使用することで、ページ上のどこかで可視になっているテキストと要素とを関連づける。スクリーンリーダーのような支援技術は、aria-labelledby 属性値によって特定される要素のテキストを、その属性をもつ要素に対するテキストによる代替として使用する。
この例は、図形が複数の画像要素から構成されている読み取り専用の星評価パターンに対して、どのように aria-labelledby 属性を用いて短いテキストの説明を提供するのかを示している。図形に対するテキストによる代替はラベルであり、ページ内の星パターンのすぐ下に見える形で置かれている。
<div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>
<div id="star_id">4 of 5</div>実装例: 複雑な図形に短い説明を提供する
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
aria-labelledby 属性が存在してかつ要素が alt 属性をサポートしない場合に各要素を検査する。
aria-labelledby 属性値がウェブページ上の要素の id であることを確認する。
aria-labelledby 属性によって特定される要素のテキストが、正確に要素をラベル付けする、又はその目的の説明を提供する、又は同等の情報を提供することを判断する
2. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA11 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、ウェブページのセクションに対して、プログラムによるアクセスを提供することである。ランドマークロール (又はランドマーク) は、ページのセクションをプログラムによって識別できるようにする。ランドマークは、支援技術 (AT) 利用者がページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立つ。
ランドマークはまた、支援技術の利用者に、複数ページで繰り返されるコンテンツのブロックをスキップする容易な方法を提供するとともに、ページの構造をプログラムによって理解できるようにする。たとえば、すべてのページに見られる共通のナビゲーションメニューが存在する場合、ランドマークロール (又はランドマーク) は、ナビゲーションメニューをスキップし、セクションからセクションにナビゲートするために使用できる。これは、伝統的な「スキップリンク」メカニズムそっくりに、支援技術利用者とキーボード利用者が、実際に後続にあるものを見つけるために大量のコンテンツの中をタブ移動するための時間と手間を省く (支援技術サポートの詳細については上記のユーザエージェントノートを参照のこと)。ニュースサイトのメニューに精通しているだろう、トップニュースを得ることにのみ関心がある目の不自由な利用者は、より容易に "main" ランドマークにナビゲートして、多数のメニューリンクを無視できる。別の状況で、目の不自由な利用者は、すぐにナビゲーションメニューを検索したいかもしれず、ナビゲーションランドマークにジャンプすることでこれを実現できる。
ランドマークはまた、目の見えるキーボード利用者がブラウザプラグインを使用して、ページのセクションにナビゲートするのを支援することもできる。
ランドマークは、セクションをマークする要素上の role 属性を使用してページに挿入される。属性値は、ランドマークの名前である。ロールの値は次のとおりである:
banner: ページの主見出し又は内部タイトルを含む領域。
complementary: 主要コンテンツをサポートしているが、独立しかつ意味のある、文書の任意のセクション。
contentinfo: 著作権やプライバシーに関する声明へのリンクなど、親文書に関する情報を含む領域。
form: フォーム関連要素のコレクションを表す文書の領域であり、その一部は編集可能な、処理するためにサーバーに送信可能な値を表すことができる。
main: 文書における主要コンテンツ。ほとんどの場合において、一つのページは一つのみの role="main" を持つ。
navigation: 文書内の、又は関連する文書へのナビゲートに適したリンクのコレクション。
search: ウェブ文書の検索ツール。
application: ウェブ文書とは対照的な、ウェブアプリケーションとして宣言された領域。(注記: application ロールは、スクリーンリーダーに対して通常のウェブナビゲーションコントロールをオフにする信号を与えるため、注意して使用すべきである。一般に、単純なウィジェットには application ロールを与えるべきでなく、また、全くウェブページのように利用されておらず、かつ支援技術を用いた利用者のテストが十分に行われている場合を除き、ウェブページの全体に application ロールを与えるべきではない。)
訳注: HTML5 において、上記のロールは代わりに HTML 要素を使うことでランドマークを支援技術に伝達できる。ARIA in HTML 及び Using ARIA も参照のこと。
特定のランドマークロールがページ上で複数回使用できる場合があり、主要及び補助のナビゲーションメニューのようなものを表すことができる。この場合、同一ロールは、領域にラベル付けを行うための有効な技術を用いて、互いに曖昧さをなくすべきである (下記の例を参照)。
ランドマークは、HTML の見出し、リスト、及びその他の構造的マークアップのようなネイティブセマンティックマークアップの補足となるべきである。ランドマークは、WAI-ARIA 対応の支援技術によって解釈可能であり、ブラウザによって利用者に直接公開されるものではない。
ページ上のすべてのコンテンツをランドマークに含めることがベストプラクティスであり、そうすればセクションからセクションへナビゲートするためにランドマークに依存するスクリーンリーダー利用者がコンテンツの経路を見失うことはなくなる。
訳注: HTML4 及び XHTML 1.0 は Superseded Recommendation としてマークされ、廃止された仕様である。
次の例は、ランドマークがどのように HTML4 や XHTML 1.0 文書に追加され得るのかを示している:
<div id="header" role="banner">A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links here ... </div>
<div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
<div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>次の例は、同じページで二つ以上の同じ種類のランドマークが存在する状況で、ランドマークがどのように HTML4 や XHTML1.0 文書に追加されうるのかのベストプラクティスを示している。たとえば、navigation ロールがウェブページ上で複数回使用される場合、各箇所は aria-labelledby を使用して、指定された一意のラベルを持ってもよい:
<div id="leftnav" role="navigaton" aria-labelledby="leftnavheading">
<h2 id="leftnavheading">Institutional Links</h2>
<ul><li>...a list of links here ...</li> </ul></div>
<div id="rightnav" role="navigation" aria-labelledby="rightnavheading">
<h2 id="rightnavheading">Related topics</h2>
<ul><li>...a list of links here ...</li></ul></div>次の例は、同じページで二つ以上の同じ種類のランドマークが存在する状況で、ラベルとして参照できるページでテキストが存在しない場合、ランドマークがどのように HTML4 や XHTML 1.0 文書に追加されうるのかのベストプラクティスを示している。
<div id="leftnav" role="navigaton" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>次の例は、"search" ランドマークをもつ検索フォームを示す。search ロールは一般に、フォームフィールド又は、検索フォームを囲む div に置かれる。
<form role="search">
<label for="s6">search</label><input id="s6" type="text" size="20">
...
</form> この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
ランドマークロールをもつ各要素を検査する。
ランドマークロール属性が、そのロールに対応するページのセクションに適用されている (すなわち、"navigation"ロールはナビゲーションセクションで適用され、"main" ロールはメインコンテンツが始まる場所に適用される) かどうかを検査する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA12 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、支援技術 (AT) に見出しとしてひとまとまりのコンテンツを識別するための手段を提供することである。要素に role="heading" を適用することで、(スクリーンリーダーなどの) 支援技術に、あたかもそれが見出しであったかのように扱わせることができる。
ページ上に複数の見出しがあり、かつ見出し階層が視覚的な提示を通して定義される場合、見出しの階層レベルを示すために aria-level 属性が使用されるべきである。
可能な場合、ネイティブな見出しマークアップを直接使用すること。たとえば、<div role="heading" aria-level="1"> を使用するのではなく、h1 を使用するのが好ましい。しかし、見出しマークアップの代わりに heading ロールを使用することが必要な場合がある。たとえば、スクリプトが既存の要素の階層構造に依存しているレガシーサイトを改装する場合などである。
heading ロールとネスティングレベルの用途については、WAI-ARIA 1.0 Authoring Practices で説明されている。
訳注: heading ロールとネスティングレベルの用途に関する「WAI-ARIA 1.0 Authoring Practices」のリンクは、正しくは WAI-ARIA 1.0 Authoring Practices§3.2.7.3. Implicit Nesting and Headings となる。しかしながら、この文書は古い文書であり、最新の Authoring Practices である WAI-ARIA Authoring Practices 1.1 において、対応する記述は見当たらないことに注意する。
この例は、スクリプトが既存の要素の階層構造に依存する、又はレベルが不明であるレガシーなサイトを改装する際に、role="heading" を使用した簡単な見出しを実装する方法を示す。たとえば、さまざまなソースからシンジケートされたウェブコンテンツを、最終的なプレゼンテーションがどうなるかの知識なしで構築できるかもしれない。
<div role="heading">Global News items</div>
... a list of global news with editorial comment....
<div role="heading">Local News items</div>
... a list of local news, with editorial comment ...この例は、role="heading" と aria-level 属性を用いてレベル7見出しを実装する方法を示す。HTMLはレベル6までの見出しのみをサポートしているため、このセマンティックスを提供するためのネイティブ要素は存在しない。
...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold/div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
属性 role="heading" をもつ各要素を調べる。
要素の内容が見出しとして適切であるかどうかを判断する。
要素が aria-level 属性を持つ場合、値が適切な階層レベルであるかどうかを判断する。
2. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA13 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、支援技術によって読み取ることができるページの領域に対して名前を提供することである。aria-labelledby 属性は、領域又はランドマークとしてマークアップされたページ内のセクションと、そのセクションを分類するページ内のテキストを関連付ける方法を提供する。
ランドマークロール (又はランドマーク) は、ページのセクションをプログラムで識別できるようにする。
ランドマークは、支援技術 (AT) 利用者がページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立つ。aria-describedby のように、aria-labelledby は、スペース区切りのリストを使用して、ページの他の領域を指すための複数の ID を受け入れることができる。また、この集合を定義するものは ID に限定されている。
以下は、complementary ランドマークに aria-labelledby を使用した一例である。この文書内の見出しがついている領域は、見出しの id 値を含む aria-labelledby プロパティによってマークすることができる。
<p role="complementary" aria-labelledby="hdr1">
<h1 id="hdr1">
Top News Stories
</h1>
</p>次のコード断片は、静的な文を含む application ランドマークである。タイプ application の領域ランドマークがあり、かつ静的な説明テキストが利用可能であるため、application ランドマークには、そのアプリケーションと静的テキストを関連付けるための aria-describedby による参照を含めている。
<div role="application" aria-labelledby="p123" aria-describedby="info">
<h1 id="p123">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
....
</div>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
属性 role=region 又はランドマークロールを持ち、aria-labelledby 属性も存在している各要素を調べる。
aria-labelledby 属性値が、ページ上の要素の id であることを確認する。
その id を持つ要素のテキストが、ページのセクションを正確にラベル付けしていることを確認する。
2. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA14 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
目の見える利用者の場合、要素のコンテキスト及び外観は目的を決定するために十分な手がかりを提供できる。一例は、ポップアップの div (ライトボックス) を閉じるためのコントロールを示すために、この div の右上隅でよく使用される 'X' である。
設計手法やレイアウトによって、可視のラベルが存在しないが、コンテキストと視覚的な外観によってコントロールの目的が明確になっているような場合、要素には、アクセシブルな名前を提供するために、aria-label 属性を与えられることがある。
この他、ネイティブ HTML ラベル要素がコントロールでサポートされない場合、要素には、アクセシブルな名前を提供するために属性 aria-label が与えられることがある――たとえば、よりリッチなテキスト編集体験を提供するために、div が contentEditable に設定され、input type="text" や textarea などのネイティブフォーム要素の代わりに使用される場合である。
ページ上で、リンクは追加情報をもつポップアップボックス (div) を表示する。その close (閉じる) 要素は、単に文字 'x' を含むボタンとして実装される。プロパティ aria-label="close" は、ボタンにアクセシブルな名前を提供するために使用される。
<div id="box">
This is a pop-up box.
<button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>
</div>実装例: 閉じるボタンの例。
<div role="group" aria-labelledby="groupLabel">
<span id="groupLabel>Work Phone</span>
+<input type="number" aria-label="country code">
<input type="number" aria-label="area code">
<input type="number" aria-label="subscriber number">
</div>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
aria-label を使用する要素に対して:
利用者の入力が要求される場所で aria-label 属性の値が適切に要素の目的を説明していることを確認する
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA15 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、簡潔なテキストによる代替がオブジェクトで提供される機能や情報を適切に伝達しない場合に、画像の説明を提供することである。
WAI-ARIA には、aria-describedby プロパティを使用して、セクション、描画、フォーム要素、画像などと説明テキストを関連付けできる機能がある。これは、利用者が複雑な画像を理解するのを助ける追加情報を提供するのに両者が有用であるという点において longdesc 属性に似ている。longdesc のように、aria-describedby を使用して提供される説明テキストは、HTML で alt 属性を使用して提供される短い名前とは別のものである。longdesc と異なり、aria-describedby は画像を含むページの外の記述を参照できない。画像と同じページのコンテンツを使用して長い説明を提供する利点は、支援技術を持たない、目の見える人を含め、その代替が誰でも利用できることである。執筆時点 (2013 年 10 月) で、一部の支援技術が利用者の操作なしに画像の alt 属性情報の直後に aria-describedby の内容を読みあげることは注目に値する――これは、longdesc 属性のほとんどの実装が、追加の説明を読むために利用者の明示的な操作を必要とすることとは対照的である。
aria-labelledby のように、aria-describedby は、スペース区切りのリストを使用してページの他の領域を指すための複数の ID を受け入れることができる。この集合を定義するものは ID に限定されている。
次の例は、テキストの説明が画像と同じページ上にある場所で、長い説明を提供するためにどのように aria-describedby が画像に適用されるかを示す。
<img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
<p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by
Jean-Guy Millome, and represents ...</p>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
aria-describedby 属性が存在する各画像要素を調べる。
その aria-describedby 属性が、その説明として用いられるテキストを含む要素の id を介して、要素とテキストの説明とをプログラム的に関連付けているかどうかを調べる。
結合された同等のテキスト及び関連付けられたテキストの説明が、オブジェクトに同等の目的を正確に説明する又は提供していることを調べる。
1.、2. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA16 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、支援技術によって読み取ることができるユーザインタフェースコントロールの名前を提供することである。WAI-ARIA は、aria-labelledby プロパティを使用して、セクション、描画、フォーム要素、画像などとテキストを関連付けるための方法を提供する。この達成方法では、aria-labelledby 属性を使用して、フォームフィールドなどのユーザインタフェースコントロールと、それをラベル付けするページ上のテキストとを関連付ける。
aria-describedby のように、aria-labelledby は、スペース区切りのリストを使用して、ページの他の要素を指すように複数の ID を受け入れることができる。この機能は、目の見える利用者がコントロールを識別するために周囲のコンテキストからの情報を使用する状況において、aria-labelledby を特に有用にする。複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用するでも、名前がページ上の他の複数のテキスト要素から構成される場合の事例を紹介している。
aria-labelledby の機能はネイティブな HTML の label 要素と似ているように見えるが、いくつか違いがある:
aria-labelledby は複数のテキスト要素を参照することができる。label が参照できるのは一つだけである。
label 要素がフォーム要素のみに使用できる一方で、aria-labelledby はさまざまな要素に対して使用できる。
label をクリックすると、関連付けられたフォームフィールドをフォーカスする。これは aria-labelledby では起こらない。この動作が必要な場合、label を使用するか、スクリプトを使用してこの機能を実装する。
2013 年 12 月の時点で、特に古いブラウザや支援技術で、label のほうが aria-labelledby よりもより良くサポートされていることに注意すること。
以下は、ラベル専用のテキストがないものの、正確にコントロールをラベル付けするためにページ上の他のテキストが使用できる状況で、aria-labelledby を使用して単純なテキストフィールドにラベルを提供している例である。
<input name="searchtxt" type="text" aria-labelledby="searchbtn">
<input name="searchbtn" id="searchbtn" type="submit" value="Search">以下は、スライダーコントロールにラベルを提供するために aria-labelledby を使用している例である。このケースでは、ラベルテキストが、より長い隣接するテキスト文字列の中から選択される。この例は、単にラベル付けの関係を示すために簡略化されていることに注意すること。カスタムコントロールを実装するコンテンツ制作者は、コントロールが他の達成基準を満たしていることも確認する必要がある。
<p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
<div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>以下は、label 要素を使用した複数の参照を伴う aria-labelledby の例である。aria-labelledby をもつラベルに複数のソースを連結する方法の詳細については、複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用するを参照すること。
<label id="l1" for="f3">Notify me</label>
<select name="amt" id="f3" aria-labelledby="l1 f3 l2">
<option value="1">1</option>
<option value="2">2</option>
</select>
<span id="l2" tabindex="-1">days in advance</span>注: label 要素を使うことには多くの理由がある。利用者が label 要素のテキストをクリックすれば、対応するフォームフィールドがフォーカスを受け取るため、器用さの問題を持つ人に対してクリックターゲットを大きくすることができる。また、label 要素は常にアクセシビリティ API を介して公開される。span が使われるかもしれない (ただしその場合、span が Internet Explorer のすべてのバージョンでアクセシビリティ API を介して公開されるように、span は tabindex="-1" を与えるべきである)。しかし、span では、クリック可能な領域が大きくなるという利点が失われることになるだろう。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
aria-labelledby 属性が存在する場合に各ユーザインタフェースコントロール要素に対して:
aria-labelledby 属性の値は、ある要素の id、又はウェブページ上の複数 id のスペース区切りのリストであることを確認する。
参照される要素又は複数要素のテキストが正確にユーザインタフェースコントロールにラベル付けすることを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA17 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、グループのように、フォーム内部で関連するコントロールのセットをマークアップすることである。グループに関連付けられた任意のラベルは、グループ内の個別のコントロールに対する共通のラベル又は修飾子としても機能する。支援技術は、グループ内および外へのナビゲーションの際に、グループの開始と終了、およびグループのラベルを示すことができる。これは、ユーザインタフェースのデザインが fieldset と legend による達成方法 (H71) を採用することが困難である場合に、プログラム的にフォームコントロールをグループ化するために実行可能な代替手段である。
ラジオボタングループの場合、role="group" の代わりに role="radiogroup" を使用できる。
グループは aria-labelledby を使用してラベル付けできる。
この達成方法は、role="group" をもつ単一のコンテナ内にフォーム上のすべてのコントロールを包むためのものではない。
9 桁の長さで、三つのセグメントに分割される社会保障番号フィールドは、role="group" を使用してグループ化できる。
<div role="group" aria-labelledby="ssn1">
<span id="ssn1">Social Security#</span>
<span style="color: #D90D0D;"> * </span>
<input size="3" type="text" aria-required="true" title="First 3 digits" />-
<input size="2" type="text" aria-required="true" title="Next 2 digits" />-
<input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div>実装例: 複数パートに分かれたフィールドのグループ化。
この例は、role=radiogroup のデモである。ラジオボタンが role=radio をもつカスタムコントロールであることにも注意。(しかし span を実際にラジオボタンのように動作させるためのスクリプトは、この例には含まれていない。) 必要に応じて、グループの関係を視覚的に強調するために、フィールドのようにグループの周りにボーダーを配置するために CSS を使用してもよい。CSS プロパティはフォームの下にある。
<h3>Set Alerts for your Account</h3>
<div role="radiogroup" aria-labelledby="alert1">
<p id="alert1">Send an alert when balance exceeds $ 3,000</p>
<div>
<span role="radio" aria-labelledby="a1r1" name="a1radio"></span>
<span id="a1r1">Yes</span>
</div>
<div>
<span role="radio" aria-labelledby="a1r2" name="a1radio"></span>
<span id="a1r2">No</span>
</div>
</div>
<div role="radiogroup" aria-labelledby="alert2">
<p id="alert2">Send an alert when a charge exceeds $ 250</p>
<div>
<span role="radio" aria-labelledby="a2r1" name="a2radio"></span>
<span id="a2r1">Yes</span>
</div>
<div>
<span role="radio" aria-labelledby="a2r2" name="a2radio"></span>
<span id="a2r2">No</span>
</div>
</div>
<p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p>フィールドのグループの周りにボーダーを配置するための、関連する CSS スタイル定義:
div[role=radiogroup] {
border: black thin solid;
} この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
各コントロールに対する個別のラベルが十分な説明を提供せず、かつ追加のグループレベルの説明が必要とされる場合、関連するコントロールグループに対して:
論理的に関連する input 又は select 要素のグループが role=group をもつ要素内に含まれていることを確認する。
このグループが aria-label 又は aria-labelledby を使用して定義されるアクセシブルな名前を持つことを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA18 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、入力エラーが発生していることを利用者に警告することにある。role="alertdialog"を使用することで、通知を作成することができる。この通知は、次のような特徴をもつモーダルであるべきである:
aria-label 又は aria-labelledby 属性で、アラートダイアログにアクセシブルな名前を与えている。
aria-describedby で、アラートのテキストへの参照を提供している。
そのアラートダイアログは、少なくとも一つのフォーカス可能なコントロールを含んでおり、アラートダイアログが開く際にフォーカスがそのコントロールに移動すべきである。
タブ順序は、タブが開いている間アラートダイアログの内部に拘束される。
ダイアログが閉じられる場合、可能であれば、フォーカスはダイアログが開く前の位置に戻る。
アラートダイアログは、必要とされるまで、支援技術によってアクセスされる方法で存在すべきではないことに注意。これを行う一つの方法は、静的な HTML に含めない代わりに、エラー状態がトリガーされた時にスクリプトを通して DOM に挿入することである。この挿入は、次の HTML サンプルに対応する。
この例は、role="alertdialog"を使用する通知が、無効な情報を入力した人に通知するためにどのように使用できるかを示す。
<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
<h1 id="alertHeading">Error</h1>
<div id="alertText">Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</div>
<button>Save and Continue</button>
<button>Return to page and correct error</button>
</div>実装例: アラートダイアログ。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(今のところ、なし。)
アラートダイアログが表示される原因となるエラーをトリガーする。
アラートダイアログは少なくとも一つのフォーカス可能なコントロールを含み、アラートダイアログが開いた際にフォーカスがそのコントロールに移動することを判断する。
タブ順序は、タブが開いている間アラートダイアログ内に拘束され、ダイアログを閉じた際に、可能ならば、フォーカスはダイアログが開く前の位置に戻ることを判断する。
適用された role="alertdialog" をもつ要素を調べる。
aria-label 又は aria-labelledby 属性のいずれかが、適切にアラートダイアログにアクセシブルな名前を与えるために使用されていることを判断する。
アラートダイアログのコンテンツが入力エラーを識別していることを判断する。
アラートダイアログのコンテンツがエラーを修正する方法を提案しているかどうかを判断する。
2.、3.、5. 及び 6. の結果が真である。達成基準 3.3.3 を達成するためには、7 の結果も真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA19 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、入力エラーが発生した場合に支援技術 (AT) に通知することである。aria-live 属性は、エラーメッセージがライブ領域のコンテナに注入された際に、AT (スクリーンリーダーなど) による通知を可能にする。aria-live 領域内部のコンテンツは、テキストが表示されている場所で AT がフォーカスする必要なしに、AT によって自動的に読みあげられる。
ライブ領域のプロパティを直接適用する代わりに使用できる特殊ケースのライブ領域のロールも多数ある。
訳注: 「特殊ケースのライブ領域のロール」のリンクは、正しくは WAI-ARIA 1.0 Authoring Practices§5.3. Choosing Between Special Case Live Regions となる。しかしながら、この文書は古い文書である。ライブ領域のロールについては、WAI-ARIA 1.1§5.3.5 Live Region Roles も参照されたい。
次の例は、aria-live=assertive を使用しているのと同等の role=alert を使用する。
例において、ページロード時に DOM に存在する aria-atomic=true 及び aria-live プロパティ又は alert ロールをもつ空のエラーメッセージコンテナ要素が存在する。エラーコンテナは、ほとんどのスクリーンリーダーでエラーメッセージが読み上げられるために、ページロード時に DOM に存在しなければならない。aria-atomic=true は、複数の無効な投稿をした後にエラーメッセージを iOS の Voiceover に読み上げさせるために必要である。
jQuery は、送信時に入力が空であるかどうかをテストし、そうであれば、ライブ領域コンテナにエラーメッセージを注入するために使用される。新しい送信が試みられるたびに、前のエラーメッセージがコンテナから削除され、新しいエラーメッセージが挿入される。
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
$('#signup').submit(function() {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('<p>Please enter your first name.</p>');
}
if ($('#last').val() === '') {
$('#errors').append('<p>Please enter your last name.</p>');
}
if ($('#email').val() === '') {
$('#errors').append('<p>Please enter your email address.</p>');
}
return false;
});
});
</script>
<form name="signup" id="signup" method="post" action="">
<p id="errors" role="alert" aria-atomic="true"></p>
<p>
<label for="first">First Name (required)</label><br>
<input type="text" name="first" id="first">
</p>
<p>
<label for="last">Last Name (required)</label><br>
<input type="text" name="last" id="last">
</p>
<p>
<label for="email">Email (required)</label><br>
<input type="text" name="email" id="email">
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</form>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(今のところ、なし。)
role=alert 又は aria-live=assertive 属性が指定された空のエラーコンテナが、ページの読み込み時の DOM に存在することを判断する。
ライブ領域のコンテンツの表示又更新を引き起こすエラーをトリガーする。
エラーメッセージが既に存在するエラーコンテナに挿入されたことを判断する。
1. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
この達成方法は、ユーザエージェント及び支援技術がプログラム的にページのセクションを識別できるように、そのページのセクションに一般的な region ロールを割り当てる方法を示す。region ロールは、より容易に発見可能かつナビゲート可能であるように、重要なコンテンツを含むページの区切りを定める。一般的な領域は、セクションが標準の文書ランドマークロールによってマークアップできない場合に使用されるべきである (ARIA11: ページのリージョンを特定するために ARIA ランドマークを使用する (ARIA)
を参照)。
領域は一般的なグループ化された要素であり、かつ利用者がどの領域にいるのかを伝えるための手段が必要になるため、領域に名前を付けることは重要である。領域には、aria-labelledby や aria-label、その他の手法を使用して名前を付けることができる。そうすることで、ページ上のコンテンツと情報の関係をより良く公開する助けとなる。過剰に使用した場合、スクリーンリーダーの利用者に対してページを過度に冗長にすることがあるので、region のロールは、慎重に使用するべきである。
毎週変更する世論調査を含むニュースサイトのホームページ上のセクションが、role="region" でマークアップされている。フォーム上部の h3 テキストは、aria-labelledby を使うことで領域の名前として参照されている。
<div role="region" aria-labelledby="pollhead">
<h3 id="pollhead">This week's Poll</h3>
<form method="post" action="#">
<fieldset>
<legend>Do you believe the tax code needs to be overhauled?</legend>
<input type="radio" id="r1" name="poll" />
<label for="r1">No, it's fine the way it is</label>
<input type="radio" id="r2" name="poll" />
<label for="r2">Yes, the wealthy need to pay more</label>
<input type="radio" id="r3" name="poll" />
<label for="r3">Yes, we need to close corporate loopholes</label>
<input type="radio" id="r4" name="poll" />
<label for="r4">Changes should be made across the board</label>
</fieldset>
</form>
<a href="results.php">See Poll Results</a>
</div>
利用者は、銀行のウェブサイトにログインした後、リンクを展開することで定期預金口座の詳細を確認できるようになっている。詳細は、region ロールでマークアップされた範囲の中にある。その領域の見出しは role=heading を持ち、その領域に名前を付ける aria-labelledby の中に含まれている。
<ol>
<li><a id="l1" href="#" aria-expanded="false" title="Show details" aria-controls="block1" >John Henry's Account</a><img src="images/panel_expand.gif" alt="" />
<div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1" role="region"><span id="cd1" role="heading" aria-level="3">Certificate of Deposit:</span>
<table>
<tr><th scope="row">Account:</th> <td>25163522</td></tr>
<tr><th scope="row">Start date:</th> <td>February 1, 2014</td></tr>
<tr><th scope="row">Maturity date:</th><td>February 1, 2016</td></tr>
<tr><th scope="row">Deposit Amount:</th> <td>$ 3,000.00</td></tr>
<tr><th scope="row">Maturity Amount:</th> <td>$ 3,072.43</td></tr>
</table>
</div>
</li>
</ol>
次の例は、気象ポートレットに一般的な "region" ランドマークがどのように追加されうるのかを示している。ラベルとして参照できる既存のテキストがページ内に存在しないため、aria-label でラベル付けされている。
コード例:
<div role="region" aria-label="weather portlet">
...
</div> この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
role="region"で マークアップされる各セクションに対して:
コンテンツを調べ、独立したランドマークを持つのに十分なほど重要であることを確認する。
標準のランドマークロールがこのコンテンツに適さないことを確認する。
領域がプログラムによる解釈が可能な名前を持つことを確認する。
1. から 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
これは、次の達成基準に関連する達成方法である:
この達成方法は、aria-invalid を使用して、検証に失敗しているフィールドを明確に識別する方法を示す。次の場合が最も使用に適している:
エラーの説明から、失敗したフィールドをプログラムによって識別できない。
失敗したフィールドが、一部の利用者に利用できない方法で――たとえば、色に依存しない、ボーダーのような視覚的な手がかりなどの技術によって視覚的にレンダリングされるエラーアイコンの使用によって――識別される。
注記: 上記二つの状況の一つは、データフォーマット、データ範囲、又はrequired プロパティを伝えるラベル及び／又は命令とプログラムによって関連付けられているフィールドにも起こりうる。
失敗したフィールドと具体的なエラーの説明をプログラム的に関連付けることが常に望ましい一方で、ページのデザイン又は利用されているフレームワークは、コンテンツ制作者がプログラム的に関連付けるための能力を制約するかもしれない。このような場合、コンテンツ制作者は、検証に失敗したフィールド上でプログラムによって aria-invalid を "true" に設定してもよい。これは主に、目の不自由な利用者によって使用される (スクリーンリーダー/画面拡大のような) 支援技術で解釈可能である。フィールドが "true" に設定された aria-invalid を持つ場合、フィールドがフォーカスを取得する際に、Safari の VoiceOver は "invalid data" とアナウンスし、JAWS と NVDA は "invalid entry" としてエラーを通知する。
この ARIA 属性は、プログラムによって設定/オンにされる必要がある。入力の検証が行われる又はフォームが送信される前に、その属性を "true" に設定するべきではない。aria-invalid を "false" に設定することは、フォームコントロールにこの属性を全く指定しないことと同じである。当然ながら、この場合、支援技術は利用者に何も伝えない。
可視テキストが、失敗したフィールドをプログラムによって識別する及び／又はエラーを補正できる方法を伝えるために使用される場合、aria-invalid を "true" に設定することは、厳格な整合性の観点からは必要とされないが、それでも利用者のために役立つ情報を提供する可能性がある。
何も入力されていない必須フィールドに aria-invalid 属性が指定されている。フォーム上部のメッセージは、フォームの送信がこのせいで失敗したことを伝えている。
jQuery コード及び HTML フォームマークアップの一部は次のとおりである:
<script>
...
...
if ($('#first').val() === '') {
$('#first').attr("aria-invalid", "true");
$("label[for='first']").addClass('failed');
}
if ($('#last').val() === '') {
$('#last').attr("aria-invalid", "true");
$("label[for='last']").addClass('failed');
}
if ($('#email').val() === '') {
$('#email').attr("aria-invalid", "true");
$("label[for='email']").addClass('failed');
}
...
...
</script>
<style type="text/css">
label.failed {
border: red thin solid;
}
</style>
<form name="signup" id="signup" method="post" action="#">
<p>
<label for="first">First Name (required)</label><br>
<input type="text" name="first" id="first">
</p>
<p>
<label for="last">Last Name (required)</label><br>
<input type="text" name="last" id="last">
</p>
<p>
<label for="email">Email (required)</label><br>
<input type="text" name="email" id="email">
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</form>
Aria-invalid 及び aria-describedby が、個人識別番号 (PIN)、電子メールアドレス、又は開始日が期待される形式でない場合に、エラーを示すために一緒に使用されている。エラーメッセージは、aria-describedby を使うことでフィールドに関連付けられており、aria-invalid によって、エラーになっているフィールドをプログラムによって簡単に見つけられるようになっている。
以下は、事例 1 において電子メールアドレスフィールドにレンダリングされる HTML コードである。(sam@example.com の代わりに) "samexample.com" のような不正な電子メールアドレスが利用者によって入力された場合、HTML コードは次のようになる:
<div class="control">
<p><label for="email">Email address: [*]</label>
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_1" /></p>
<span class="errtext" id="err_1">Error: Incorrect data</span></div>
そしてデータが電子メールフィールドに入力されなかった場合、HTML コードは次のようになる:
<div class="control">
<p><label for="email">Email address: [*]</label>
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_2" /></p>
<span class="errtext" id="err_2">
Error: Input data missing</span>
</div> jQuery コード: jQuery は、class 属性だけでなく aria-invalid 又は aria-describedby 属性をも追加し、かつエラーテキストを追加するために使用される。これは、aria-invalid 及び class="error" を挿入するコードであるが、プログラム的にコントロールとエラーテキスト "incorrect data" を関連付けないコードである:
$(errFld).attr("aria-invalid", "true").attr("class", "error");
// Suffix error text:
$(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');
CSS コード:
input.error {
border: red thin solid;}
span.errtext {
margin-bottom: 1em; padding: .25em 1.4em .25em .25em;
border: red thin solid; background-color: #EEEEFF;
background-image:url('images/iconError.gif');
background-repeat:no-repeat; background-position:right;
}
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証の失敗の伝達を aria-invalid に依存する各フォームコントロールに対して:
検証の失敗が存在しない場合に aria-invalid が true に設定されないことを確認する。
検証の失敗が存在する場合に aria-invalid が true に設定されることを確認する。
プログラム的に関連付けられたラベル/プログラム的にフィールドに関連づけられた説明文がエラーを理解するのに十分な情報を提供していることを確認する。
1. から 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。