Improve Screen Reader Accessibility

[nicopn]

I'm a blind Strudel user who uses a screen reader to navigate, and though accessibility is pretty good in my opinion, it can still be improved in some ways

• The list of items in the navigation landmark (welcome, patterns, sounds, console, etc) is clickable text at the time of writing. a more appropriate roll would be a tab inside a tab control. Ensuring correct rolls means screen reader users can quickly navigate by kind of element just by pressing a single key.
  • same idea applies to the "samples", "drum machines", "synths" and "user" buttons in the "sounds" screen, and the "community" and "user" buttons on the "patterns screen
• In interactive code fields in the docs pages, the play/stop and update buttons are unlabled. These, respectively, should have an aria-label of "play" or "stop" (depending on state), and "update".
• The controls in the settings screen should be labled. This ensures that they can be heard without context and it can still be understood what the controls are about. To give an example, the combo box to change the audio output device has no lable, however there is text next to it which labels it just fine. Moving the label to the combo box itself will ensure that it is spoken when navigating by combo box.
• At the beginning of the console, there is ascii art which, from what I can tell, serves no purpose other than decoration. This should be hidden for screen reader users to slightly declutter the interface.

[yaxu]

Thanks @nicopn ! Glad to hear it's working to some extent.

Looking at the audio output device combo box and friends, I can see it does actually have a label, but it's not associated with the form element - they're just side-by-side in the html. I don't know why this is, as in the jsx code the audio device selector is inside a formitem with the label. Anyone know what's going wrong?

        <FormItem label="Audio Output Device">
          <AudioDeviceSelector
            isDisabled={started}
            audioDeviceName={audioDeviceName}
            onChange={(audioDeviceName) => settingsMap.setKey('audioDeviceName', audioDeviceName)}
          />
        </FormItem>