Use semantic HTML for landmarks, navigation, and headings#16
Use semantic HTML for landmarks, navigation, and headings#16simonmorley wants to merge 1 commit intomainfrom
Conversation
Replace generic divs with proper semantic elements site-wide: - Layout: header, main, footer for ARIA landmark regions - TabBar: nav for primary navigation - Page headings: h2 instead of div (with fontWeight: 400) - ValidatorProfile: h2 for section headings
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the semantic structure and accessibility of the application by replacing generic div elements with appropriate HTML5 tags such as header, main, footer, nav, h2, and p. Key changes include updating the layout components, navigation bars, and section headings across several pages. Feedback focuses on refining the heading hierarchy in the ValidatorProfile component, suggesting the use of h3 tags for sub-sections like 'Reliability', 'event history', and 'infrastructure' to ensure a correct document outline relative to the main validator heading.
| return ( | ||
| <div style={{ marginBottom: 24, paddingBottom: 24, borderBottom: '1px solid var(--color-border)' }}> | ||
| <div style={sectionHeadingStyle}>Reliability</div> | ||
| <h2 style={sectionHeadingStyle}>Reliability</h2> |
There was a problem hiding this comment.
Since the validator name is defined as an <h2> (on line 467), sub-sections like "Reliability" should use <h3> to maintain a proper heading hierarchy. This helps screen reader users understand the document structure more effectively.
| <h2 style={sectionHeadingStyle}>Reliability</h2> | |
| <h3 style={sectionHeadingStyle}>Reliability</h3> |
| <h2 style={sectionHeadingStyle}> | ||
| event history | ||
| </div> | ||
| </h2> |
There was a problem hiding this comment.
To maintain a consistent and correct heading hierarchy, this sub-section should use an <h3> tag, as it is logically nested under the validator's name (<h2>).
| <h2 style={sectionHeadingStyle}> | |
| event history | |
| </div> | |
| </h2> | |
| <h3 style={sectionHeadingStyle}> | |
| event history | |
| </h3> |
| <h2 style={sectionHeadingStyle}> | ||
| infrastructure | ||
| </div> | ||
| </h2> |
There was a problem hiding this comment.
This section should be an <h3> to correctly reflect its position in the document outline relative to the main validator heading.
| <h2 style={sectionHeadingStyle}> | |
| infrastructure | |
| </div> | |
| </h2> | |
| <h3 style={sectionHeadingStyle}> | |
| infrastructure | |
| </h3> |
1 participant
Summary
<header>,<main>,<footer>for ARIA landmark regions — screen readers can now navigate between page sections<nav>for primary tab navigation (desktop + mobile)<h2>+<p>instead of<div><h2>via sharedsectionHeadingStyleAll changes are zero visual impact —
fontWeight: 400added to<h2>elements to prevent browser bold default.Test plan