web-dev-qa-db-ja.com

入力要素に必須属性とaria-required属性を使用する場合

フォームにアクセスできるようにしようとしています。入力にrequired属性とaria-required属性の両方を持たせるか、1つだけにする必要がありますか？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" required>

またはこのように？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true">

またはこのように？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true" required>

記事 Accessible HTML5 Forms – Required Inputs は、両方を実装するのが最善であると主張しています。

html5accessibilityrequiredwai-ariahtml-input
16
Ralph David Abernathy

ジョン・フォリオが2012年にその記事を書いたとき、それは非常に真実でした。両方が必要でした。

今日ではそうではありません。私はあなたの例を取り、それを CodePenで に入れて、JAWSとNVDAで確認します（申し訳ありませんが、VoiceOverはありません）。

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" required>

NVDAとJAWSの両方が必要に応じてフィールドをアナウンスすることを知って喜んでいるでしょう。

要するに、あなたは必要ないaria-requiredもう。 requiredを使用してください。

2015年からSteve Faulkner（ARIA仕様の編集者の一人）によるこの記事でダンプできるARIA属性についてもう少し読むことができます： http://html5doctor.com/on-html-belts- and-aria-braces /

31
aardrian

HTML5にはrequired属性がありますが、まだaria-requiredはHTML5をまだサポートしていないユーザーエージェントにとって有用です。

参照： MDNのaria required属性の投稿を使用

2
Bernd Bauer