web-dev-qa-db-ja.com

HTML要素でdisabled属性とaria-disabled属性を使用する場合

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

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

またはこのように？

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

またはこのように？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled>
htmlhtml5accessibilitywai-ariahtml-input
27
Ralph David Abernathy

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

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

NVDAとJAWSの両方がフィールドをスキップする（または、明示的にフォーカスされている場合は、それが無効になっていることをアナウンスする）ことを知って喜んでいるでしょう。

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

2015年からSteve Faulkner（ARIA仕様の編集者の一人）によるこの記事でダンプできるARIA属性についてもう少し読むことができます（aria-disabledは明示的にリストされておらず、概念は同じです）： http://html5doctor.com/on-html-belts-and-aria-braces/

私の答えが あなたの他の質問 about required対aria-required、それは本質的に同じ答えだからです。

19
aardrian

要するに、もはやaria-disabledは必要ありません。無効に設定して使用してください。

@aardrianの回答を完了するため。

disabled属性をネイティブでサポートするHTMLコントロールを使用する場合、aria-disabled属性は必要ありません。

カスタムコントロールを使用する場合は、aria-disabled属性を使用できます。たとえば、次のコードでは、「再生」ボタンが押されるまで「一時停止」ボタンが無効になります（JavaScriptがtabindexおよびaria-disabled属性を変更します）。

<img src="controls/play.png"
  id="audio-start"
  alt="Start"
  role="button"
  aria-disabled="false"
  tabindex="0" />

<img src="controls/pause.png"
  id="audio-pause"
  alt="Pause"
  role="button"
  aria-disabled="true"
  tabindex="-1" />

W3Cによると、次のことに注意してください。

無効な要素は、タブオーダーからフォーカスを受け取らない場合があります。 [...] aria-disabled属性の設定に加えて、著者は、アイテムが無効化されたことを示すために外観を変更すべきである（グレー表示など）。

22
Adam

重要な違いは、ボイスオーバーを使用する場合、「無効」プロパティだけのアイテムはタブに移動されないことです。ただし、aria-disabled = "true"のアイテムは、フォーカスを受け取り、淡色表示のままスクリーンリーダーに報告することができます。

13
brandonbradley