a11y: Website improvements with voiceover and Safari

[itsmedavep]

We have received feedback about Surge and launching the help file.

That issue is here:

surge-synthesizer/surge#6810

Since we are now discussing expectations for behaviors of the website and VoiceOver interactions using Safari I thought I should move the website part of the discussion over here.

Im very curious to learn about the expectations and see if there are any improvements we can make the website to better support this community.

[itsmedavep]

When give the website a look over I stumbled across what I believe is an issue when using VO and the web rotor.

Since disabilities are a gradation we should be cognizant of that and work to ensure that things will work for all as best we can. For context, blindness is a gradation and typically classified as 4 types. From legal to complete and everything in between.

Even if what you hear out of VO and what VO does when interacting with it are correct, if what you see in VO isn't that is still something that should be looked into and fixed.

Steps to repro:
Using VO and Safari.
Im opening the manual page and launching VO with cmd+f5
Then hitting VO-U
left arrow over to the headings.
(sorry left arrow over to headings in Rotor)
What Im finding is that a heading entry is listed as something but what VO says out loud is not aligning to what I see.

What I mean by that is that the first entry in the Rotor headings list is
4: Rotation
What VO reads out loud is "Heading Level 1 Surge XT User Manual"

Pressing enter will take you to the appropriate topic for what VO has announced. The visual in Rotor's list is showing something that does not line up with what you hear VO announce the entry as. That seems wrong.

[itsmedavep]

Same things seems to exist in the links part of the web rotor. What is visually displayed is not the same as what VO announces.

Im not sure if this will address what I am seeing but investigating a bit I found a blog post about creating more accessible headers.

## Foo
Becomes
<h2 id="foo"><a class="header-anchor" href="#foo">Foo</a>

the anchor is optional

Approach from here:
https://github.com/valeriangalliat/markdown-it-anchor#permalinks

from this article:
https://www.codejam.info/2021/06/you-re-probably-doing-anchor-links-wrong.html#another-take-on-accessible-permalinks

[itsmedavep]

So in my attempts to troubleshoot this what I have found is that if I reduce the count of headings and links by deleting the majority of the manual then VO announces what is seen on the page correctly and in rotor it begins to list things correctly for links and headings.

So, thats not much help but it seems that once the page gets to a certain level of complexity VO stops labeling things in Rotor's lists (ctrl+opt+u with VO running) appropriately. Meaning that the label in the list is not what is being announced.

That is very misleading if you are sighted/partially sighted and using the visual to click on a list entry.

[mthierman]

ED made a comment about splitting the manual into seperate pages, which should help.

I've struggled to fix any accessibility issues due to bugs with Windows Narrator but happpy for feedback and anything we can improve.