jupyter-widgets / ipywidgets

Interactive Widgets for the Jupyter Notebook
https://ipywidgets.readthedocs.io
BSD 3-Clause "New" or "Revised" License
3.17k stars 949 forks source link

Ipywidgets grid of buttons is not navigatable by screenreader comfortably. #3954

Open denizsincar29 opened 1 month ago

denizsincar29 commented 1 month ago

Intro

Hello. I'm a blind user and I use screenreader on my PC. I was trying to make a game field in colab, but ended up with a item by item navigation.

Description

The grid in ipywidgets is not so good at accessibility with screenreaders for blind. I mean you can access each element of a grid, with tab key, but you can't navigate vertically and horizontally with arrow keys using screenreader.

Reproduce

  1. Create a colab notebook and paste this code:
    import ipywidgets as widgets
    list64 = [f"{chr(col)}{row}" for col in range(ord('a'), ord('h') + 1) for row in range(1, 9)]
    items = [widgets.Button(label = str(i)) for i in list64]
    widgets.GridBox(items, layout=widgets.Layout(grid_template_columns="repeat(8, 100px)"))
  2. Turn on NVDA screenreader and run the cell.
  3. Focus the grid with tab key, press insert+spacebar, and press arrow keys.

Congratulations, you get no movement with arrow keys.

Expected behavior

Screenreader announces all fields when moving on the field, and arrow keys move inside. Also, would be great to add accessibility hints for each button. E.g. the grid is shown as white or black disks, but screenreader says: "a5 empty", "a6 black", "b2 white"

Context

I use google colab.