Find Empty Links and Buttons

This post originally appeared on the Yahoo! Accessibility blog.

Angry button guy by Heidi BDo you know if your page has angry links and buttons? Buttons and links like to have good text; depriving them makes everyone angry. So use the following bookmarklet to discover which ones are not happy.


The Problem

CSS allows us to place background images on links and buttons, removing the need to have inline images and giving us more control over typography. This unfortunately has led to incorrect coding patterns. In general, it's a bad idea to place text within an image for maintainability and internationalization. It can also be an accessibility and Search Engine Optimization problem when the images are used to replace text.

Bad HTML

In the following code CSS is used to provide dimension and a background image for the link. However, there is no text for the screen reader or search engine spider to understand what the link represents: Get Location


<a href="/location" class="location"></a>


The Solution

Links must always include the text within the image.


<a href="/location" class="location">Get Location</a>


Empty Link and Button Bookmarklet

It's easy to check a page for empty links with this bookmarklet: Empty buttons and links.

  1. Drag the above link to your browser's bookmark toolbar
  2. Navigate to your test page and click select the bookmarklet link from your toolbar
  3. Empty links and buttons will now be surrounded by big red borders. Please note: this will not find links that include a space between the tags.

Special Thanks to Thierry Koblentz for help with fine-tuning the CSS within the bookmarklet and Heidi Barack for creating the angry button.