How accessibility is being handled?

[rahulbhai9]

First of all huge thanks to lichess team for giving everyone an equal opportunity by making its platform accessible for all. I would like to know that how the chess board is implemented. I mean can a screen reader user make moves by clicking on source and target squares? I think there is keyboard support. Which is great. But still sum of my friends are not using the platform because they are uncomfortable with typing their moves. And to just let you know your efforts are highly appreciated. Many visually impaired friends exclusively use the platform to train their chess including me. So your work is definitely having an impact. And my flutter skills are not great else I would contribute myself! Thanks.

[veloce]

There is no way to play using a screen reader yet. But this is on the roadmap. No ETA yet because I'm not sure how to handle this.

[rahulbhai9]

I think we are using our own package for implementing chess board. So it should not be two difficult to incorporate these requirement. Even though I am not an expert on this matter I will try to give some steps. I think we can use semantic visit provided by flutter. And we can use onTab event with a gesture detector to detect click. So here is how I would implement the chess board. Each square should be wrapped inside a semantic widgit. That widgit should be given a lable with all the information regarding to the square (a1 wite rook) thanks.

[rahulbhai9]

Hello,
I am reaching out to provide a couple of suggestions regarding making the Lichess mobile app accessible. I am unable to use Discord because of the CAPTCHA. I would like to know how we are implementing the board. Specifically, are we using a custom painting method to draw the board, or are we using the standard box widget of Flutter?
I went through the code but was unable to understand it fully. Here are some suggestions to make the app accessible with a screen reader:

1. Make each square focusable with the screen reader.
2. Label each square with its name and piece, e.g., "black king on e8."
3. Allow moves to be made by simply clicking on the source and target squares.
4. Ensure that opponents' moves are announced by the screen reader and that the clock time is readable with the screen reader.
   As I cannot run Flutter on my laptop, I am limited to providing suggestions. Otherwise, I would make the changes myself and present a working prototype. Apologies for that.
   Thank you.

[rahulbhai9]

And yes, whi I am not talking about keyboard support? Many blind people ar uncomfetable with typing moves. allso, they can not show there games to other people while they are playing as people can not se the vissual bord. Thanks.

[veloce]

Board background is using an image or custom painting. Pieces are aligned using a Stack widget. But that is irrelevant for an accessible board, since we'd provide a different board implementation in that case.

There is a PR for this: #31. But it's stalled for a long time now, I don't believe the author will resume work on it. When my other priorities will allow it, I may work on this myself unless a contributor steps in first.

This is how the PR author wanted to implement the 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.

Does it match your expectation?

As I cannot run Flutter on my laptop, I am limited to providing suggestions. Otherwise, I would make the changes myself and present a working prototype. Apologies for that.
Thank you.

What does prevent you from running flutter on your laptop?

[rahulbhai9]

I think we expect a very simple interface. We need an 8 by 8 table. In that table, each cell should have a label such as e1, white King; d7, black pawn; e6, no piece. Each cell should be tappable and focusable. For example, if I want to play a move like "Pawn to e4," I would first tap the e2 square. As soon as I tap it, the square will be selected. Then I would tap on the e4 square, and the pawn would be moved to e4. Please note that I am not saying to use table widget. I think, we can use gridbuilder for this. Additionally, I cannot run Flutter on my laptop because it is not powerful enough. It does not have the resources to run Flutter and Android Studio.

…

On Thu, Nov 14, 2024 at 3:41 PM Vincent Velociter ***@***.***> wrote: Board background is using an image or custom painting. Pieces are aligned using a Stack widget. But that is irrelevant for an accessible board, since we'd provide a different board implementation in that case. There is a PR for this: #31 <#31>. But it's stalled for a long time now, I don't believe the author will resume work on it. When my other priorities will allow it, I may work on this myself unless a contributor steps in first. This is how the PR author wanted to implement the 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. Does it match your expectation? As I cannot run Flutter on my laptop, I am limited to providing suggestions. Otherwise, I would make the changes myself and present a working prototype. Apologies for that. Thank you. What does prevent you from running flutter on your laptop? — Reply to this email directly, view it on GitHub <#382 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AS6PYTQJDZUAMKJZKFYHQZ32ARZNDAVCNFSM6AAAAABRT4HNZ2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMRVGI2DCMQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>