主页 / coding / 问题 / 79489263
Accepted
stanley
Asked: 2025-03-06 19:55:53 +0800 CST

如何创建仅使用 CSS 背景图像且无文本的可访问空 <a> 标签

  • 772

如何创建仅具有 CSS 背景图像的可访问空标签，例如用于社交媒体链接。

因此唯一的 HTML 标签是：

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

CSS 如下：

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

这里有类似的堆栈溢出问题，但它没有为这个问题提供具体的语法：HTML 可访问性，允许使用空元素吗？

html

1 个回答

  1. Best Answer

    您有两个选择：隐形span和aria-label。基本上由您决定，但 ARIA 俱乐部的第一条规则是，除非万不得已，否则不要使用 ARIA。

    隐形跨度

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

    并且该类sr-only可以从任何框架（如 bootstrap）中获取。我引用的是从这里获取的：

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

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

相关问题