search

microbit-foundation / python-editor-v3

Micro:bit Educational Foundation Python Editor V3
https://python.microbit.org
MIT License
57 stars 36 forks source link

Review tab order for accessibility #977

Open kmcnaught opened 2 years ago

kmcnaught commented 2 years ago

Let's review this together on a call, but I'll highlight some issues

kmcnaught commented 2 years ago

Overall, when all the sidebars are open, the tab order is fairly sensible, but I think there are some improvements to be made. Some areas for discussion...

Navigation from a closed docs sidebar

If you're loading to a small size, the left hand docs sidebar is closed, and the Ref/Ideas/API/Project are skipped from the tab order. This means you can't tab into these areas without expanding the sidebar first - and the screen reader description doesn't signpost what the contents are. image

If instead you collapse the sidebar manually, then you get a much nicer tab order, which I think would be reasonable to copy.
image

Navigation to editor from an open docs sidebar

If the left hand sidebar is open (reference pane open by default), it takes >40 tabs to get to the editor, as you are taken via all the topic buttons. If you are using a screen reader and know all the shortcuts, you can shortcircuit by navigating by region, but it would be preferable to have a more streamlined / nested navigation order, as well as skip-links (see #978)

image

Navigation from revisited webpage

See discussion in 973 - Reading around this, NVDA by design remembers where the user's last position when returning to a previously visited web page. This isn't working quite as expected with the Python Editor. Originally posted by @microbit-robert in https://github.com/microbit-foundation/python-editor-v3/issues/973#issuecomment-1253422274

To review further, once we've got to the bottom of 973

Related issues

973, #978

microbit-robert commented 2 years ago

982 has fixed the "Navigation from a closed docs sidebar" part of this issue. When using the beta deployment (inside an iFrame), NVDA is causing the focus to switch to different areas of the Editor - this does not occur when running the project locally (not in an iFrame).