0

Considering accessibility, can I use:

<a href="about.html" title="About"></a>

without any content, instead of:

<a href="about.html">About</a>

Associated with this CSS rule:

a[href="about.html"]:before {
    /* 1F6C8 🛈 CIRCLED INFORMATION SOURCE = information */
    content: "\1F6C8";
}

Supposing that an appropriate font is available. I actually use RichStyle font.

  • 1
    No. And since the site you're linking is yours and it's supposed to be about CSS you should know that without question. – Devin Oct 9 '15 at 22:56
2

You could, but assistive technologies handling of title tags isn't perfect (more on WCAG).

A better solution is not to use a title tag and instead hide the element text using css.

CSS:

a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

HTML:

<a href="#"> <span>Washington stimulates economic growth </span>
| improve this answer | |
0

You should not do this.

In my answer on SO I outlined which cases of CSS content generation are possibly inaccessible/accessible, and your example is definitely inaccessible to several user groups, for example:

  • Users of clients without CSS support (e.g., browsers with CSS disabled, text browsers, feed readers, printers, …) won’t be able to recognize/use this link.

  • Users that use speech input to navigate your page will likely not be able to target this link directly.

  • Users that use screen readers to access your page might not understand what this link is about (depends on screen reader capability/configuration).

Besides being problematic for accessibility, it can also be a usability problem:

  • Users that don’t load your font (because they have JavaScript disabled, or their network filter doesn’t allow it, or they have disabled it for security reasons, etc.), and don’t have a font installed that contains a glyph for this Unicode icon, would just see a confusing box.

  • Icon-only links (whether used in accessible or inaccessible ways) are rarely a good idea, as not all people will understand the icon or interpret it in the same as you, and it breaks searching (Ctrl+f) for this link on the page, and it breaks translation of this link, etc.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.