Invalid Heading Orders - Githubissues

bbertucc commented 1 month ago

Description:

There is an issue with the heading order on several web pages. Correct heading order is crucial for accessibility as it helps users with screen readers to understand the structure and content hierarchy of the webpage. This issue needs to be resolved to enhance accessibility.

Current Code:

A detailed report of the affected nodes can be found in the CSV file: invalid_heading_orders.csv

Example Fix

One of the nodes with invalid heading order is on https://wordpress.org/about/privacy/data-erasure-request/

<h5>Important!</h5> appears beneath <h1>Data Erasure Request</h1>.

A possible fix would be to change it to: <h2>Important!</h2> or <strong>Important!</strong>.

This fix aligns the heading with the correct hierarchy and improves accessibility.

Steps to Reproduce:

Visit the URLs in the CSV
Open the browser's web inspector (right-click on the page and select "Inspect").
Navigate to the "Lighthouse" tab within the inspector.
Run an accessibility audit.
Check the audit report for heading order issues.

Acceptance Criteria:

All heading elements should follow a logical order (e.g., h1, h2, h3, etc.).
No skipped heading levels.
The changes should be tested using the Lighthouse tool to ensure compliance.
The solution should be applied to all instances listed in the CSV.

How critical is this fix?

Fixing this issue is critical as it affects the accessibility and usability of the web pages for users relying on assistive technologies. Fixing all headings will solve 9 issues on WordPress Dotorg.

Reviewed by

This ticket was automatically generated by Equalify and reviewed by the human, @bbertucc.

ryelle commented 1 month ago

There are only 4 headings flagged, though each heading generates two errors. Also, 2 of the headings are on the unused enterprise subpages. So, there are really only two issues, both on pages from the old theme.

https://wordpress.org/40-percent-of-web/

The issue here is that the page jumps from h1 to h3 for the timeline, but really this whole page needs a heading audit. We could probably not use headings on the timeline, and only have headings for the text sections. Additionally, the big "40%" at the end of the timeline should not be an h2. Removing those headings should fix the hierarchy.

https://wordpress.org/about/privacy/data-erasure-request/

The "Important" text here is an h5, it appears to be just for styling. It could be updated to a strong.