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

有两件事情可以立即脱颖而出：

1）您正在使用看起来似乎没有text alternative含义的字体图标：

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

您可以使用aria-label property提供此功能。另外，如果<1>：

，我建议使用跨度

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

2）链接中的文字是重复的，没有关于链接目的地的具体信息。屏幕阅读器用户经常扫描链接以了解页面内容和without the surrounding content this will be less useful that it could be（“了解更多”，“了解更多”，“了解更多”）

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

我建议在链接文本中添加特定信息，而不是通用“了解更多”：

<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>

Answer 2

此代码段已可访问。大多数纯HTML不需要额外的ARIA支持。文字转语音软件将按顺序读取它，键盘可以选择Tab键链接并按Enter键点击它们。 ARIA适用于包含标签或日历等交互式小部件的情况。

角色属性是ARIA规范的一部分。您无需为了描述内容而设置值，只有在this list适用于您正在制作的内容时才能使用它们。

您可能还会发现这篇introduction to web accessibility文章以及该网站上的其他资源对了解更多信息非常有用。

Answer 3

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

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

为什么在div而不是<a href="link1">Learn More</a>周围使用p？屏幕阅读器可以在段落之间移动，但据我所知，div元素毫无意义。
如果合作伙伴描述看起来像一个表格，特别是如果有常规的行或列标题，则应使用表格标记而不是CSS样式的div元素。常规表格标记对屏幕阅读器有意义;样式div元素看起来像一个表导致无意义（即从浏览器或屏幕阅读器的角度来看）代码混乱。

html5中的辅助功能

3 个答案: