Header International
Description
The international panel enables users to switch between country sites and — where relevant — change the language or regional norm context, right from the header. It makes DEHN’s global presence tangible and is primarily at home on the web presence (marketing and commerce sites).
In portals where country or regional context is meaningful (e.g., switching between country-specific standards or norms), an adapted version of the panel may be appropriate. Portals that only require a simple language switch, or where no internationalization is needed at all, should omit the panel — language switching in those contexts belongs in the footer and/or the user panel.
Use Cases
- When a portal or website serves multiple countries and needs a standardized country-switching entry point.
- When a site is multilingual and users need to switch both language and country site.
- When a single-language site still supports multiple country sites (reduced variant without language switcher).
Usage
Rules & Guidelines
Trigger icon states:
- Globe with language abbreviation — the site offers multiple languages; both language and country selection are available.
- Plain globe — the site is single-language; only country selection is available.
The icon communicates the available feature scope before the panel is opened.
Panel variants:
1 — Full variant (multilingual site)
- Language switcher (Switch Language) at the top
- Regionally structured country selection (Switch Country Site) in tabs: Europe, Americas, Africa and M. East, Asia
- Only countries with a dedicated language site are listed; the currently active site is highlighted
- Partner search teaser as a fallback entry point for users whose country does not have a dedicated site
2 — Reduced variant (single-language site)
- Language switcher is omitted entirely
- Only the country selection is shown
- The plain globe icon communicates the reduced functionality
Country selection: When switching a country site, the user leaves the current site and is taken to the home page of the target site. This must be communicated clearly through the context of the selection list.
Language switcher: Changes the language within the same site. The lang attribute of the page must be updated programmatically after switching.
Responsive behaviour
The panel adapts in two steps, in line with the general header responsive behaviour.
Tablet: The panel retains its full layout — language switcher and tabbed region selection (Europe, Americas, Africa and M. East, Asia) — while adapting to the reduced available width.
Mobile: The panel moves to the bottom of the mobile navigation overlay. The region tabs collapse into an accordion: each region becomes an individually expandable section, allowing users to navigate country links without horizontal tab navigation. The partner search teaser remains visible below the accordion.
Accessibility
- Focus management: When the panel opens, focus moves to the first interactive element (language switcher or first region tab). When the panel closes, focus returns to the trigger button.
- ARIA:
aria-expandedandaria-controlson the trigger.aria-current="true"on the currently active language and country site. Tabs implemented withrole="tablist",role="tab",aria-selected, androle="tabpanel". - Keyboard:
Escapecloses the panel. Navigate between region tabs with arrow keys (left/right). Country list navigable with Tab and Enter. - Language declaration: After a language switch, the
langattribute of the<html>element must be updated so screen readers announce the new language correctly. hreflang: Providehreflangon all country/language links (e.g.,hreflang="de-AT") to communicate the target language context to search engines and assistive technologies.- Contrast: WCAG AA: 4.5:1 for text, 3:1 for interactive states. The active country/language entry must be visually distinguishable from the default.
- Validation: Manual testing with NVDA and VoiceOver; particular attention to the tab component and the programmatic language attribute update. Lighthouse audit. Applicable under the Barrierefreiheitsstärkungsgesetz (2025).