Aller au contenu principal
Version 0.2Brouillon

Accessibility and localisation

Overview​

LuxID integrations must be usable by everyone - including users who rely on screen readers, keyboard navigation, or assistive technology, and users whose preferred language is English, French, German, or Luxembourgish.

This page covers:

  • WCAG 2.2 AA compliance requirements
  • Screen reader and ARIA patterns for the sign-in button and flow
  • Keyboard navigation requirements
  • Focus management
  • Colour contrast
  • Language detection and the lang parameter
  • The LuxID language fall-back chain
  • Inclusive wording guidance
  • Text direction (LTR)

WCAG 2.2 AA - the compliance bar​

All LuxID Partner applications must meet WCAG 2.2 Level AA for the sign-in flow - the current W3C recommendation and the LuxID project standard. WCAG 2.1 AA is the version currently referenced (via EN 301 549) by the EU Web Accessibility Directive (Directive 2016/2102/EU (opens in a new tab)) and the European Accessibility Act (Directive 2019/882/EU (opens in a new tab)); targeting 2.2 keeps you ahead of the harmonised baseline and picks up SC 3.3.8 Accessible Authentication, which is directly relevant to a sign-in flow.

For the LuxID sign-in button and related UI specifically, the following WCAG success criteria are most relevant:

CriterionLevelRequirement
1.1.1 Non-text ContentAThe LuxID icon must have alt="" (decorative) with the button text providing the accessible name
1.4.3 Contrast (Minimum)AAText and icon against button background: 4.5:1 minimum
1.4.11 Non-text ContrastAAButton border/focus indicator against adjacent colours: 3:1 minimum
2.1.1 KeyboardAButton must be reachable and activatable by keyboard alone
2.4.3 Focus OrderATab order through sign-in UI must be logical
2.4.7 Focus VisibleAAKeyboard focus indicator must be visible
3.2.2 On InputAActivating the button must not cause unexpected context changes beyond initiating the redirect
4.1.2 Name, Role, ValueAButton must have an accessible name; role is implicit from <button> or role="button"

The LuxID login page at https://login.luxid.lu is tested and maintained by POST Luxembourg against WCAG 2.2 AA. Partner applications are responsible for the accessibility of their own UI surrounding the sign-in button.

Screen reader support​

Button accessible name​

Screen readers announce the button by its accessible name. The correct pattern:

<button class="luxid-btn" type="button">
  <img
    src="/assets/luxid-icon-white.svg"
    alt=""
    aria-hidden="true"
    width="20"
    height="20"
  />
  Sign in with LuxID
</button>
  • alt="" on the icon: marks it as decorative. Screen readers skip it.
  • aria-hidden="true" on the icon: additional suppression for assistive technology.
  • The visible text "Sign in with LuxID" is the accessible name.

A screen reader will announce: "Sign in with LuxID, button".

Icon-only variant​

If you use an icon-only button (not recommended - see Login button guidelines), provide an explicit accessible name:

<button
  class="luxid-btn luxid-btn--icon-only"
  type="button"
  aria-label="Sign in with LuxID"
>
  <img
    src="/assets/luxid-icon-white.svg"
    alt=""
    aria-hidden="true"
    width="20"
    height="20"
  />
</button>

The aria-label overrides the (empty) text content and provides the accessible name.

Loading state​

If your application shows a loading state while initiating the redirect, communicate it to screen readers:

<button
  class="luxid-btn"
  type="button"
  aria-disabled="true"
  aria-busy="true"
>
  <img src="/assets/luxid-icon-white.svg" alt="" aria-hidden="true" />
  Signing in...
</button>

Update the visible text as well so sighted users see the same state.

Error messages​

Error messages returned after a failed sign-in attempt must be announced to screen readers. Use role="alert" for errors that appear dynamically:

<div role="alert" aria-live="assertive">
  <p>Sign-in was cancelled. You can try again whenever you're ready.</p>
</div>

Keyboard navigation​

Tab order​

The sign-in button must be reachable by tabbing from the top of the page. Ensure:

  • The button has a natural tab index (do not use tabindex="-1" unless the button is genuinely hidden).
  • The tab order through your sign-in UI is logical: any explanation text or terms link should come before the button if visually positioned above it.
  • After the redirect back from LuxID, focus is managed to a logical starting point (typically the main content area or a welcome heading).

Activation​

The button must be activatable with both Enter and Space keys when focused. This is the default behaviour for <button> elements. If you use a <div> or <a> styled as a button, add role="button" and a keydown handler for both keys.

Focus visible​

Focus indicators must be visible. Do not remove the default focus outline without providing a replacement:

/* Correct: replace the default outline with a custom visible style */
.luxid-btn:focus-visible {
  outline: 3px solid #005fcc; /* high-contrast blue */
  outline-offset: 2px;
}

/* Incorrect: removes focus visibility without replacement */
.luxid-btn:focus {
  outline: none;
}

focus-visible targets keyboard focus only, leaving mouse clicks without the ring. This is the recommended modern pattern.

Colour contrast​

The LuxID button colour palette is designed to meet WCAG AA contrast. When implementing the button, verify contrast with a tool such as:

If you place the LuxID button on a custom background colour (not white or dark), verify the resulting contrast ratio before shipping.

Localisation​

Languages LuxID supports​

LuxID Universal Login is available in four languages:

LanguageCodeNotes
EnglishenDefault fall-back
FrenchfrMost common language in Luxembourg
Germande
LuxembourgishlbOfficial language of Luxembourg

The lang parameter​

Your application can request a specific language for the LuxID login page by passing the lang parameter on the authorisation request. This is a LuxID-specific query parameter, not the OIDC ui_locales parameter:

GET /mga/sps/oauth/oauth20/authorize?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yourapp.lu/callback
  &response_type=code
  &scope=openid email
  &lang=fr

Accepted values are fr, de, en, and lu. Note that the parameter value for Luxembourgish is lu, even though the BCP47 language code is lb - so map lb to lu when deriving the value from a standard locale.

If lang is not sent, LuxID detects the user's browser language and falls back through the supported language list.

The fall-back chain​

If a user's browser language is not directly supported, LuxID falls back in this order:

  1. Luxembourgish (lb)
  2. French (fr)
  3. German (de)
  4. English (en)

This order reflects the linguistic reality of Luxembourg: Luxembourgish speakers typically also read French and/or German, and English is the universal fall-back for international users.

Best practice: send lang explicitly​

astuce

Rather than relying on browser language detection, send lang explicitly based on your application's current interface language. This ensures consistency - a user whose application is in French sees French on the LuxID page too.

// Derive from your app's current locale setting
const code = appLocale.split('-')[0]; // e.g. 'fr-LU' → 'fr'
// LuxID's lang parameter uses 'lu' for Luxembourgish (BCP47 code is 'lb')
const lang = code === 'lb' ? 'lu' : code;
const authUrl = buildAuthUrl({ lang, ... });

Help URL localisation​

When linking to LuxID public help pages, match the URL language path to the application's current language:

LanguagePattern
Englishhttps://www.luxid.lu/en/...
Frenchhttps://www.luxid.lu/fr/...
Germanhttps://www.luxid.lu/de/...
Luxembourgishhttps://www.luxid.lu/lb/...

See Error and edge-case UX for per-language microcopy tables.

Inclusive wording guidance​

Gender-neutral language​

Write sign-in UI copy in gender-neutral terms. In French and German, where gendered agreement is grammatically required, prefer inclusive constructions:

  • French: use the infinitive form where possible ("Se connecter" rather than "Connecté(e)"). For past participles in UI state labels, use gender-neutral phrasing or the infinitive.
  • German: use gender-neutral terms where available ("Anmelden" rather than constructions requiring gendered agreement).

Ability-neutral language​

Avoid ability-specific idioms in UI copy adjacent to the sign-in flow:

AvoidPrefer
"Just click the button below""Select the button below"
"See the guide for details""Read the guide for details" or "Visit the guide for details"

Age-neutral language​

LuxID is available to users of eligible age. Do not assume youth or technical proficiency in help copy. Avoid "simply", "just", "easily" - these minimise difficulty for users who do not find it simple.

Text direction​

LuxID is offered in English, French, German and Luxembourgish - all left-to-right (LTR) scripts - so the LuxID-hosted pages render LTR. LuxID does not offer right-to-left (RTL) languages such as Arabic or Hebrew, and there is no RTL interface planned.

If your own application serves an RTL language alongside "Sign in with LuxID", the LuxID page still renders LTR. Make sure your application's RTL layout does not misalign the LuxID button when the page direction is set to dir="rtl" - set dir="ltr" on the button container if needed.

Mise à jour le 2026-06-19
Sur cette page