WebAIM - Web Accessibility In Mind

E-mail List Archives

Dialog semantics and aria?

for

From: Jesse Hausler
Date: Apr 25, 2014 11:05AM

Just looking to verify that these are good semantics and aria for a dialog
component.

<div role="dialog" aria-labelledby="modal-title" tabindex="0">

<span class="assistiveText">Start Dialog</span>

<button>

X <!--- or equivalent icon font --->

<span class="assistiveText">Close Dialog</span>

</button>

<h2 id="modal-title"> <!--- Title of Modal goes here---> </h2>

<div role="document">

<!--- contents of modal goes here--->

</div>
</div>

Would you add aria-live to the outer div?
Would a <section> be better than <div> for outer element?

I sometimes wish the WAI Aria Authoring practices guide would just include
recommended semantics for their widgets, as opposed to giving links to
differing examples.

Thanks,
Jesse