WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dialog semantics and aria?

for

From: Bryan Garaventa
Date: Apr 25, 2014 11:24AM

I'd recommend the following instead.

<div role="region" aria-labelledby="modal-title" tabindex="-1">

<button>
<span aria-hidden="true">
X <!--- or equivalent icon font --->
</span>
<span class="assistiveText">Close Dialog</span>
</button>

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

<div>

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

</div>
</div>

I assume tabindex=0 was set so you could set focus to the modal when
rendered, but this shouldn't be in the tab order, so -1 should be set
instead.

I don't recommend role=dialog due to the keyboard interaction differences
enforced by some screen readers, and adding it doesn't actually increase
accessibility for screen readers in any way. The region role is a good
compromise because it provides beginning and ending boundary feedback with a
defined label.

>Would you add aria-live to the outer div?

It probably wouldn't do anything unless you were writing the content into
the div after rendering it using innerHTML anyway.

>Would a <section> be better than <div> for outer element?

Not better or worse that I'm aware of, just different, so it's worth playing
with.