屏幕阅读器的 html5 可访问性

Question

如何添加辅助功能

文字：

按钮、图像和锚点：

<div class="btn-group" role="group">
    <button class="btn btn-default">
        <img class="profile-img">
        <span id="user-name">john</span>
    </button>
    <button class="btn btn-default">
         Log out
         <i class="fa fa-sign-out fa-lg"></i>
    </button>
</div>
<div>
    <a  href="" class="change-user-link">Change recipient</a> 
</div>

Answer 1

提供的信息太少。需要上下文。话虽这么说：

• 将alt 属性添加到<img>，
• 确保链接具有有效的href，
• 不要依赖 FontAwesome 图标来传达关键信息，
• 可能会转储 role 属性，因为它可能不需要（需要上下文才能知道是否需要）。

Answer 2

只有您适合为您的代码和内容正确添加语义，所以我们真的无法为您执行此操作。但是，这里有一些重要的事情要记住/做/遵循：

• 您的 HTML 不是事件有效的，因此请以 correcting that 开头。

• 永远不要使用 HTML 元素，因为它使 可见页面外观（即使用 <h4> 之类的标题来制作文本 小而粗体）。所有布局和展示都应使用 CSS。

• 使用最合适的 HTML 元素来传达您所拥有内容的语义。为了 例如，继续使用<table> 元素，如果你真的是 尝试显示表格数据并使用<ul> 和<li> 制作菜单。

• 尽管有（许多）神话，HTML5 分段元素 (section, 大多数屏幕阅读器无法识别article、nav、aside)。它们的使用实际上使创建有效的文档大纲变得更加困难。

• 正确使用标题 (<h1>...<h6>) 元素是最好的 你可以对convey a proper document structure做的事情。

• 在适用的情况下使用 WAI-ARIA 地标角色 多年来的标准，所有主要的屏幕阅读器都理解 它。

Answer 3

对于图像，将alt 属性提供给<img> 标记，这是图像的描述。例如，<img class="profile-img" alt="profile picture">。

对于语义，使用<em> 代替<i> 和<strong> 代替<b>。

另外，请查看ARIA（可访问的富 Internet 应用程序）。一个有用的 ARIA 属性是角色属性。它提供了有关元素用途和功能的额外内容。