Is an <a> witout an href= accessible?

[tracknut]

I’m not learned in accessibility, my apologies in advance…

A particular pop-up on my web site is beyond the stage where I can make it work without JS. Currently, the code looks like this:

<a id="signatures"><img src="signatures.png"></a>

which displays an icon, and there’s a JS click handler watching #signatures which brings up the pop-up, etc. This all works fine, though it occurs to me that I have no idea whether this is compliant to accessibility rules.

Would someone mind giving me a quick run-down on this scenario?

• Is the click handler on the [a] adequate for informing the user that this icon can be clicked?
• Could the [a] just as easily be any other html tag (say a <span>) as long as the click handler still exists (accessibility-wise, I mean)
• Is there a reason that [a] tag might/should be a [button] instead, even if I want to completely remove the default button styling?

Thanks!

[DaveMaxwell]

@tracknut

• Is the click handler on the [a] adequate for informing the user that this icon can be clicked?
• Could the [a] just as easily be any other html tag (say a ) as long as the click handler still exists (accessibility-wise, I mean)
• Is there a reason that [a] tag might/should be a [button] instead, even if I want to completely remove the default button styling?

• sure, but the whole a element isn’t needed. Just add the id to the image
• it could but see previous.
• honestly? No as a button without a form adds no values. To be fair, to make it accessible, you’d have to (at the minimum):
  • add a href to the link so the form can be accessible without javascript (though it wouldn’t be a popup anymore)
  • add an alt tag to the image for screen readers to know what to do with it.

[Gandalf]

An image needs alt text for accessibility.

[tracknut]

Thanks guys. Given I can’t really make this work without JS then, simply having an alt text on the image is about all I can do. And I’ll remove the a tag, since it really isn’t used anymore.

[kicken]

I’m sure there’s more to be considered, but at a minimum when thinking about accessibility for controls I ask:

1. Can the control be reached and activated via keyboard and
2. Is there a textual description for what the control does.

I do not think your current code meets either of these criteria, since an a tag without a href attribute cannot be reached and activated via tab and there is no text describing what your “button” does.

Since what you have is effectively a button, I would write the HTML as such and use a button element. There doesn’t need to be a form to use a button, using them as UI elements for scripting is perfectly valid (that’s why type=“button” exists after all).

Adding a title to button that describes what the button does will also aid in informing users what clicking it will do. In the end, the HTML I’d write is this:

<button type="button" id="signatures" title="Click to view the signatures">
   <img src="signatures.png" alt="View signatures">
</button>

By nature of being a button, it can be tabbed to and activated by keyboard. Alt text on the image provides a text label if the image fails to load. A title on the button describes what happens if the user activates the button.

[tracknut]

Beautiful. I like that solution and have it working.

Thanks

[Archibald]

The information here from W3C for accessible pop-up modal dialogs may help but the examples have an unbelievable amouint of JavaScript:

Modal Dialog Example

Note the use of ARIA.

It needs to be remembered that the way of closing a pop-up also needs to be accessible.

A disabled friend who uses speech recognition software finds pop-ups more troublesome than anything else.

The approach I prefer, especially taking into account that the information may be displayed on a small smartphone, is to avoid using pop-ups by simply linking to another web page in each case. On those web pages I include a “Back” <a> element. In fact as I may include links to those pages from emails I use JavaScript to hide the ‘Back’ element if the link has not come from a websiite page (using document.referrer)

[tracknut]

Thanks for the reference, @Archibald, that’s a lot of stuff there. In my case, the popup isn’t a form, it’s just an information table that goes with the main page being displayed. So a lot of the interaction described on that link isn’t happening in my scenario. I do have a close box, that I implemented with the same button tag described by @kicken above, and for the time being I think it’s probably acceptable for the site.