如何确保可访问性选项可访问

How to make sure that accessibility options are accessible

许多网页都有可以更改字体大小或增加对比度的选项。这些选项大部分时间是为视障人士设计的。

您使用什么技术来确保这些人真正找到提高可访问性的选项?

如果您提供此类小部件,则必须确保您的文档在不使用的情况下也可以访问。否则(= 使用默认设置无法访问您的文档)一些用户无法 find/reach/use 您的小部件来更改设置。

如果不使用小部件就无法访问整个文档,则至少应确保可以访问和使用这些小部件。这类似于提供 link to an alternate version.

据我所知,没有标准的方法来标记或注释此类与可访问性相关的小部件。如果它们很重要,那么将它们作为文档的首要元素之一是有意义的。

(以防万一不清楚:很少有必要提供这样的小部件,e.g., for text resizing;通常还有许多其他ways/technologies 以确保您的文档可访问。)

根据 WCAG 2.0 spec,高对比度开关本身必须是高对比度的。我只是通过在页面顶部创建简单的黑白按钮(为了达到效果而在悬停时反转)来完成此操作。我选择为按钮内容使用超棒的字体图标,因此我小心地将 role="img"aria-label="High Contrast Toggle" 包含在 <i> 中。我还小心地通过添加 tabindex

使切换键盘可访问

最好将所有文本默认设置为高对比度,但我选择切换是为了学习挑战,也是因为我不想更改页面的配色方案。规范建议的切换替代方案是使用 skrims or text-shadow。 (描述,第 3 段)。这看起来和工作得更好,但我的测试工具(WAVE Chrome 扩展 v.1.0.1)没有检测到变化,所以我决定进行切换。