projectblacklight
Accessibility: Headings for widgets should not necessarily be H3
Issue Description - WCAG standard
WCAG heading markup rules require that headings, including main page titles and section titles, are marked up using semantic HTML heading elements (h1-h6). These headings must be presented in a logical order, reflecting the content's hierarchy.
Any Spotlight widget that has the ability to create a heading does so as a H3. There are many use cases where this works just fine, because there is an H2 heading on the page (that makes sense for the content) above the H3. However, there are just as many cases where there is appropriately NO H2 heading on the page, and so the jump to H3 is incorrect for accessibility reasons.
Method of discovery
Stanford Office of Digital Accessibility review of Exhibits, Stanford's Spotlight instance.
Steps to Reproduce
On any Spotlight home, feature, or about page, create some content, including a widget that contains a heading. Then you can see the H3 in the markup.
Suggested solution
Ideally there will be a solution that doesn't require massive "by hand" remediation of already published exhibits.
For what it's worth, I'll add comments from a similar ticket that we have in Harvard's backlog. Note that this was written in November 2022, so not sure if everything is still applicable, but might at least highlight files to look into.
Spotlight is not generating the appropriate heading level. The exhibit name in the header is correctly rendered as an H1, the page title is also an H1 and should be an H2, headings within the page are H2s and should be H3s, and headings within a widget's text are H3s and should be H4s.
The true fix is submitting an update to spotlight core.
Below are the files where heading structures may need to be updated. Once they are contributed to core, we can remove our local css heading overrides.
Keeping track of h1’s and h2’s // h1's to h2's // spotlight/dashboards/show.html.erb // spotlight/pages/show.html.erb // spotlight/browse/show.html.erb // spotlight/browse/index.html.erb *added in an h2
// h2's to h3's // _page_activity.html.erb // _reindexing_activity.html.erb // _solr_document_activity.html.erb // _heading_block.html.erb
// _site_sidebar.html.erb changed from h4 to h2
// .blacklight-catalog-show
// h3's to h4's (haven't tested these out, but probably the spots that need updating based on a search&find of h3 in the spotlight repo) // _oembed_block.html.erb // _solr_documents_block.html.erb // _solr_documents_embed_block.html.erb // _solr_documents_grid_block.html.erb
