無効な属性とHTML要素のaria-disabled属性を使用するタイミングは？

Question

私はフォームにアクセス可能にしようとしています。私の入力にはdisabledとaria-disabledの両方の属性がありますか？

<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> 

Answer 1

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

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

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

つまり、はありませんはもうaria-disabled必要ありません。ちょうどdisabledを使用してください。

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

私の答えはyour other questionについてrequiredaria-required対に似ている場合、それは本質的に同じ答えであるので、それはあります。

Answer 2

要するに、もうアーリア無効化は必要ありません。ただ無効にしてください。

@ aardrian答えを完了するには

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

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

<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" /> 

注：

無効要素がタブ順序からフォーカスを取得しない場合があります。 [...] aria-disabled属性を設定することに加えて、著者は、アイテムが無効になったことを示すために外観（灰色など）を変更すべきです（SHOULD）。

Answer 3

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