Our Blog > Blog Detail

Web Content Viewer- Asponte Custom Skin

Actions

Accessibility Requirements: Anchor tags without HREF

  • Created By: uid=nciafardoni,cn=users,dc=asponte,dc=com uid=nciafardoni,cn=users,dc=asponte,dc=com
  • Updated: July 29, 2016

It is fairly common these days to have lots of click-targets throughout a webpage that aren’t actually taking you anywhere.  Javascript is used to open light boxes, trigger custom UI widgets, and even hit external web services in some cases.  While it may not be the absolute best practice, sometimes those click-targets are represented by anchor tags.  Without getting into debates about where on-click functionality should be assigned, it is pretty simple to just do a tag like so:
 

<a onclick="”myFunction();”">Do Something</a>

 

I recently came across a different issue with the above solution that is related to accessibility requirements.  When an anchor tag has no href attribute, it is not accessible via the tab button.  This is an accessibility compliance issue for many customers, especially in government.  The solution is to do the following:

 

<a href=”#someDescriptiveName” onclick=”myFunction(event);”>Do Something</a>

 

and in your function:

 

function myFunction (event) {

            event.preventDefault();

            …

}

 

someDescriptiveName is just used to assist with screen reader software.  You also have to remember to pass the event argument to your function; some browsers will handle it fine if you forget, but some will throw undefined errors when you call event.preventDefault().  This all works the same if you attach your on-click function via javascript like the following code we are using to toggle showing and hiding a navigation menu:

 

$(".sitemenutoggle").click(function(event) {

            event.preventDefault();

            $("#menu").toggle();

});

 

One final note, you can make use of the attributes ‘aria-haspopup’ and ‘aria-isexpanded’ in order to help screen-readers when using things like light boxes and toggled menus.

Contact Form- Asponte Custom Skin

Actions

Contact Us

*
*


Submit
Call Us 888-926-9434
Complementary Content
${loading}