Non visual board UI

[veloce]

A non visual board

To allow blind people to move pieces on a chessboard.

This feature is not that easy to do right. That's why we should start simple and improve later. If you know the subject, or are interested by it I'd be glad to get help. Come and join on discord to discuss it!

Implementation notes

Ideally, this should be done by a widget which should replace automatically GameBoardLayout if navigation by screen reader is detected in the current context.

final mediaQueryData = MediaQuery.of(context);
...   
 if (mediaQueryData.accessibleNavigation) {
      return NonVisualBoard(...);
    } else {
      return GameBoardLayout(...);
    }

Here's lichess.org implementation as a reference:

• https://github.com/lichess-org/lila/blob/master/ui/round/src/plugins/nvui.ts
• https://github.com/lichess-org/lila/blob/master/ui/nvui/src/chess.ts

Tentative plan for non-visual board:

Mimic a 2d physical board. Dragging over squares reads out the coordinate and any piece on the square. Releasing the finger over a square selects it. This is intended to match how dragging selects elements normally (https://blog.gskinner.com/archives/2022/09/flutter-crafting-a-great-experience-for-screen-readers.html). Once a square is selected, drag again to select a second square. As you drag, the app will read out what that move would be, eg rook a2, rook a3, rook takes a4, rook a5. Once the second square is selected, the move is made or reported as invalid.

Normally a one finger swipe can go to the previous or next element. Ideally we should not block that behavior with the drag behavior. Also will need a way to cancel the initial selection. Probably dragging out of the board or dragging to the original piece could read "cancel selection". And maybe tapping on the board should cancel too.

[370417]

I'm interested! Will say more on discord.

[370417]

Tentative plan for non-visual board: Mimic a 2d physical board. Dragging over squares reads out the coordinate and any piece on the square. Releasing the finger over a square selects it. This is intended to match how dragging selects elements normally (https://blog.gskinner.com/archives/2022/09/flutter-crafting-a-great-experience-for-screen-readers.html). Once a square is selected, drag again to select a second square. As you drag, the app will read out what that move would be, eg rook a2, rook a3, rook takes a4, rook a5. Once the second square is selected, the move is made or reported as invalid.

Normally a one finger swipe can go to the previous or next element. Ideally we should not block that behavior with the drag behavior. Also will need a way to cancel the initial selection. Probably dragging out of the board or dragging to the original piece could read "cancel selection". And maybe tapping on the board should cancel too.

[veloce]

I updated the description and issue title to focus first on a non visual board implementation (previously it was also considering the game aspect). Once it is done we can move to non-visual game and puzzle UI.

[rahulbhai9]

I want to get involve into this. I cannot come on Discoed because of Captcha. I am a visually impaired person. I daily use Screen reader. I play on Lichess as well. I know some Flutter so I think my inputs will be of some use to you. How else can I discuss this ishue?

[veloce]

Do you want to develop the feature, or share some knowledge? If you want do discuss on GitHub, you can open a discussion in this project's discussion tab.