时间戳

首页 > 解决方案 > 哪个标签用于社交媒体图标

html - 哪个标签用于社交媒体图标

问题描述

关于可访问性，哪些标签应该包装社交媒体图标？我有这个 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>

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

标签： htmlaccessibility

解决方案

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

如果您的图标具有语义含义，您需要手动添加一些内容，以便您的图标可以适当地访问：

  • aria-hidden="true" 属性。
  • 在（或类似的）元素内提供替代文本。还包括适当的 CSS 以在视觉上隐藏元素，同时保持辅助技术可以访问它。
  • 图标上的 title 属性为有视力的鼠标用户提供工具提示。

据此，您的 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>

推荐阅读