社交媒体图标使用哪个标签

Question

在可访问性方面，哪些标签应该包装社交媒体图标？我有这个 div，包含社交媒体图标：

  <div class="social-media-container" role="region">
      <div>
        <ion-icon name="logo-facebook"><a href="#"></a></ion-icon>
      </div>
      <div>
        <ion-icon name="logo-twitter"><a href="#"></a></ion-icon>
      </div>
      <div>
        <ion-icon name="logo-instagram"><a href="#"></a></ion-icon> 
      </div>
    </div>

包裹在 div 和 aria-ole 中的是三个社交媒体图标。关于可访问性，我应该为他们使用哪个标签？

Answer 1

按照 https://www.w3schools.com/icons/ 的建议，我会使用 <i> 标签，后跟描述性 class，例如 i-facebook

在你的情况下，这看起来像：

 <div class="social-media-container" role="region">
      <div>
       <i class="i-facebook"><a href="#"></a></i>
      </div>
      <div>
        <i class="i-twitter"><a href="#"></a></i>
      </div>
      <div>
        <i class="i-instagram"><a href="#"></a></i>
      </div>
    </div>

Answer 2

据我所知，没有一个特定的标签可以用来包装图标。但是，您可以做一些事情来使您的图标易于访问，从 Font Awesome docs:

If your icons have semantic meaning, you’ll need to manually add a few things so that your icon is appropriately accessible:

aria-hidden="true" attribute.

Provide a text alternative inside a (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.

title attribute on the icon to provide a tooltip for sighted mouse users.

据此，您的 HTML 将是这样的：


<div class="social-media-container" role="region">
  <div>
    <a href="#">
       <ion-icon name="logo-facebook" aria-hidden="true" title="Visit our Facebook webpage"></ion-icon>
       <span class="sr-only">Visit our Facebook webpage</span>
    </a>
  </div>
  <div>
    <a href="#">
       <ion-icon name="logo-twitter" aria-hidden="true" title="Visit our Twitter webpage"></ion-icon>
       <span class="sr-only">Visit our Twitter webpage</span>
    </a>
  </div>
  <div>
    <a href="#">
       <ion-icon name="logo-instagram" aria-hidden="true" title="Visit our Instagram webpage"></ion-icon>
       <span class="sr-only">Visit our Instagram webpage</span>
    </a>
  </div>
</div>

Answer 3

社交媒体图标没有特定标签，但是您可以随时继续 fontawesome.com 以获得一些最好的图标。您需要做的就是：

转到fontawesome.com
在左上角的搜索框中搜索您要查找的图标角落.
单击您最喜欢的图标。
点击显示在您旁边的“开始使用此图标”按钮选择的图标。
相应图标出现HTML代码，只需将代码复制到你的 html 文件在标签下（虽然使用不是必要的）。
您已准备好使用该图标。

社交媒体图标使用哪个标签

Which tag to use for social media icons

html

accessibility