aria-invalid로 유효하지 않은 상태 표시하기

A red border tells sighted users a field failed. A screen reader user sees no color, so they need the failure stated in code. 🚫

The attribute aria-invalid marks a control as failing validation. Set it to true and assistive tech announces the error state.

A field with no aria-invalid is treated as valid. You only add aria-invalid="true" when a check has actually failed.

Once the user fixes the value, set aria-invalid to false or remove it. Leaving it true announces an error that no longer exists.

Apply aria-invalid when you actually validate, not on page load. Marking empty fields invalid before the user types is hostile.

aria-invalid says something is wrong, but not what. Always pair it with aria-describedby so the user also hears the reason.

When focus enters an invalid field, screen readers say invalid alongside the name. The user knows instantly they must fix it.

You can target the attribute in CSS to show a red ring. This keeps your visuals and your semantics perfectly in sync.

aria-invalid also accepts values like grammar or spelling. For most forms, plain true is exactly what you want.

Never rely on a red class alone to mean error. The class is invisible to assistive tech; aria-invalid is what carries the meaning.

Mark each failing control on its own. Setting aria-invalid on a wrapper or the form does not tell users which input needs attention.

What does aria-invalid="true" actually communicate?

Use aria-invalid to flag failing fields, set it true on error and false on fix, and pair it with a described error message. ✅