使用 WCAG 3.2 处理打开新选项卡和确保 Web 可访问性的技术
Techniques for handling opening a new tab and ensuring web accessibility with WCAG 3.2
WCAG 3.2 表示内容应以可预测的格式提供 (https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior.html),随后当用户点击打开新选项卡时,用户会意识到这一点。
我有一个网页,其中包含许多 link 在新选项卡中打开的列表。 W3C 建议要么在 link 文本中对此进行指示,要么在 hover/focus 中提供指示符。但是,由于同一页面上有大量 link 需要这样做,提供这些选项会严重破坏 design/UI。是否有其他视觉侵入性较小的方法来实现这种一致性,而无需为每个 link 提供弹出窗口或文本警告?
此外,是否存在与打开新的 windows/tabs 相关的其他辅助功能问题?
这可能取决于您要实现的 level of conformance。大多数公司(和大多数国家/地区的法律)都要求符合 AA。事实上,指南说 AAA 一致性应该不是必需的。
Note 2: It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.
但是,这并不意味着您不应该考虑 某些 AAA 要求。例如,具有大于 4.5:1 (1.4.6 Contrast (Enhanced)) or making sure your link text makes sense by itself rather than relying on the context around it (2.4.9 Link Purpose (Link Only)) 的色彩对比度都是对 AA 一致性的重大改进。
关于 link 在新 windows 中的开放,属于 3.2.5 Change on Request,符合 AAA 标准。因此,根据您要达到的一致性级别,您可能不必遵守它。
如果您的网站中只有少量 link 分散在新的 window 中打开,最好有一个显示 link 的视觉指示器将在新 window 中打开,并将相同的信息传达给屏幕阅读器。 (参见 H83: Using the target attribute to open a new window on user request and indicating this in link text (HTML) as an example. You could also use an icon instead of text, but make sure the icon has the alt
attribute or that you provide context to a screen reader via aria-label
, aria-labelledby
, or visually hidden text)。
但是如果你这样做,然后你有一个页面,其中大部分 link 都转到新的 window,该页面可能看起来因所有额外信息而变得杂乱无章。这是你必须要小心的地方。如果您决定对那个页面发表一般性评论,说所有 link 都在一个新的 window 中打开,这样您就不需要每个 link 旁边都有一个图标,那么你会失败 WCAG 3.2.4 Consistent Identification,这是 AA 要求。也就是说,您会在 link 旁边有一些带有 "new window" 图标的页面,而另一个没有它的页面。
所以您需要决定如果您想要指示link是否在新的window(AAA 要求)中打开。如前所述,实施一些 AAA 要求是一件好事。保持一致。
WCAG 3.2 表示内容应以可预测的格式提供 (https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior.html),随后当用户点击打开新选项卡时,用户会意识到这一点。
我有一个网页,其中包含许多 link 在新选项卡中打开的列表。 W3C 建议要么在 link 文本中对此进行指示,要么在 hover/focus 中提供指示符。但是,由于同一页面上有大量 link 需要这样做,提供这些选项会严重破坏 design/UI。是否有其他视觉侵入性较小的方法来实现这种一致性,而无需为每个 link 提供弹出窗口或文本警告?
此外,是否存在与打开新的 windows/tabs 相关的其他辅助功能问题?
这可能取决于您要实现的 level of conformance。大多数公司(和大多数国家/地区的法律)都要求符合 AA。事实上,指南说 AAA 一致性应该不是必需的。
Note 2: It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.
但是,这并不意味着您不应该考虑 某些 AAA 要求。例如,具有大于 4.5:1 (1.4.6 Contrast (Enhanced)) or making sure your link text makes sense by itself rather than relying on the context around it (2.4.9 Link Purpose (Link Only)) 的色彩对比度都是对 AA 一致性的重大改进。
关于 link 在新 windows 中的开放,属于 3.2.5 Change on Request,符合 AAA 标准。因此,根据您要达到的一致性级别,您可能不必遵守它。
如果您的网站中只有少量 link 分散在新的 window 中打开,最好有一个显示 link 的视觉指示器将在新 window 中打开,并将相同的信息传达给屏幕阅读器。 (参见 H83: Using the target attribute to open a new window on user request and indicating this in link text (HTML) as an example. You could also use an icon instead of text, but make sure the icon has the alt
attribute or that you provide context to a screen reader via aria-label
, aria-labelledby
, or visually hidden text)。
但是如果你这样做,然后你有一个页面,其中大部分 link 都转到新的 window,该页面可能看起来因所有额外信息而变得杂乱无章。这是你必须要小心的地方。如果您决定对那个页面发表一般性评论,说所有 link 都在一个新的 window 中打开,这样您就不需要每个 link 旁边都有一个图标,那么你会失败 WCAG 3.2.4 Consistent Identification,这是 AA 要求。也就是说,您会在 link 旁边有一些带有 "new window" 图标的页面,而另一个没有它的页面。
所以您需要决定如果您想要指示link是否在新的window(AAA 要求)中打开。如前所述,实施一些 AAA 要求是一件好事。保持一致。