WebAIM - Web Accessibility In Mind

E-mail List Archives

for

From: Laurence Lewis
Date: Apr 27, 2021 3:59PM

I recently had a discussion on what the triggering element for launching a
modal dialog should be. I am of the thought this should always be a
<button>. However, is this best practice, or are there use cases where the
triggering element should be an anchor <a> with or without a href?

One of my arguments for using a button element to open a modal is that an
<a> with or without a href does not align with a modal dialog that sits on
top of a temporarily hidden parent window. The <a> element is defined in
the HTML spec as:

- *'If the a element has no href attribute, then the element represents
a placeholder for where a link might otherwise have been placed, if it had
been relevant, consisting of just the element's contents.'*

With a href:

- *'If the a element has an href attribute, then it represents a
hyperlink (a hypertext anchor) labeled by its contents.'*


4.5.1. The a element
https://www.w3.org/TR/html52/textlevel-semantics.html#the-a-element

The button element is defined as

- *'The button element represents a control allowing a user to trigger
actions, when enabled. It is labeled by its content.'*

This, to me anyway, is a better representation of a triggering element for
a modal dialog.

I am interested in the opinions of others. If anyone has done user testing
on this, I would like to hear what you discovered.

Laurence Lewis
Accessibility Senior Specialist, Telstra, Brisbane Australia