Splash page needs headings

Bug #1839372 reported by Tiffany Little
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Undecided
Unassigned
3.3
Undecided
Unassigned
3.4
Undecided
Unassigned
3.5
Undecided
Unassigned

Bug Description

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

Meg Stroup (mstroup)
Changed in evergreen:
status: New → Confirmed
Revision history for this message
Terran McCanna (tmccanna) wrote :
tags: added: pullrequest
Revision history for this message
Jane Sandberg (sandbej) wrote :

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.

Revision history for this message
Terran McCanna (tmccanna) wrote :

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

Revision history for this message
Ruth Frasur (rfrasur) wrote :

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

Revision history for this message
Terran McCanna (tmccanna) wrote :

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 :)

Revision history for this message
Chris Sharp (chrissharp123) wrote :

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

Changed in evergreen:
status: Confirmed → Fix Committed
milestone: none → 3.5-alpha
milestone: 3.5-alpha → 3.4.3
milestone: 3.4.3 → none
Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers