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="submit" 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.