Email field and error
The before view relies on a placeholder and a red border. The after view adds a persistent label, visible help, a linked text error, focus on the error summary, and a polite result announcement.
Accessibility patterns · local demonstration
Small fixes make a service easier to use.
Compare three common interface barriers with focused improvements on a fictional town housing-program inquiry page.
Three comparisons
What changes in the after version
Eligibility details
The before view uses a clickable div that cannot be reached or opened with a keyboard. The after view uses a button whose expanded state and controlled content stay in sync.
Readable notice text
The same cream background shows a low-contrast gray before and a dark ink after. Each page displays the exact colors and a locally computed WCAG contrast ratio.
Local files
Read or download the source
These standalone pages use local HTML, CSS, and JavaScript. No third-party script or font is loaded.
These focused examples explain implementation patterns. They are not an audit of a real site and make no accessibility conformance claim.