Problem/Motivation

Headings and subheadings define the structural outline of a page and are critical for accessibility and navigation by assistive technologies.

Accessibility issue in the Varbase Blog section page

When heading levels are skipped - for example, jumping directly from a Heading Level 1 (H1) to a Heading Level 3 (H3) - screen readers interpret this as missing or incomplete content. This creates confusion for users who rely on structured navigation to understand page hierarchy.

Example of the issue:

Heading level 1 (Title of the page: Blog)
Heading level 3 (Subtopic, e.g., “Varbase Blog” title for the Featured card - medium display mode)

Expected outline:

Heading level 1
Heading level 2: a topic
Heading level 3: a subtopic
Heading level 2: a new topic

Steps to reproduce

  • Inspect a page (or component) that renders headings with inconsistent nesting (e.g., H1 : H3).
  • Use a screen reader or accessibility audit tool such as axe DevTools or Lighthouse.
  • Observe the warning:
  • “Manual check: was a heading level skipped?”
  • The accessibility tool reports that the heading hierarchy is broken.

Proposed resolution

As the title of the Blog listing block view is not rendered, as the title of the page is Blog
Add <h2 class="visually-hidden">Blog Listing</h2> to the header of the view for the Blog site section

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release varbase-10.1.0-beta1, varbase_blog-10.1.0-beta1

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • [#3552334] fix(a11y): Corrected missing H2 heading in Blog listing view to correct heading hierarchy
CommentFileSizeAuthor
Blog-a11y-10-15-2025_02_21_PM.png616.56 KBrajab natshah

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed 9864a694 on 10.1.x
    [#3552334] fix(a11y): Correct missing H2 heading in Blog listing view to...
rajab natshah’s picture

Assigned: rajab natshah » s.halawani
Issue summary: View changes
Status: Active » Needs review
Issue tags: +varbase-10.1.0-beta1, +varbase_blog-10.1.0-beta1
rajab natshah’s picture

Assigned: s.halawani » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.