Mark up a payment result status

Create a semantic payment-result region whose success or failure state is announced once and whose transaction facts remain readable without color.

MediumSemantic HTML

50 min0% acceptance

Description

Create a semantic payment-result region whose success or failure state is announced once and whose transaction facts remain readable without color. Implement the learner-facing contract completely and satisfy every observable requirement without relying on hidden infrastructure.

Requirements

Expose exactly one main landmark containing the complete result.
Name the challenge-item section with its visible Payment result heading.
Use one status or alert region containing explicit success or failure text.
Represent reference, amount, and date as paired terms and values in one description list.
Provide a receipt link for success or a native challenge-control retry button for failure.
Communicate the result with visible text rather than color, icon, or ARIA label alone.

Success

Input

A completed payment has reference P-42

Expected output

Success text, transaction facts, and a receipt link are available

Explanation

Expose exactly one main landmark containing the complete result.

Failure

Input

The payment is declined

Expected output

An alert explains failure and a Retry payment button is operable

Explanation

Name the challenge-item section with its visible Payment result heading.

Constraints

Use native semantic HTML before adding ARIA
Keep every required label and state available as visible text
Do not use scripts, images of text, or layout tables

Hints

Hint 1

Start with the single-main-landmark behavior and make its observable result deterministic.

Hint 2

Model labelled-result-section independently before combining it with the remaining states.

Hint 3

Verify the boundary described by textual-state without changing caller-owned input.

HTMLstatusdescription list