達成基準 4.1.2：名前 (name) ・役割 (role) 及び値 (value)について

[Mosgree]

上記、達成基準の理解ができておらず、ご教示願います。 名前 (name) ・役割 (role) 及び値 (value）とは「H91: HTML のフォームコントロール及びリンクを使用する」に記載表のことと解釈いたしております。 その中で「状態、プロパティ、利用者が設定可能な値はプログラムによる設定が可能」、「支援技術を含むユーザエージェントが、これらの項目に対する変更通知を利用できる」という状況が具体的に想像できず、どう解釈していいのか分かりません。 何卒、よろしくお願いいたします。

[momdo]

質問に対する正面からの回答にはなっていないのですが、達成基準に関しては、まずは解説書を一読していただくのがよいと思います。 達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) を理解する

その上で、H91は解説書にある「十分な達成方法」の「状況A」です。「状況B」や「状況D」に照らし合わせて具体的なシーンを想像いただくのがよいかと思います。

[Mosgree]

回答ありがとうございます。 お礼が遅くなりまして申し訳ありません。 一度解説書は読んでいたのですが、うまく理解できずお尋ねいたしましたが、再度解説書を読んでみたいと思います。

[momdo]

達成基準の注記にあるように、

この達成基準は、主に独自のユーザインタフェース コンポーネントを開発、又はスクリプトで実装するコンテンツ制作者に向けたものである。例えば、標準的な HTML のコントロールを仕様に沿って使用していれば、既にこの達成基準を満たしていることになる。

ですから、「標準的な HTML のコントロールを仕様に沿って使用」することを考えるH91からご質問の状況を理解しようとするのは困難かと思われます。

[Mosgree]

回答ありがとうございます。 MicheckerからH91については達成基準を満たすと判断いたしておりましたが、「4.1.2 名前 (name) ・役割 (role) 及び値 (value)」を検討したときどのように理解すべきものか分からずお尋ねしました。 まだ経験も浅く、用語についても十分に理解できていない状態で度々のお尋ねになり、申し訳ございません。 再度、解説書をよく読み直したいと思います。

[jidaikobo-shibata]

@Mosgree 「4.1.2 名前 (name)・役割 (role)・値 (value) (A)」の理解のたすけになるかもしれないので、不適合のサンプルをご紹介します。

https://a11yc.com/city-komaru/practice/fact.php?criteria=4.1.2

ページの下の方にある「このページについてご意見がありましたらご記入ください」の入力欄に続く「送信」ボタンは、「標準的な HTML のコントロールを仕様に沿って使用」していないボタンの例です。

標準的なHTMLのコントロールを用いていないため、入力欄にフォーカスした後、タブキーを打鍵しても、送信ボタンにフォーカスしません。

「2.1.1 キーボード (A)」の観点からも問題ですが、「4.1.2 名前 (name)・役割 (role)・値 (value) (A)」の典型的な問題のサンプルです。

[Mosgree]

@jidaikobo-shibata さま サンプルをご紹介いただきありがとうございます。 適切に要素設定（標準的なHTMLのコントロール設定）がされてないため、フォーカスが思うような動きをしないということで、わかりやすい例ご提示いただきありがとうございました。 この場合でいう具体的な「名前 (name)・役割 (role)・値 (value) (A)」は何に当たりますでしょうか？

また、以前のmomodoさんにもご教示いただいたのですが、注記に記載のある「この達成基準は、主に独自のユーザインタフェース コンポーネントを開発、又はスクリプトで実装するコンテンツ制作者に向けたものである。」とは具体的にどのようなコンテンツになるかサンプル等ありませんでしょうか？

私の理解力不足のため度々のお尋ねになり大変申し訳ございませんが、何卒よろしくお願いいたします。

[jidaikobo-shibata]

この場合でいう具体的な「名前 (name)・役割 (role)・値 (value) (A)」は何に当たりますでしょうか？

この場合では、本来「送信ボタン」という「名前」と「役割」を持っているはずのボタンが、見た目だけボタンになっているということです。このボタンの例だと、よい「値」のサンプルはありませんが、スクリーンリーダで、チェックボックス等を読み上げると、

「チェック項目の名称、チェックボックス、チェックなし」

というような読み上げを行います。

• チェック項目の名称（名前）
• チェックボックス（役割）
• チェックなし（値）

というようにそれぞれを提供しています。

また、以前のmomodoさんにもご教示いただいたのですが、注記に記載のある「この達成基準は、主に独自のユーザインタフェース コンポーネントを開発、又はスクリプトで実装するコンテンツ制作者に向けたものである。」とは具体的にどのようなコンテンツになるかサンプル等ありませんでしょうか？

まずは回答者の名前が間違っています。

上述のサンプルサイトのボタンが、まさに、「独自のユーザインタフェース コンポーネントを開発、又はスクリプトで実装」したものです。当該部分のコードは以下のとおりです。

<div id="feedback-button">送信</div>
<script>
jQuery (function($){
  $('#feedback-button').on('click',function(){
    $(this).parent('form').submit();
  })
});
</script>

「標準的な HTML のコントロールを仕様に沿って使用」した、普通の送信ボタンは、

<input type="submit" value="送信">

というようなものです。

後者のボタンの見た目の整え方を知らない人などが、前者の方法でボタンを実装するとき等に、こういったことが起こります。

[Mosgree]

＠jidaikobo-shibataさま 再度、回答いただきありがとうございました。 「名前 (name)・役割 (role)・値 (value) (A)」について承知いたしました。

また、回答いただいたmomdoさまのお名前を間違えておりまして、申し訳ございません。

「独自のユーザインタフェース コンポーネントを開発、又はスクリプトで実装」についても、ご教示いただきありがとうございます。 Htmlの実装を知らずに、それに合わせて作成した場合に発生しやすい事例ということで、大変わかりやすく解説いただきありがとうございました。