Why ANDI?
ANDI can be used used to rapidly find links (as well as buttons that use links). Installing and using ANDI is incredibly simple because it is a JavaScript bookmarklet, so it installs and works in just about any modern browser.
In the screenshot below, we have invoked the ANDI bookmarklet on the Converge Accessibility home page. Then, we selected the “links/buttons” tool from the drop-down tool selector. Now we can use the forward/backward buttons to move from one link or button to the next– or you can just hover your mouse over a specific link that you’re interested in.
But what we’re really interested in are the accessibility features that the ANDI panel reveals.
Discover a Link’s True Accessible Name
Just as you can never tell a book by its cover, there are also times when the text for a link doesn’t give the full story. This is especially true when the link only contains an image or CSS content (such as an icon). These links may (or may not) be quite accessible, but one key item is, of course, the text that is read to a screen reader. Developers are a sneaky bunch and they can hide a bunch of information in the title attribute or by using various ARIA labeling techniques that can make it really hard to know exactly what should get read to the screen reader. If you come across a link or button-styled anchor element and want to know what’s being read to a screen reader, ANDI’s got your back.
In the screenshot below, we’ve got ANDI up and running and have hovered our mouse over the “about us” link. The part that we’re interested in is the “ANDI Output”. This is the true “accessible name” for the link– and exactly what should get read out to the screen reader.
