Fix heading hierarchy for accessibility#19824
Open
muratclk wants to merge 1 commit into
Open
Conversation
Fix heading structure to follow proper HTML semantic hierarchy: - Change Navigation from h3 to h2 as a main section heading - Change h6 subsection headings to h4 under h3 parent headings - Update CSS to preserve existing visual appearance Co-Authored-By: Paperclip <noreply@paperclip.ing>
miketheman
added
accessibility
Member
|
Thanks - this looks generally okay, but can you please provide a few before/after screenshots as well? |
miketheman
added
the
awaiting-response
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #18162 — corrects the heading structure on the package detail page to follow proper HTML semantic hierarchy, improving accessibility for screen readers and assistive technologies.
Changes
detail.html): Changed from<h3>to<h2>— as a top-level section under the<h1>project name, it should be<h2>project-data.html): Changed all<h6>to<h4>— these headings (Project links, Owner, GitHub/GitLab Statistics, Maintainers, Meta, Classifiers) sit under<h3>(Verified/Unverified details) and were incorrectly skipping heading levels 4 and 5_verified.scss): Updated the selector fromh6toh4and explicitly setfont-size: 1remto preserve the existing visual appearanceBefore
After
Visual Impact
The
.sidebar-section__titleclass already controls the Navigation heading's font size (1.1rem), so theh3→h2change has no visual effect. For theh6→h4change,font-size: 1remis explicitly set in the updated CSS rule to match the previoush6base style, preventing any visual regression.Testing