This post originally appeared on the Yahoo! Accessibility blog.
Do 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.
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.
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:
<a href="/location" class="location"></a>
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.
- Drag the above link to your browser's bookmark toolbar
- Navigate to your test page and click select the bookmarklet link from your toolbar
- 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.