heading level skipped in the blog tempate

Created on 6 January 2025, 3 months ago

Problem/Motivation

Headings and subheadings create a navigable table of contents for assistive devices. The numbers indicate indents in a nesting relationship:

Heading level 1
Heading level 2: a topic
Heading level 3: a subtopic
Heading level 2: a new topic
This heading skipped from level 1 to level 3. From a screen reader, this sounds like content is missing.

To fix: adjust levels to form an accurate outline, without gaps.

The Tags section of the blog is currently using an h3, but there is no h2 prior to it.

Steps to reproduce

Login and enable the blog and the accessibility tools recipes

ddev launch $(ddev drush uli)
ddev drush recipe ../recipes/drupal_cms_blog
ddev drush recipe ../recipes/drupal_cms_accessibility_tools

As a logged in user visit: /blog/2024-08/building-blog-using-drupal

View the editorial11y report for the page. It highlights that the Tags heading is a h3 instead of an h2.

Proposed resolution

Either add a h2 to categorise the different content or replace the h3 with a h2 tag.

This has been tagged as a Blog track issue, but it may be a theme layer issue.

πŸ› Bug report
Status

Active

Component

Track: Blog

Created by

πŸ‡¬πŸ‡§United Kingdom the_g_bomb

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @the_g_bomb
  • πŸ‡¦πŸ‡ΊAustralia pameeela

    @the_g_bomb do you think Tags should have a heading at all? Doesn't seem like it to me. But I also thought that the heading hierarchy was not so much of a concern anymore.

  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Whether to use a heading to label the tags section is debatable. If it is considered content and part of the content section, then that can be one argument. If it is separate from the content, then the section should be labelled in some way; a heading would make the most sense.

    I do know that labelling sections is still important as is the heading hierarchy to define document structure.

  • πŸ‡¦πŸ‡ΊAustralia pameeela

    I was going to fix this, but it's set in Olivero: https://git.drupalcode.org/project/drupal/-/blob/11.x/core/themes/oliver...

    So I don't think we should override this, I think it would be better to fix it in core.

  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb
  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Updated the Steps to replicate to include Core intructions.

  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb
  • Pipeline finished with Failed
    3 months ago
    Total: 526s
    #395093
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Solution doesn't appear to match suggestions. Seems this was added part of Oliveros POC https://git.drupalcode.org/project/olivero/-/commit/4e21276137f151bfdd02... way back when.

    That said not sure p tag is correct. Would vote for div, span, or a different header.

  • Pipeline finished with Success
    3 months ago
    Total: 530s
    #396167
  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    I changed it to an h2, which works for the node page in terms of hierarchy but it doesn't work for the home page where the node__title is an h2.
    I have changed it to be span.

  • Pipeline finished with Success
    3 months ago
    Total: 793s
    #396194
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Wonder if it actually should be Div. That’s what the comment field label seems to do at least

  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Div it is

  • πŸ‡¦πŸ‡ΊAustralia pameeela

    Based on the discussion in #3333401-30: Pager h4 causes accessibility flag on many pages β†’ it should be a heading. That comment also suggests it doesn't matter that much whether the headings increase by one.

    But I guess h2 would work in all cases pretty much. I'm a bit confused though because the last comment says it's changed to a span but the MR has a div.

  • Pipeline finished with Failed
    3 months ago
    Total: 529s
    #396272
  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Thanks for the link to the comment. I see where you are coming from and agree that on a personal level, skipping the heading may not have that great an impact.

    Unfortunately automated checkers are looking for it and so we are shipping Drupal CMS with something that will be flagged as an error on all blog posts.

    On the homepage, H2 won't work across the board as users using headings navigate will get all the tags marked as the same importance as the headings rather than as a child of the article. Those tags without the context of which article it refers to, will be meaningless.

    The other option would be to add a if page check to the template and use h3 on lists like the homepage, and h2 on the article itself.

  • πŸ‡¦πŸ‡ΊAustralia pameeela

    Unfortunately automated checkers are looking for it and so we are shipping Drupal CMS with something that will be flagged as an error on all blog posts.

    I'd certainly prefer to address this properly rather than just make the error go away by whatever means we can. So I still think changing it to an h2 is a better option and seems optimal as a change in core.

    The fact that the Drupal CMS home page doesn't have an h1 seems like something to address separately, so I'll create an issue for that.

  • πŸ‡¦πŸ‡ΊAustralia pameeela
  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Keeping the h3 on the homepage and listing pages would keep the tags hierarchically associated with the related h2 title, and so would be semantically better.

  • Pipeline finished with Failed
    3 months ago
    Total: 526s
    #400288
  • πŸ‡¦πŸ‡ΊAustralia pameeela

    I don't follow. The home page would then go from h1 (once we re-add the title) to h3, isn't that the whole problem? Same for the listing pages, if we stick with h3 then it skips h2 on those pages.

  • πŸ‡¦πŸ‡ΊAustralia pameeela

    @the_g_bomb this issue is for core only, we should handle any Drupal CMS exceptions separately.

    Is this an improvement for core itself to make? I assume so, since it's using the same template. But if not, then we can close this and open CMS-only issues.

  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Home in core has /node as the default homepage content, so h1 would be returned, which is fine.
    h2 will (among others) be all the node titles and the tags should be h3 associated with the article node title. Technically everything is fine as it is for listing pages.

    The problems currently appear on the article node pages. The node title is h1, and then the tags jump to h3.

  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Homepage

    h1 page title
      - h2 node title
        - h3 tags
    - h2 node title
        - h3 tags
    - h2 node title
        - h3 tags
    
    Article
    h1 node title
      - h3 tags
    
  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Actually, this could be fixed easily in Drupal CMS as there are no tags on the homepage. So an override in the drupal_cms_olivero would sort that one out, but I do think this needs to be fixed in core for articles. Unfortunately the page variable isn't available in the tags field template, so my current solution doesn't work.

  • Pipeline finished with Success
    3 months ago
    Total: 959s
    #400390
  • πŸ‡¦πŸ‡ΊAustralia pameeela

    OK, I understand the confusion now :) You are talking about the tags in the node teaser. But that's not the problem. Drupal CMS does not output the tags in the card view mode. The tags field that is getting flagged is the one on the full page display.

    Here is a summary of the current state:

    1. In core, the markup works for the teaser view mode (which has an h2 for the title)
    2. In Drupal CMS, the markup for the card view mode does not contain tags so is not an issue (we don't use teaser anywhere by default)
    3. In core AND Drupal CMS, the current markup does not work for the full view mode, which jumps from h1 to h3 for the article page

    Does this clarify things? The fix would require us to handle the tags field differently for the teaser and full view modes.

  • πŸ‡¬πŸ‡§United Kingdom the_g_bomb

    Sorry for confusion, that is correct.

  • πŸ‡¦πŸ‡ΊAustralia pameeela
  • Pipeline finished with Failed
    3 months ago
    Total: 846s
    #401671
  • Pipeline finished with Failed
    3 months ago
    Total: 547s
    #401741
Production build 0.71.5 2024