[VUFIND-1726] Fix top heading to h1 on advanced search

[maccabeelevine]

This has a definite visual impact.

[maccabeelevine]

I was going to add some (s)css to reduce the font size (at various widths), but then thought that actually it should look a lot bigger than the actual subheadings below. IMHO if we don't want actual top level headings to be this big, we should adjust the h1 globally. Of course there are many pages where the h1 is part of a breadcrumb and so should stay the size it is; but I mean on pages like this where it's a traditional top heading.

[sturkel89]

I agree that it's kind of huge. It looks pretty good on mobile, though!

---

I notice that the headings on the page are:

• Advanced Search (H1)
• Search Tips (H2)
• Search Options, Find More, Need Help? (H2)

But the following, which have the same styling as those H2s, are "Legend" and not headings:

• Limit To:
• Illustrated:
• Year of Publication:

Is that intentional/okay in terms of accessibility?

[demiankatz]

I wonder if part of the problem with the h1 here is not just its size but also the very significant top margin above it. Can/should we do something to reduce that? I wonder if that's a change we should consider globally or if we need to do more careful analysis in different contexts.

[crhallberg]

I personally like the way the h1 looks and it doesn't appear to be an issue on mobile so I'd leave the margin. I would need to do more research or testing to determine h2 or legend. My guess is that it wouldn't be an accessibility issue once users are interacting with the form.

[demiankatz]

I think my main objection to the top margin is that "Advanced Search" is very visibly out of alignment with "Search Tips" in the sidebar. This doesn't bother me very much, but it does catch my eye a little bit. If nobody else cares, I'm happy to merge this as-is, though.

[sturkel89]

I don't mind the space above the H1, partly because it is so visibly a different kind of element.

Is there a quick way to identify all the H1s across VuFind? I don't see a lot of them when I just poke around the Villanova implementation. There isn't one on https://library.villanova.edu/Find/Search/Home or on the "Search Tips" pop-out from that page. (However, the "Help with Advanced Search" and "Help with Search Operators" popouts that are linked from our Advanced Search page both have H1s.)

[demiankatz]

Is there a quick way to identify all the H1s across VuFind? I don't see a lot of them when I just poke around the Villanova implementation. There isn't one on https://library.villanova.edu/Find/Search/Home or on the "Search Tips" pop-out from that page. (However, the "Help with Advanced Search" and "Help with Search Operators" popouts that are linked from our Advanced Search page both have H1s.)

The best way might be to search the themes directory for </h1> since every h1 should have a close tag, no matter how its open tag is structured. I did a quick and lazy search on GitHub and agree that there don't seem to be all that many. Most are in help pages, content pages, and other peripheral places. Some have an sr-only class which makes them invisible to the eye. I can't remember if there's any logic anywhere that tries to apply a default h1 if one is not explicitly provided, but it doesn't look that way.

[demiankatz]

In any case, for now, I think the best thing to do is merge this. Nobody is saying we shouldn't, and as @maccabeelevine points out, if we want to change the way h1 looks, that's probably a global thing that is separate from the very simple accessibility change applied here. Thanks, all!