Accessibility issues

[zcorpan]

Hi!

I tried using macOS VoiceOver to navigate https://learngitbranching.js.org/ and noticed some accessibility issues:

• [ ] The "Select a level" dialog is always present as seen by the screen reader (I guess it's positioned off-screen, should be display: none or so when not visible)
• [x] Level links are not links.

  • 1030

• [ ] Next/previous buttons are not buttons (not focusable and no text, so impossible to reach with VoiceOver).
  • partially fixed by #961
• [x] The textarea doesn't have a label.

  • 962

• [ ] Content outside modal dialog boxes are not inert and so can be reached with screen readers. <dialog>.showModal() could help (or maybe the inert attribute).
• [ ] No landmarks (e.g. helperBarMount could be a <nav>).
• [ ] The visual representation as SVG is navigable with VoiceOver and it can access the text, but it's probably still not understandable for blind users. This one might be tricky to solve, though!
• [ ] After typing a command (e.g. git status), the resulting text that appears in the terminal should be read (it can be a live region, e.g. <output>). Compare with how VoiceOver works in the macOS Terminal app.
• [ ] After typing a command, if the graph changes (e.g. git commit), the change should be announced (with a live region, or maybe as additional text in the terminal output).

For people with low vision or color vision deficiency:

• [ ] Some text have poor color contrast, e.g. after solving a level, the "Confirm" and "Cancel" buttons.
• [ ] Some text is small, e.g. "You can hide this window with "hide goal"".

[pcottle]

Thanks for writing this up 😇 I think this application would need a lot of accessibility work beyond even what you mentioned -- we should probably generate alt text for the tree visualization in a way that is concise but understandable as well.

It's a pretty large amount of scope but I'm supportive of folks putting up PR's for this!

[ulyssear]

Some PRs have been created with some points solved (i guess) :

Content outside modal dialog boxes are not inert and so can be reached with screen readers.

.showModal() could help (or maybe the inert attribute).

Done with #1022

After typing a command (e.g. git status), the resulting text that appears in the terminal should be read (it can be a live region, e.g.

). Compare with how VoiceOver works in the macOS Terminal app.

After typing a command, if the graph changes (e.g. git commit), the change should be announced (with a live region, or maybe as additional text in the terminal output).

Done with #1023. I haven't tried VoiceOver (or equivalent) yet.

[waldyrious]

Done with #1023.

For reference, this was reverted e11d691480 in following the report in #1026. The approach may need to be refined.

[ulyssear]

Done with #1023.

For reference, this was reverted e11d691 in following the report in #1026. The approach may need to be refined.

Since the issue has been solved, do we put the \<output> elements back or use the aria attributes instead?

[pcottle]

I think aria labels would be a lot safer in terms of browser support

[ulyssear]

Level links are not links.

Done with #1030

[m1rm]

Is anyone working on improvements "for people with low vision or color vision deficiency"? If not, I would like to take care of that :)

[pcottle]

I'm actually colorblind myself! I'm only the most common colorblind (red/green) so I haven't had any major issues using the application. Color isn't terribly important in our case, it's mostly just a visual aid to show which branches correspond to which commits.

I think the other accessibility issues above are more important / pressing.

[m1rm]

Alright! I then would love to have a go on one of them! How about the " Level links are not links." I would like to try keeping it small since it is my first real contribution to an open source project.

Oh I missed it was fixed already with https://github.com/pcottle/learnGitBranching/pull/1030. I will take a look into sth else then :)

Update: I am quite busy atm. I am still taking a look from time to time but do not want to block work on this. If I manage to come up with sth. you will see the pull request