ARIA Properties, DOM, and Graceful Degradation

Do ARIA properties need to exist within the actual HTML? Or, can they be added via Javascript at runtime?

Consider the following scenario...

<button id="subm开发者_开发问答it" type="submit">Submit</button>
<div id="validation-message"></div>

If the user's browser has no Javascript, we show them validation on a new page (processed and generated by server). If the user's browser does have Javascript, we augment the above HTML with the following, and then show the validation dynamically in the DIV.

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

I guess another questions is, does it hurt anything to have these ARIA properties directly within the HTML source? If Javascript is not present, would ARIA do anything at all?

---

ARIA Landmark roles are OK to put directly in the markup, they can be beneficial even when JavaScript is disabled. If the functionality the ARIA attributes are describing is only available when JavaScript is enabled, I would say it's OK to add those attributes with JavaScript.

---

The W3C document (Working Draft) Using WAI-ARIA in HTML recommends, in clause Add ARIA inline or via script?, that ARIA attributes be added with scripting rather than written in HTML markup. It however adds that the attribute can be written in markup, if it “does not rely on scripting to provide interaction behaviour” or if “the content and interaction is only supported in a scripting enabled browsing context”.

This is a bit indirect, and maybe even contrived, way of saying that it is mostly OK to put the attributes in markup. An exception would be a case where the attribute expresses a relationship that makes sense without scripting, too, but gives incorrect information when scripting is disabled. I would say that aria-haspopup might belong to this category, since an element might conceivably have a popup without scripting, too, but currently it has to be implemented with scripting – so when scripting is disabled, a browser might still expect aria-haspopup to have relevance and would thus draw an incorrect conclusion.