Web Staff Client - Main sections of every screen need to be labeled for accessibility

Adding a link to a related bug at https://bugs.launchpad.net/evergreen/+bug/1474874, which also suggests adding HTML headers. I've been hoping to work on that one for a while, and still hope to do so, but haven't had the tuits yet. I'm going to remove myself from assignee field for now in case somebody else wants to take a look at it before I can get to it.

While adding improved headings, a 'Skip to Main Content' link for screen readers would also be useful on most screens:

http://bootstrapdocs.com/v3.0.3/docs/getting-started/#accessibility

The HTML5 schematic elements and aria roles might also prove helpful in making the page structure clearer to browsers and screen readers: https://webaim.org/blog/future-web-accessibility-html5-semantic-tags/

In fact, a combination of approaches, even with some redundancy is probably helpful. On the WebAIM home page (https://webaim.org/), for example, there exist:
* <h1>, <h2>, and <h3> elements
* A "skip to main content" link that appears when you press <Tab>
* <header>, <nav>, <main>, and <footer> elements
* "banner", "search", "main", and "contentinfo" aria roles

Related to Terran's comment (#2), here is a list of "stylish" skip links: https://bugs.launchpad.net/evergreen/+bug/1615707

This was also brought up in the web client accessibility audit this year. From the audit's comments: "There are, virtually, no headings within the site. Without headings, or skip to main content links, attempting to navigate through the page could be tiresome for screen reader and keyboard-only users." And the WCAG section on point: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#bypass-blocks

FYI, in the patch I submitted for https://bugs.launchpad.net/evergreen/+bug/1839372 I added an "sronly" class that allows elements to be added that are readable by screenreaders, but are not visible on screen.

argh, I just realized there's already an "sr-only" class.

I will be working on all the things mentioned here individually. This is a patch to address the skip nav link: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1615707-staff-skipnav

I forgot to add a link here to the separate bug and patch for H1 headings:
https://bugs.launchpad.net/evergreen/+bug/1994711

Separate bug for the org unit combobox, since it appears just about everywhere: https://bugs.launchpad.net/evergreen/+bug/1999158

And (somewhat belatedly) here's a branch for the ARIA landmarks:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1615707-aria-landmarks

I've also updated and simplified the Skip Nav link branch:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1615707-staff-skipnav

Thanks, Stephanie! I looked at the landmarks branch, and the redundant use of <aside>/role="complementary", <nav>/role="navigation", and <main>/role="main" caught my eye.

It looks like my comment #3 is no longer considered a best practice. The Aria in HTML guidance (https://www.w3.org/TR/html-aria/#avoid-specifying-redundant-roles) now says "Avoid specifying redundant roles".

Could you remove role="complementary", role="navigation", and role="main" from your branch?

Thanks, Jane! I'm going to postpone fixing these and the other HTML structure patches until we've finished working on Bootstrap 5 (bug #2000482) to avoid further complicating the merge conflicts on that.

Updated (redundant roles removed) and rebased.

Pushed to rel_3_10 and above. Thanks, Stephanie!