Accessibility: Faulty Headings Hierarchy

[ckaz]

Hello there!

Before I open a Pull Request on any of this, I wanted to get some general opinions on the following issue:

There are several h1 headings missing across the bootstrap5 theme in VuFind. Since this theme might be used as the starting point for many, the missing headings might end up causing accessibility issues in catalogs across the world unless fixed. (See also https://www.accessibilitychecker.org/wcag-guides/ensure-that-the-page-or-at-least-one-of-its-frames-contains-a-level-one-heading/)

Most of the affected pages begin with a h2 heading, including

• the Home page,
• Browse home,
• Channels home
• most if not all Account pages,
• Search history,
• New items,
• Reserves and probably more.

Other pages have heading hierarchies which could be improved upon, such as two h1 headings on the Search Results page or an unexpected h4 in the Record View (not preceded by a h3, e.g. https://vufind.org/advanced_demo/Record/100341).

Now, my question is: How shall we go about this?

Should h1 headings be generated automatically similar to the page titles being generated for pages such as the home page (h1 with Library catalog name?), the Browse and Channels etc.?
If yes, should we extend this concept to pages with fixed h1 headings such as Advanced search?

Or should we settle for fixed headings where possible and meaningful?

A potential issue with a PR on this would be that I'm far from familiar with all the pages VuFind catalogs can have in their different configurations. So does anyone have any idea on how to get all potential pages covered?

Here are a few examples: (I've been using the Headingsmap extension for checking: https://www.accessibility-developer-guide.com/setup/helper-tools/browser-extensions/headingsmap/ )

Home Page

Account Pages

Advanced Search (has a h1 but sections such as Limit to are note marked as headings)

Search results (two h1 headings, of which one is hidden in the header the other one hidden above the result list)

Looking forward to your ideas,
My best, Claas

[demiankatz]

Thanks for getting the ball rolling on this, Claas! A few questions and comments:

1.) What version are you testing against? I'm not seeing the double h1 problem you describe on Search, for example, so I'm wondering if perhaps some of the issues you describe have been fixed in newer code.

2.) Some work was done in #4408 to standardize the way page titles are generated (and to differentiate between lightbox and non-lightbox behavior in a more consistent way). I suspect that more work is needed, both to apply the page-title component everywhere that it might be useful, and to ensure that h1 headings are generated where needed -- but I wonder if reviewing and building upon this work might be a good place to start.

3.) Generally speaking, if you want to get a sense of all possible pages in VuFind, a good place to start would be browsing through the template folders in the bootstrap5 theme. Most of the folders whose names are all-lowercase correspond with controllers, and then the templates in those folders correspond with specific actions. There are some "partial" templates mixed in that you would have to ignore, but doing a survey of these files is probably the fastest way to get a sense of the scope of the problem.

Is that any help?

[ckaz]

Cheers. Will open a PR on dev so I'll accommodate all recent changes.