It’s easy to correct missing alt tags on images but some accessibility errors, like empty links, are more mysterious and ease to overlook. Sometime copying and pasting new code, such as code for social icons or links from a 3rd party, can unwittingly bring in empty links into a website.
I thought my website was mostly free from errors but I looked again (using the WAVE tool from WebAIM) and found that some new social icons that had been added actually were empty links. To fix these I added descriptive link text between the opening and close <a> tags and visually hid the text with a CSS class. That way my social icons still looked the visually the same but included actual text aiding non-visual users context to know what the links are about.
This Links & Accessibility article also says “do not have broken or empty links” because having an empty links give no context to allow a screen reader user to know what the link is about. Sometimes designers make an empty link visually to look like a button by adding a background image via CSS styles.
I recently noticed that the website of a computing center at a major university had several empty links in their website header and footer. The university’s logo was an empty link because instead of the logo being an inline image, it was actually a background image, added through CSS, on a empty <a> tag. To fix this empty link error they could add “ACME University” link text and visually hide it for sighted users, if desired. Then a screen reader user could still have context to know what the link is for and the page could have the visual look desired by marketers.