Improve Mobile Blind Mode Accessibility: Full-Screen Board Navigation Needed

[ikrami1]

Exact URL of where the bug happened

https://lichess.org/

Steps to reproduce the bug

1. Open Lichess on a mobile browser (iOS Safari or Android Chrome)
2. Enable blind mode
3. Start a new game or analyze position
4. Navigate to the chess board area
5. Try to explore squares by moving finger across the board
6. Attempt to read all squares in a rank (e.g., from a8 to h8)

What did you expect to happen?

Expected Behavior

• The entire 8x8 chess board should be visible on screen at once
• Users should be able to explore all squares by moving their fingers across the board
• Screen readers should announce square names as fingers move across them
• Continuous exploration of ranks, files, and diagonals should be possible without scrolling

Proposed Solution

1. Add a "Full Screen Board" button that when pressed:

   • Expands the chess board to fill the entire screen
   • Ensures all 64 squares are visible and accessible
   • Maintains essential information like clocks and last move
   • Similar to how physical chess boards allow continuous tactile exploration

2. Add a "Collapse Board" button to:

   • Return to normal game view
   • Show move history and other game information

What happened instead?

• Only a portion of the chess board is visible at once
• Have to scroll horizontally to see squares on the right side of the board
• When exploring a rank (e.g., 8th rank), only squares a8-d8 are visible initially
• Must scroll right to access remaining squares (e8-h8)
• Constant scrolling makes it impractical to maintain board awareness
• Cannot efficiently explore the board as one would with a physical chess set

Operating system

iOS latest

Browser and version (or alternate access method)

safari

Additional information

• This feature would primarily benefit blind and visually impaired players using mobile devices
• Current blind mode works well on desktop browsers with arrow key navigation
• Mobile implementation should maintain similar accessibility standards as desktop version

Environment

• Platforms: iOS (Safari), Android (Chrome)
• Input Method: Touch with Screen Reader

Impact

This enhancement would make Lichess more accessible to blind players on mobile devices, allowing them to play chess on-the-go just like sighted players.

[yafred]

When I used a small display, I can see all the buttons emulating the board.
So, I assume that using a small display forces to zoom in to make the buttons bigger, which in turn make them disappear outside the viewport.
Can you confirm ?

[ikrami1]

Thank you for looking into this. Let me clarify the issue I'm experiencing: I'm using an iPhone 15 Pro (6.1-inch screen) with Safari. The problem isn't about button size or zooming - it's about the board's viewport visibility. Here's specifically what happens: 1. When I start exploring the board with my finger on a8: - I can touch and hear squares a8 through e8 - Squares f8, g8, and h8 are outside the visible area - To reach those squares, I must scroll right - When I scroll right to reach f8, earlier squares (like a8) disappear from view � 2. This creates a continuous problem where: - Only a portion of the board is visible at any time - I have to constantly scroll left and right to explore all squares - This makes it impossible to maintain proper board orientation - Cannot smoothly explore ranks, files, or diagonals as one would on a physical board My friend using a Samsung phone with Chrome reports the same behavior. I haven't tested on larger screens like iPads, but the core request is to have all 64 squares visible and touchable simultaneously, regardless of screen size. This is why I suggested having a "full-screen board" mode where the board expands to fill the entire screen, ensuring all squares are accessible without scrolling. This would make the mobile experience much more usable for blind players. I appreciate your commitment to accessibility and am happy to provide any additional clarification needed.

[yafred]

Thanks,
I see the problem now (my screen was just a bit too wide)

Your suggestion of a full screen mode can bring a better user experience: non blind users have a zen mode where the display is uncluttered to better concentrate on the essential: the board and the clock.

However, I think that the issue you raise must be fixed on the existing page first. And that can be very simple.

My take on it is that the rule should be: all the buttons (board squares) should be visible whatever the size of the display and whatever the information we want to convey about the square.

Another way to say it: the size of the buttons must be governed by the size of the screen (1/8) and not by what's written on them.

Do you agree ?

[ikrami1]

Yes, I completely agree with your approach! Making the square sizes adapt to the screen width (1/8) would solve the core accessibility issue. This would ensure that: 1. All squares remain visible regardless of screen size 2. No horizontal scrolling would be needed to explore the board 3. Blind players could maintain better board orientation This solution makes perfect sense as a first step. Once this core fix is in place, we could potentially explore the full-screen mode later as an additional enhancement, similar to how zen mode works for sighted players. Would you like me to test any specific implementations or provide feedback once changes are made? I'm happy to help ensure the solution works well for screen reader users on different devices. Thank you for your thoughtful approach to solving this accessibility challenge!

[yafred]

I have installed nvda

I'll see if I can test my approach with it

I'll back to you if I am stuck

[ikrami1]

Are you testing how the squares resize with different screen sizes using NVDA? Just to make sure I understand the proposed fix: would this make each square automatically size to 1/8 of the screen width, ensuring all squares remain visible without scrolling needed? I'm curious how this might work on both desktop and mobile. While the interaction methods are different (keyboard navigation on desktop vs. touch exploration on mobile), having all squares visible and properly sized would indeed help both scenarios. Happy to help test any changes on mobile devices with VoiceOver/TalkBack when you're ready!

[yafred]

I fixed it for vertical display

I guess you are not using a touch screen for horizontal display ...

Another thing: do you know https://lichess.dev where the site is deployed before going to https://lichess.org ? you'll be able to try there when the fix is accepted ... I'll keep you posted

[ikrami1]

you are a star. thank you very much. I'll have to see how it works vertically vs. horizontally when the fix is deployed to give you proper feedback, but it is not a big deal if we will need to turn our phones to the landscape view instead of portrait when we want to play. Thanks again and again.