使用WCAG 3.2处理新标签页并确保Web可访问性的技术

时间:2019-02-08 03:48:01

标签: html css wcag

WCAG 3.2指示应以可预测的格式(https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior.html)提供内容,并且随后在单击以使用户意识到这一点时打开新的新选项卡。

我有一个网页,其中包含在新标签页中打开的许多链接的列表。 W3C建议在链接文本中指出这一点,或者在悬停/焦点上提供一个指示器。但是,由于在同一页面上需要大量链接,因此提供这些选项将严重破坏设计/ UI。在没有为每个链接提供弹出窗口或文本警告的情况下,还有其他不那么视觉干扰的方法来实现此一致性吗?

此外,还有其他与打开新窗口/标签有关的可访问性问题吗?

1 个答案:

答案 0 :(得分:3)

这可能取决于您要实现的level of conformance。大多数公司(以及大多数国家/地区的法律)都要求AA认证。实际上,指南说,不需要要求AAA符合性。

  

注释2:不建议将AAA级一致性作为整个站点的通用策略,因为对于某些内容不可能满足所有AAA级成功标准。

但是,这并不意味着您不应该考虑AAA要求中的一些。例如,颜色对比度大于4.5:1(1.4.6 Contrast (Enhanced))或确保链接文本本身就有意义,而不是依赖于周围的上下文(2.4.9 Link Purpose (Link Only))都是AA之上的重大改进一致性。

关于在新窗口中打开的链接,该链接属于3.2.5 Change on Request,属于AAA标准。因此,根据您要达到的一致性级别,您可能不必遵循该一致性。

如果只有少数几个分散在整个网站中的链接在新窗口中打开,那么最好有一个视觉指示器来显示该链接将在新窗口中打开,并将相同的信息传达给屏幕读者。 (例如,请参见H83: Using the target attribute to open a new window on user request and indicating this in link text (HTML)。您也可以使用图标代替文本,但请确保该图标具有alt属性,或者确保您通过aria-label向屏幕阅读器提供上下文, aria-labelledbyvisually hidden text)。

但是,如果执行此操作,然后您有了一个页面,其中大多数链接都转到一个新窗口,则该页面可能看起来杂乱无章,没有所有其他信息。这是您必须要小心的地方。如果您决定在该页面上发表一般性评论,说所有链接都在新窗口中打开,这样您就不需要每个链接旁边的图标,那么您将失败WCAG 3.2.4 Consistent Identification,即AA要求。也就是说,您在链接旁边会有一些带有“新窗口”图标的页面,而没有链接的页面则是其他页面。

因此,您需要确定是否是否要指示链接是否在新窗口中打开(AAA要求)。如前所述,实现一些AAA要求是一件好事。保持一致。