Plain Language Error Display
Component Detail
Description
Renders form and server errors in plain Norwegian using a two-part structure: what went wrong and how to fix it. Never shows raw error codes. Meets WCAG 2.2 AA for error identification (1.3.1, 3.3.1, 3.3.3).
plain-language-error-display
Summaries
The Plain Language Error Display transforms technical system failures into clear, actionable guidance for users — in plain Norwegian. Rather than showing cryptic error codes that cause frustration and support calls, every error is presented as a two-part message: what went wrong and exactly how to fix it. This significantly reduces inbound support volume, improves user confidence in the product, and ensures the application meets WCAG 2.2 AA error identification standards. Compliance with accessibility law (WCAG 3.3.1, 3.3.3) is particularly important given EU and Norwegian requirements for public-facing digital services, reducing legal and regulatory exposure.
This is a low-complexity component but carries a content dependency that must be carefully managed: the error-message-registry must be populated with Norwegian plain-language messages for every error code the system can produce. This requires coordination between developers, UX writers, and Norwegian-language copywriters — a non-technical dependency that is easy to underestimate in sprint planning. Accessibility testing must cover screen-reader announcement behavior on both iOS VoiceOver and Android TalkBack. Because this component is shared across all forms and server interactions, it should be delivered and stabilized early in the project timeline, before feature teams begin integrating form validation.
PlainLanguageErrorDisplay accepts errorKey (String) and optional context (Map) props. It delegates to mapErrorCodeToMessage(code) to perform a lookup against the error-message-registry dependency, which returns a structured ErrorMessage object containing cause (String) and correctiveAction (String). buildCorrectiveActionText(errorKey) can interpolate context values (e.g. field names) into the corrective action string for more specific guidance.
announceError() posts a live-region accessibility announcement using the platform semantics layer, satisfying WCAG 1.3.1 (info and relationships) and 3.3.1 (error identification). All error messages are authored in the registry; this component contains no hardcoded strings. Unit tests should cover missing registry keys, null context, and announcement timing.
Responsibilities
- Display human-readable error cause in plain Norwegian
- Display a concrete corrective action suggestion
- Map technical error codes to user-facing messages via a lookup table
- Announce errors via accessibility semantic labels
Interfaces
PlainLanguageErrorDisplay({errorKey, context})
mapErrorCodeToMessage(code)
buildCorrectiveActionText(errorKey)
announceError()