棋盘上可访问的方块有 5 种不同的视觉状态

Question

我想制作一个易于使用的棋盘。正方形 (

div

) 可以有 5 种不同的视觉状态：

• 未选择且未着色
• 已选择
• 有 3 种不同的颜色（例如绿色、红色和蓝色）

颜色对于视障人士来说是一个问题，我想找到一种解决方案，让他们也可以使用此功能。

下面的屏幕截图是 lichess.org 上的示例。选择国王前面有棋子的正方形，在棋盘中央有 3 种方法可以为正方形着色。

通过按 空格键 或 enter，您可以选择/取消选择一个正方形。通过按 ctrl+空格键/enter，您可以循环显示不同的颜色（包括无颜色）。

选择/未选择可以使用

aria-selected

状态进行处理。但我怎样才能表明一个正方形可以用 3 种不同的方式着色呢？

role="button"

似乎不正确，因为没有与之相关的立即操作。这取决于是否按下

ctrl

。

也许

role="spinbutton"

？但

aria-valuenow

应该是小数，而键盘交互不适合。

所以我有点不知所措。我怎样才能拥有这些状态并保持可访问性？

我目前倾向于一组视觉上隐藏的单选按钮，每个按钮都指示当前颜色。

---

HTML 示例：

• 用户选择了上面有棋子的

  a1

  方块
• 用户已将

  b1

  方块涂成红色
• 用户已将

  c1

  正方形涂成绿色
• 用户已将

  d1

  正方形涂成蓝色
• 使用键盘导航，用户将焦点放在

  e1

  方块

<div role="grid" aria-colcount="8" aria-rowcount="8" aria-activedescendant="e1">
  <div id="a1" tabindex="0" role="gridcell" aria-label="a1" aria-selected="true" aria-keyshortcuts="Control+Space Space">
    <!-- aria-selected="true" indicates that the piece on that square has been selected -->
  </div>

  <div id="b1" tabindex="0" role="gridcell" aria-label="b1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <!-- How to tell the user that this square is colored red, and ctrl+space will set it to green? -->
  </div>

  <div id="c1" tabindex="0" role="gridcell" aria-label="c1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <!-- How to tell the user that this square is colored green, and ctrl+space will set it to blue? -->
  </div>

  <div id="d1" tabindex="0" role="gridcell" aria-label="d1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <!-- How to tell the user that this square is colored blue, and ctrl+space will remove the color? -->
  </div>

  <div id="e1" tabindex="0" role="gridcell" aria-label="d1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <!-- This square has the focus, as indicated by activedescendant="e1" -->
  </div>
</div>

Answer 1

问题

这三种颜色有何意义？红绿蓝之间有什么意义吗？或者这些只是用户标记？

多状态的东西

也就是说，根据您的屏幕截图，您还有其他问题。

首先，让我们通过准确的色盲模拟器来看看该板：

左上为标准视力，右上为红色盲。使用 Myndex CVD sim

进行处理

如您所见，您的绿色与深色方形颜色非常接近，几乎无法区分。您是否想要选择与板有足够大的亮度差异的标记颜色，以便那些对颜色不敏感的人仍然可以感知它们。

使用对比度计算器，将背景颜色设置为正方形颜色，然后为图形找到至少为 Lc ±30（或对于较薄的图形更大）的颜色。

颜色区分

如果re、gree、blue有特定的含义，即红色表示不好的着法，蓝色表示弱的着法，绿色是最好的着法，那么你需要添加一个额外的标识符来传达该信息。

例如，不要用圆点来表示所有三种颜色，而是使用八边形表示红色、三角形表示蓝色、星形表示绿色。这为那些对色调差异不敏感的人提供了附加信息。

空间注释

此外，我们可以使用较低的空间分辨率更好地检测色调差异。但对于薄元素的色调和饱和度差异，我们遇到了困难。

例如，那些环，如果它们以信息方式使用颜色，那么它们至少有 6 像素宽就更好了。