Use ARIA mark-up in the web app to make it accessible

[parhamdoustdar]

Right now, org headers are not marked up as headers (e.g. h1, h2, etc). There is also no use of properties such as aria-expanded to convey the state of a header. I also tried editing a header, but if clicking/tapping on it does anything, it isn't reported by a screen reader. Steps to reproduce:

1. Turn on a screen reader (VoiceOver on iOS/MacOS, NVDA on Windows) and visit Organice
2. Navigate between elements (arrow keys with NVDA, Option+ctrl+left/right on Mac, swiping left/right with a finger on iOS).
3. Note that headers and their state, and options that pop up don't conform to WCAG 2.X

I use Emacs and Emacspeak on MacOS, and would love to share projects with my wife as well who is on Windows. I'd love for her to be able to use Organice with her screen reader.

[parhamdoustdar]

Sorry if this issue is too big, vague, or confusing. I haven't interacted with the team before, so this is my attempt at starting the conversation. I'd love to provide screen recordings, jump on a call, give examples, etc.

[schoettl]

Hey @parhamdoustdar, good ideas! It should be standard on websites (at least to use headers appropriately) but in dynamic web apps, accessibility is probably often neglected in favor of functionality.

Have you worked on JS/React projects already? I think it wouldn't be hard to improve the UI in this regard. I'm happy to review a PR.