Make links focusable (or use real buttons)
a element) to create a trigger for the function – you click it and something happens.
That may be ok, though often it would be more appropriate to use
<button type="button">Do something</button> or
<input type="button" value="Do something" />.
What is not ok is inserting an
a element without giving it a non-empty
href attribute, i.e.
<a href="#">Do something</a>. Without a non-empty
href attribute, the “link” will not be focusable and cannot be activated from a keyboard.
An example of this can be seen at Stack Overflow, a site many will be familiar with. Next to each question and answer is a set of two arrows for voting up/down. The markup for those arrows looks like this:
<a class="vote-up-off" title="…">up vote</a> <span class="vote-count-post">0</span> <a class="vote-down-off" title="…">down vote</a>
The absence of an
href attribute makes these
a elements unfocusable. This can be fixed easily by changing the markup to this:
<a href="#" class="vote-up-off" title="…">up vote</a> <span class="vote-count-post">0</span> <a href="#" class="vote-down-off" title="…">down vote</a>
However, in this case I would suggest dropping the
a elements completely and using real buttons instead, since that is semantically more in line with what the arrows are:
<button type="button" class="vote-up-off" title="…">up vote</button> <span class="vote-count-post">0</span> <button type="button" class="vote-down-off" title="…">down vote</button>
You can then use CSS to style the buttons to look the way you want, they will be fully accessible to both keyboard and mouse users, and your markup will be a bit more semantic.
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.
- Next post: Time to make the title attribute device independent
Subscribe / follow
- Dev Ops Engineer @ General Things at The Sourcery (San Francisco, CA, Ca, US)
- Lead Web Applications Developer (PHP) at Use All Five, Inc. (Los Angeles, CA (Venice), Ca, US)
- Junior Designer & Front-ender at QueryClick (Edinburgh, UK, GB)
- Front End Web Designer/Developer at Blackstone Media Group (Fort Lauderdale, FL, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost