GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.4.1.2 プログラムが解釈可能な識別名、役割及び設定可能な値に関する達成基準

7.4.1.2 プログラムが解釈可能な識別名、役割及び設定可能な値に関する達成基準

すべてのユーザインタフェースコンポーネント(フォーム、リンク及びスクリプトが生成するコンポーネントなどを含む。)では、識別名及び役割は、プログラムが解釈可能でなければならない。また、利用者が設定可能なステータス、プロパティ及び値は、プログラムが設定可能でなければならない。かつ、ユーザエージェントがこれらの項目が変更された通知を受け取ることができなければならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

リンクやフォーム・コントロールなどのユーザーインタフェースコンポーネントについては、支援技術がその識別名、役割や状態(ステータス)といった情報を収集して、ユーザーに提示できるようにしなければなりません。

例えば、HTMLのウェブページで標準的なフォーム・コントロールやリンクを使用している場合は、それらの要素を仕様に準じて使用していれば本達成基準に適合したことになります。HTML標準のリンクおよびコントロールの識別名や役割等については、『WCAG 2.0 実装方法集』の「H91: HTMLのフォーム・コントロール及びリンクを用いる」を参照してください。

しかし、汎用的な要素などを用いて独自のコントロールを作成したり、標準とは異なる役割や機能をもたせて再定義したりする場合には、その識別名、役割や状態(ステータス)といった情報を支援技術に提示する必要があります。

支援技術に提示する方法としては、まだ草案の段階ではありますが、W3Cで策定中の新しい仕様「WAI-ARIA」で定義されているrole属性などを用います。詳細は、W3Cの「Accessible Rich Internet Applications (WAI-ARIA) 1.0:英語」で確認できます。ただし、日本語のウェブコンテンツで使用する場合には、特にスクリーンリーダーなどの支援技術によるサポート状況を確認する必要があります。

事例と実装

良い例 1:リンク(a要素)

下記ソースコードのようなテキストリンクの場合は、リンクテキスト(「アクセシビリティ」)が識別名となる。また、a要素には「リンク」という役割が割り当てられている。

ソースコード例

< a href="a11y.html" >アクセシビリティ< /a >

良い例 2:ボタン(< input > type="image")

下記ソースコードのようなinput要素の画像ボタンの場合は、alt属性値(「検索」)が識別名となる。また、input要素のtype="image"には「プッシュボタン」という役割が割り当てられている。

ソースコード例

< input type="image" src="img/search_btn.gif" alt="検索" id="searchBtn" / >< br / >

良い例 3:ラジオボタン(< input > type="radio")

下記ソースコードのようなinput要素のラジオボタンの場合は、label要素でマークアップされたラベル(「サイト内を検索」)が識別名となる。また、input要素のtype="radio"には「ラジオボタン」という役割が割り当てられている。

ソースコード例

< input name="search" type="radio" id="s1" / >
< label for="s1" >サイト内を検索< /label >

参考情報

関連する達成基準

等級A