How can you create an accessible empty tag with only a CSS background image, for example for a social media link.

So the only HTML tag would be:

<a class="social-link" href=";></a>

And the CSS would be:

.social-link{
  height:48px;
  width:48px;
  background-image: url("mastodon.png");
}

Similar stack overflow question here, but it doesn't provide specific syntax for this question: HTML Accessibility, are empty elements allowed?

How can you create an accessible empty tag with only a CSS background image, for example for a social media link.

So the only HTML tag would be:

<a class="social-link" href="https://mastodon.social"></a>

And the CSS would be:

.social-link{
  height:48px;
  width:48px;
  background-image: url("mastodon.png");
}

Similar stack overflow question here, but it doesn't provide specific syntax for this question: HTML Accessibility, are empty elements allowed?

• html
• css
• accessibility

• 2 The most common solution would be to have text in the element as well, but to hide it from people not using screenreaders or similar assistive technology. stackoverflow/q/26032089/1427878 – C3roe Commented Mar 6 at 11:59
• 1 Generally any element without text content that needs to be described for accessibility can use an aria-label (MDN documentation). – DBS Commented Mar 6 at 12:00
• I tend to just put the text in there, and then use color: transparent to hide the text - from a screen reader perspective that makes no difference. Though if you just want to show an icon, it might be better to use that in there with an alt or somthing. – somethinghere Commented Mar 6 at 13:19

2 Answers 2

You have two options: an invisible span and an aria-label. Basically it's up to you to decide, but the first rule of the ARIA club says don't use ARIA unless you absolutely have to do it. Also, the aria-label solution is less flexible as, most probably, it won't allow automatic translations, that's why it might be rejected by an accessibility auditor.

Invisible Span

<a class="social-link" href="https://mastodon.social"><span class="sr-only">Mastodon</span></a>

and the sr-only class can be taken from any framework like bootstrap. The one I'm quoting is taken from here:

/*
    Improved screen reader only CSS class
    @author Gaël Poupard
        @note Based on Yahoo!'s technique
        @author Thierry Koblentz
        @see https://www.cssmojo/hide-content-from-sighted-users/
    * 1.
        @note `clip` is deprecated but works everywhere
        @see https://developer.mozilla./en-US/docs/Web/CSS/clip
    * 2.
        @note `clip-path` is the future-proof version, but not very well supported yet
        @see https://developer.mozilla./en-US/docs/Web/CSS/clip-path
        @see http://caniuse/#search=clip-path
        @author Yvain Liechti
        @see https://twitter/ryuran78/status/778943389819604992
    * 3.
        @note preventing text to be condensed
        author J. Renée Beach
        @see https://medium/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
        @note Drupal 8 goes with word-wrap: normal instead
        @see https://www.drupal./node/2045151
        @see http://cgit.drupalcode./drupal/commit/?id=5b847ea
    * 4.
        @note !important is important
        @note Obviously you wanna hide something
        @author Harry Roberts
        @see https://csswizardry/2016/05/the-importance-of-important/
*/

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;  /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;            /* 3 */
}

/*
    Use in conjunction with .sr-only to only display content when it's focused.
    @note Useful for skip links 
    @see http://www.w3./TR/2013/NOTE-WCAG20-TECHS-20130905/G1
    @note Based on a HTML5 Boilerplate technique, included in Bootstrap
    @note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
        @author Sylvain Pigeard
        @see https://github/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
    clip: auto !important;
    -webkit-clip-path: none !important;
        clip-path: none !important;
    height: auto !important;
    margin: auto !important;
    overflow: visible !important;
    width: auto !important;
    white-space: normal !important;
}

Aria-label

<a class="social-link" href="https://mastodon.social" aria-label="Mastodon"></a>

Advantages of color: transparent

A few comments suggested that compared to the aria attribute and even the "visually hidden" approach, using plain "physical" text with color: transparent could be strongly preferable in some scenarios. Some of these advantages are:

1. Text content remains "searchable" within and "copyable" from the page.
2. Presumably such "physical text" is more portable and "better for SEO": while robots reportedly read Aria attributes, they do not put much weight on them, and especially empty links are said to be very problematic, i.e., almost entirely ignored.
3. As already mentioned in the accepted answer, physical text is more likely to be translated, and generally more easily consumed by users and their assistive technologies: for example it seems to be the only way to keep it accessible in the Forced Colours / High Contrast modes, where, unless treated accordingly, visually hidden would be still hidden, and background images are usually disabled completely.

As a demonstration of point 1: run this snippet and search (CtrlF) for the word "find" followed by the word "me". Also try to select and copy the text, and think about whether your users would likely want to keep this functionality or not:

html { color-scheme: dark light; }

<span style="
  color: transparent;
  background-image: radial-gradient(closest-side, canvastext, canvas);
">Find <!-- followed by --> me</span>