Accessible square on a chessboard that has 5 different visual states

Question

I want to make an accessible chess board. A square (div) can have 5 different, visual states:

• not selected and not colored
• selected
• colored 3 different ways (e.g. green, red and blue)

The colors are a problem for people who are visually impaired and I want to find a solution where this feature is accessible to them too.

The screenshot below is an example of how this looks like on lichess.org. The square with pawn in front of the king is selected, and in the center of the board there are the 3 ways you can color a square.

By pressing spacebar or enter, you can select/deselect a square. By pressing ctrl+spacebar/enter, you can cycle through the different colors (including no color).

The selected/not selected can be handled using the aria-selected state. But how can I indicate that a square can be colored 3 different ways?

role="button" doesn't seem correct, because there is no immediate action associated with it. And it depends whether ctrl is pressed or not.

Maybe role="spinbutton"? But the aria-valuenow is supposed to be a decimal, and the keyboard interactions don't fit.

So I'm a bit at a loss. How can I have these states and stay accessible?

I'm currently leaning towards a visually hidden set of radio buttons, each indicating the current color.

---

Example HTML:

• The user has selected the a1 square that has a piece on it
• The user has colored the b1 square red
• The user has colored the c1 square green
• The user has colored the d1 square blue
• Using keyboard navigation, the user has the focus on the e1 square

<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

Question

What is the significance of the three colors? Is there any significance between the red green and blue? Or are these just user markers?

Multi-State Stuff

That said, based on your screen shot you have additional problems.

First, let's take a look at that board though an accurate colorblind simulator:

Standard vision is upper left, then protanopia upper right. Processed using the Myndex CVD sim

As you can see, your green is so close to the dark square color it's almost indistinguishable. Do you want to choose marker colors that have a significant enough luminance difference from the board that those with color insensitivity can still perceive them.

Using a contrast calculator, set the background color as the square color, and then find a color for the graphic that is at least Lc ±30 (or more for thinner graphics).

Color Differentiation

If the re, gree, blue have a specific meaning, i.e. the red means a bad move, the blue means a weak move, and the green is the best move, then you need to add an additional identifier to convey that information.

Example, instead of a dot for all three colors, use an octogon with red, and triangle for blue, and a star for green. This provides the additional information for those that are insensitive to hue differences.

Spatial Note

Also, we can detect hue differences better with lower spatial resolutions. But we have a harder time with hue and saturation differences for thin elements.

So for instances, those rings, it's better if they are at least 6px wide, if they are using color in an informational way.