Before · intentional barriers
Three things that can get in the way
This fictional Cedar Grove Home Repair Interest Desk lets a visitor check a sample email and open sample eligibility details. Its three controls below deliberately demonstrate accessibility barriers.
Example 01
Email field and error
The placeholder disappears as you type. Try the button with an empty value or an invalid email address to see the color-only error.
Local example only. Nothing is submitted or stored.
Example 02
Eligibility details
This panel looks interactive, but the clickable div has no button semantics, keyboard support, or expanded state. It can be opened with a pointer.
In this fictional example, homeowners and renters may ask the desk for information. This is sample service text, not a real eligibility rule or application.
Example 03
Readable notice text
Ask the fictional Home Repair Interest Desk for program information.
- Text color
#969696- Background
#F2EFE7- Computed WCAG ratio
- 2.57:1
- Normal-text AA comparison
- Below 4.5:1
The ratio is calculated from these exact foreground and background colors. Text at this size needs 4.5:1 for WCAG AA contrast.
This page intentionally contains known barriers for teaching. It is not a template for production work, an audit of a real service, or a conformance claim.