Splash page needs headings

[Tiffany Little]

From the 2019 accessibility audit: There are virtually no headings on the Home (splash) page of the site. Headings can help improve the navigability of the site for screen reader and keyboard only users. This is especially true when the site contains navigation elements that are placed before the main content.

See: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=246%2C131#bypass-blocks

See also: https://wiki.evergreen-ils.org/doku.php?id=accessibility:webclient_audit

[Terran McCanna (tmccanna)]

My patch for review at:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1839372_splash_page_needs_headers

[Jane Sandberg (sandbergja)]

Nice work, Terran! Could you please also add the headings to the Angular splash page here: https://git.evergreen-
ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1839372_splash_page_needs_headers ?

I'm also wondering if having 3 <h1>s is the way to go on the splash page. Some folks recommend having only one <h1> in a page, although there is lots of debate about the topic: https://webaim.org/discussion/mail_thread?thread=3905

Maybe there could be a different <h1> (like <h1 class="sr-only">Evergreen</h1>), and those other headings could get demoted to <h2>s? I don't think this is essential, though.

[Terran McCanna (tmccanna)]

Thanks for the feedback, Jane!

I've pushed an updated version -what do you think? (And did I do the Angular eg2 version correctly?)

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1839372_splash_page_needs_headers

[Ruth Frasur Davis (redavis)]

H1 and H2 are not showing in the source for either the regular staff splash page or the angular staff splash page.

[Terran McCanna (tmccanna)]

It looks like if you do "View Source" the browser only shows you the source for the top navigation bar - presumably because the splash page is being loaded with javascript. However, if you right-click on an element and click Inspect (in Chrome) or Inspect Element (in Firefox), it will show you the relevant HTML. The H1 tag is around the Evergreen logo and the H2 tags are around each column header. FWIW, I'm seeing it on the test server, but since I did the fix, I can't sign off :)

[Chris Sharp (chrissharp123)]

Works for me. Pushed to rel_3_3, rel_3_4, and master.