1. Description
The current implementation of the Error Summary component uses a JavaScript function to manually scroll the viewport to a focused input. While intended to assist navigation, this script forces a "top-align" position that is less intelligent than modern browser defaults.
In a native environment, browsers handle fragment jumps and focus shifts gracefully, keeping the logical context (the label) in view. This script overrides that behavior, slamming the input to the absolute top of the viewport. On pages with fixed headers, this causes the label to be entirely obscured, leaving sighted users without context.
3. Steps to Reproduce
Navigate to the W3C Form Errors example.
Click an error link in the summary (e.g., "Full name").
Observation: The page scrolls so aggressively that the "Full name" label is hidden under the top of the viewport/sticky header.
Compare this to tabbing to the same field: the browser natively keeps the label visible.
4. Technical Analysis
The Culprit: A manual JavaScript scroll call (likely scrollIntoView() or window.scrollTo()) that does not account for the height of the preceding .
The Conflict: This script creates a collision between the focused element and the site's layout, which would not occur if the browser were allowed to handle the jump natively.
5. Audit Finding (for your records)
Severity: Major (Usability)
WCAG 2.2 Status: Technical Pass (the component is not entirely hidden), but a Functional Failure of SC 3.3.2 (Labels or Instructions). The label is no longer "presented" in a way that is useful at the moment of interaction.
6. Recommended Action
Remove the JavaScript-driven scroll logic.
The most robust "best practice" is to trust the browser's native handling of fragment IDs and focus. Native behavior is context-aware and avoids the "clipping" issues created by manual scroll overrides. No additional "hacks" like scroll-margin or scroll-padding are required if the script is simply deleted.
You are a source for accessibility. This should be remedied as it is a really bad UX and an outdated hack.
1. Description
The current implementation of the Error Summary component uses a JavaScript function to manually scroll the viewport to a focused input. While intended to assist navigation, this script forces a "top-align" position that is less intelligent than modern browser defaults.
In a native environment, browsers handle fragment jumps and focus shifts gracefully, keeping the logical context (the label) in view. This script overrides that behavior, slamming the input to the absolute top of the viewport. On pages with fixed headers, this causes the label to be entirely obscured, leaving sighted users without context.
3. Steps to Reproduce
Navigate to the W3C Form Errors example.
Click an error link in the summary (e.g., "Full name").
Observation: The page scrolls so aggressively that the "Full name" label is hidden under the top of the viewport/sticky header.
Compare this to tabbing to the same field: the browser natively keeps the label visible.
4. Technical Analysis
The Culprit: A manual JavaScript scroll call (likely scrollIntoView() or window.scrollTo()) that does not account for the height of the preceding .
The Conflict: This script creates a collision between the focused element and the site's layout, which would not occur if the browser were allowed to handle the jump natively.
5. Audit Finding (for your records)
Severity: Major (Usability)
WCAG 2.2 Status: Technical Pass (the component is not entirely hidden), but a Functional Failure of SC 3.3.2 (Labels or Instructions). The label is no longer "presented" in a way that is useful at the moment of interaction.
6. Recommended Action
Remove the JavaScript-driven scroll logic.
The most robust "best practice" is to trust the browser's native handling of fragment IDs and focus. Native behavior is context-aware and avoids the "clipping" issues created by manual scroll overrides. No additional "hacks" like scroll-margin or scroll-padding are required if the script is simply deleted.
You are a source for accessibility. This should be remedied as it is a really bad UX and an outdated hack.