WCAG 2.1 - 高对比度切换按钮

WCAG 2.1 - high contrast toggle button

我正在为客户维护网站。该网站有一个高对比度切换开关,可以设置适当的对比度以满足 WCAG 2.0 AA。但是,如果用户不切换该按钮,该站点就不会通过 WCAG 2.0 AA(这是目标)。用户切换按钮后,它似乎符合 WCAG 2.0。

之前的网站开发者说,只要用户能够切换到高对比度就可以了。

问题:

[1] 具有高对比度切换(左上角的小图标)是否使网站符合 WCAG 2.0 AA 标准?或者在让用户点击特殊按钮之前,默认站点是否需要合规?

[2] 是否有公认的 icon/location 提供视觉提示以将网站切换到高对比度模式?

简短回答,是的,高对比度切换按钮足以通过 WCAG,但并不是最好的用户体验。如“G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

中所述,这样做也有一些注意事项
  1. The link or control on the original page must itself meet the contrast requirement of the desired SC. (If the user cannot see the control they may not be able to use it to go to the new page.)
  2. The new page must contain all the same information and functionality as the original page.
  3. The new page must conform to all of the SC for the desired level of conformance. (i.e., the new page cannot just have the desired level of contrast but otherwise not conform).

最好让您的主页满足最低对比度要求 (WCAG 1.4.3),而不是创建符合 WCAG 的单独页面和可能的单独用户体验。如果你走这条路,希望你只是在主页上应用一个不同的 CSS,这样你就不必担心维护一个单独的高对比度页面。

我相信来自 WCAG 的资源可以回答您的大部分问题:https://www.w3.org/TR/WCAG20-TECHS/G174.html

简而言之:是的,具有所述功能的按钮足以满足 AA 合规性,if:

  1. 在这种高对比度模式下,所有其他 AA 成功标准也得到满足(我们不想在高对比度模式下破坏某些辅助功能)
  2. 按钮本身必须具有高对比度并且在进入网站时可见
  3. 启用高对比度模式时,页面上必须仍然存在所有现有内容和功能

您还应该为按钮添加一个标签,说明它的作用。如果没有别的,那么作为一个工具提示,也可以用键盘调用。 (使用 title 属性创建工具提示是不够的。)这是因为不是每个人都能从一个简单的图标中理解它的用途。