Go to AntUIKit homepage

Result

The whole page after an operation ends: a status drawing, a title, an explanation and what to do next.

Preview in FigmaLLMs

Accessibility

What Result does for you, and what it leaves to the page around it.

What it renders

Every part of a Result is a plain <div>, with no role, heading or live region. Its meaning is whatever its words say.
  • The root accepts only aria-* and data-* attributes. An id, role or tabIndex passed as a prop is dropped without a warning.
  • The four status icons are hidden from screen readers, so the status has to be in the title.
  • The 403, 404 and 500 illustrations carry their own SVG title (“Unauthorized”, “No Found”, “Server Error”) and can be announced under it. Write a title of your own so it is not the only thing said.

Heading and focus

title looks like a heading and is not one. A Result that fills a whole route has no heading unless you pass one.
  • Pass the element: title={<h1>Payment received</h1>}. The title styles still apply.
  • Inside a page that already has an h1, use the next level down.
  • When a Result replaces a view in place, like a form turning into a success message, nothing moves focus. Move it yourself to the heading you passed, which can take tabIndex={-1} and a ref.
  • The root cannot take focus, because tabIndex is dropped. Its ref gives you nativeElement to scroll it into view.

Color is not the signal

A success and an error differ only in the icon's shape and color, and the icon is hidden from screen readers. A reader who cannot see it, or cannot tell green from red, gets the outcome from the words.
  • Say the outcome in the title. “We could not save your changes” works when read alone. “Changes” over a red circle does not.
  • status colors the icon and nothing else, so it cannot make a neutral sentence read as a failure.
  • If your icon carries meaning the text cannot, give it an aria-label, which gives the Icon role="img".

Naming the actions

A screen reader user may reach the extra row one button at a time, so each label has to work on its own.
  • Give the verb its object. “Back” and “Retry” say nothing. “Back to orders” and “Try the payment again” say what they do.
  • An icon-only action still needs a hidden label.
  • Put the primary action first in the code as well as on screen, since tab order follows the code.
  • If a toast or live region already announces the outcome, do not repeat it word for word in the Result.

Contrast

Result puts three text colors on two backgrounds. Check each pair in light and dark mode.
  • The subtitle uses the quieter description color, and it often holds the useful sentence.
  • The body panel has its own fill, so check anything in children against that fill, not the page.
  • The status colors are chosen for a large icon, not for text. Using one as a text color is where a Result most often drops below 4.5:1.
  • All of these come from your theme. Check them again when you change its seed colors, since nothing warns you.
RateRibbon
© 2026 AntUIKit . All rights reserved.