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.

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
Sent: Friday, April 25, 2014 10:06 AM
To: WebAIM Discussion List
Subject: [WebAIM] Dialog semantics and aria?

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
messages to <EMAIL REMOVED>