ARIAのプロパティ、DOM、およびグレースフルな分解

Question

ARIAプロパティは実際のHTML内に存在する必要がありますか？または、実行時にJavascriptで追加できますか？

ユーザーのブラウザには何のJavascriptを持っていない場合は...

<button id="submit" type="submit">Submit</button> 
<div id="validation-message"></div> 

を次のシナリオを検討して、我々は彼らに（サーバーで処理し、生成された）新しいページの検証を示しています。ユーザーのブラウザにJavascriptがある場合は、上記のHTMLを次のように拡張し、DIVに動的に検証を表示します。

$('#submit').attr({'aria-haspopup':true, 'aria-owns':'validation-message'}); 
$('validation-message').attr({'role':'alert', 'aria-live':'assertive'}); 

もう1つの質問は、これらのARIAプロパティをHTMLソース内に直接配置することに何か傷つきますか？ Javascriptが存在しない場合、ARIAは何もしませんか？

Answer 1

ARIAランドマークの役割は、マークアップに直接入れても問題ありません。JavaScriptが無効な場合でも効果的です。 ARIAの属性が記述している機能がJavaScriptが有効になっている場合にのみ利用可能な場合、JavaScriptでこれらの属性を追加することは問題ありません。

Answer 2

W3C文書（作業中のドラフト）Using WAI-ARIA in HTMLでは、Add ARIA inline or via script?の節では、ARIA属性をHTMLマークアップで記述するのではなくスクリプトで追加することを推奨しています。ただし、「スクリプトを使用して対話動作を行わない」場合や、「コンテンツとインタラクションがスクリプト対応の閲覧コンテキストでのみサポートされている」場合は、属性をマークアップで記述することができます。

これは少し間接的で、たぶん意図していますが、属性をマークアップに入れても大丈夫です。例外は、属性がスクリプトなしでも意味をなさない関係を表しているが、スクリプトが無効な場合には誤った情報を与える場合です。私はaria-haspopupがこのカテゴリに属しているかもしれないと考えています。なぜなら、要素にはスクリプトもなくポップアップがあるかもしれないからですが、現在はスクリプトを使って実装する必要があるため、スクリプトを無効にしてもブラウザはaria-haspopupに関連性したがって、間違った結論を引き出すことになる。