Prompt it

Build a beginner-friendly accessible form error summary using complete semantic HTML and dependency-free vanilla CSS. Show an example submitted state with two invalid fields. Put a clearly headed error summary before the fields, use role="alert" for a summary that appears after submission, and make each summary link jump to the matching input. Give every field a visible label, set aria-invalid="true", and connect its concise inline error with aria-describedby. Use an email input with autocomplete, retain readable text and contrast, and do not communicate errors by color alone. Scope each custom CSS class under .cf-error-form and ensure every class selector corresponds to an element in the supplied HTML so live editor changes are visible. Fit at 320px, make links and controls keyboard accessible with obvious :focus-visible outlines, wrap actions at narrow widths, and include prefers-reduced-motion handling. Do not use JavaScript, frameworks, remote assets, or external fonts. Return complete copy-ready HTML and CSS and briefly explain how summary links and aria-describedby help people correct errors.