html5 中的辅助功能

Question

我们想增加对残障人士的支持。所以我通过互联网阅读了它，但并没有从那里得到太多。我不明白何时使用 aria 以及何时使用 role 属性。

我有 3 列的简单 HTML。我在其中使用了 role 属性，并想知道可以在此 HTML 上做些什么来提高可访问性。就像我们想使用 aria-labelledby 和 aria-describedby.

<div class="container">
   <div class="partners clearfix">
      <h2 role="My Content Heading">My Content Heading</h2>
      <div class="row" role="partner type">
      <div class="col-xs-12 col-sm-4">
         <div class="partner__list text-center">
         <div class="center">
            <i class="service"></i>
            <h2>Partner 1</h2>
            <p>Partner 1 Description</p>
            <div class="button-pos">
            <a href="link1">Learn More</a>
            </div>
          </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-4">
         <div class="partner__list text-center">
         <div class="center">
            <i class="tech"></i>
            <h2>Partner 2</h2>
            <p>Partner 2 Description</p>
            <div class="button-pos">
            <a href="link1">Learn More</a>
            </div>
          </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-4">
         <div class="partner__list text-center">
         <div class="center">
            <i class="content"></i>
            <h2 class="text-lg text-black text-ellipsis">Partner 3</h2>
            <p>Partner 3 Description</p>
            <div class="button-pos">
            <a href="link1">Learn More</a>
            </div>
          </div>
         </div>
      </div>
      </div>
   </div>
</div>

Answer 1

此代码段已经可以访问。最简单的 HTML 不需要额外的 ARIA 支持。文本转语音软件将按顺序阅读它，键盘可以 Tab 到链接并按 Enter 键单击它们。 ARIA 适用于具有交互式小部件（如选项卡或日历）的情况。

角色属性是 ARIA 规范的一部分。您无需编造值来描述您的内容，只有当它们适用于您正在制作的内容时，才应从 this list 起使用它们。

您可能还会发现这篇 introduction to web accessibility 文章和该网站上的其他资源有助于进一步了解它。

Answer 2

正如 stringy 已经指出的那样，代码已经可以访问了。如果您不使用 JavaScript 创建 UI 元素，通常不需要 WAI-ARIA 角色或属性。

我对您的代码只有两条评论：

为什么在 <a href="link1">Learn More</a> 周围使用 div 而不是 p？屏幕 reader 可以在段落之间移动，但据我所知 div 元素没有意义。
如果合作伙伴描述看起来像 table，特别是如果有常规的行或列 headers，您应该使用 table 标记而不是 CSS-styled div 个元素。常规 table 标记对屏幕有意义 reader；将 div 元素设置为看起来像 table 会导致无意义（即从浏览器或屏幕的角度来看 reader）代码混乱。

Answer 3

有两件事立即脱颖而出，可以改进：

1) 您使用的字体图标似乎具有意义，但没有 text alternative:

<i class="service"></i>

您可以提供 aria-label property。此外，如果 <1>:

，我建议使用跨度

<span class="service" aria-label="service"></span>

2) 您 link 中的文字是重复的，没有关于 link 目的地的具体信息。屏幕 reader 用户经常扫描 link 以了解页面内容和 without the surrounding content this will be less useful that it could be ("learn more", "learn more", "learn more")

<a href="link1">Learn More</a>

我建议在 linked 文本中添加特定信息，而不是通用的 "learn more":

<a href="link1">Learn More about partner 1</a>

修改了一个部分的标记：

<div class="container">
  <div class="partners clearfix">
    <h2 role="My Content Heading">My Content Heading</h2>
    <div class="row" role="partner type">
      <div class="col-xs-12 col-sm-4">
        <div class="partner__list text-center">
          <div class="center">
            <span class="service" aria-label="service"></span> 
            <h2>Partner 1</h2>
            <p>Partner 1 Description</p>
            <div class="button-pos">
              <a href="link1">Learn More about Partner 1</a> 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

html5 中的辅助功能

Accessibility in html5

html

accessibility

wai-aria