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

只有您适合为您的代码和内容适当地添加语义，所以我们真的不能为您做这件事。但是，这里有一些重要的事情 remember/do/follow:

您的 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 2

对于图片，为 <img> 标签提供 alt 属性，这是对图片的描述。例如，<img class="profile-img" alt="profile picture">.

对于语义，使用 <em> 而不是 <i> 和 <strong> 而不是 <b>。

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

Answer 3

提供的信息太少。需要上下文。也就是说：

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

html5 屏幕阅读器的辅助功能

html5 accessibility for screen readers

html

accessibility

screen-readers