Internationalisierung und Lokalisierung

Wenn Sie dies lesen, nutzen Sie das World Wide Web. Ihre Formulare können von Menschen verwendet werden, die unterschiedliche Sprachen sprechen, Menschen aus verschiedenen Ländern und Menschen mit unterschiedlichen kulturellen Hintergründen. Hier erfährst du, wie du dein Formular für die Internationalisierung und Lokalisierung vorbereiten kannst.

Dafür sorgen, dass das Formular in verschiedenen Sprachen funktioniert

Sehen wir uns an, wie Sie dafür sorgen können, dass Ihr Formular in verschiedenen Sprachen funktioniert.

Damit deine Website lokalisiert werden kann, musst du zuerst das Sprachattribut lang für das <html>-Element definieren. Dieses Attribut ermöglicht Screenreadern, die korrekte Aussprache aufzurufen, und hilft Browsern, eine Übersetzung der Seite anzubieten, wenn die festgelegte Sprache nicht die Standardsprache des Browsers ist.

<html lang="en-us">

Weitere Informationen zum Attribut lang.

Angenommen, Sie haben ein Formular ins Deutsche übersetzt. Wie können Sie dafür sorgen, dass Suchmaschinen und Browser die übersetzte Version sehen? Du kannst <link>-Elemente in der <head> deiner Website hinzufügen, um die alternativen Versionen zu beschreiben.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Helfen Sie Nutzern, die eine andere Sprache sprechen, Ihr Formular zu verwenden

Sie können Ihr Formular nicht in alle Sprachen übersetzen, aber Sie sollten dafür sorgen, dass Übersetzungstools es für Sie übersetzen können.

Damit Übersetzungstools den gesamten Text in Ihrem Formular übersetzen können, muss der gesamte Text in HTML definiert und sichtbar sein. Einige Tools funktionieren auch mit in JavaScript definierten Inhalten. Versuchen Sie jedoch, so viel Text wie möglich in HTML einzufügen, um die Kompatibilität zu verbessern.

Sicherstellen, dass das Formular mit verschiedenen Schreibsystemen funktioniert

Unterschiedliche Sprachen verwenden unterschiedliche Schreibsysteme und Zeichensätze. Manche Skripte werden von links nach rechts und andere von rechts nach links geschrieben.

Abstände unabhängig von Schriftsystemen gestalten

Um sicherzustellen, dass Ihr Formular mit verschiedenen Schreibsystemen funktioniert, können Sie logische CSS-Attribute verwenden.

Die Eingabe hat auf allen Seiten eine Rahmenstärke von 1px, außer auf der linken Seite, wo der Rahmen 4px dick ist. Bearbeiten Sie nun den CodePen und ändern Sie das Schreibsystem nach links. Fügen Sie dazu dir="rtl" zum Element <main> hinzu.

Die breite Rahmenlinie befindet sich nun auf der rechten Seite. Das liegt daran, dass wir den Rahmen mithilfe einer logischen Eigenschaft definiert haben.

input {
  border-inline-start-width: 4px;
}

Weitere Informationen zu logischen Attributen

Achten Sie darauf, dass das Formular verschiedene Namensformate verarbeiten kann

Angenommen, Sie haben ein Formular, in das der Nutzer seinen Namen eingeben soll. Wie würden Sie das Feld Ihrem Formular hinzufügen?

Sie könnten ein Feld für den Vornamen und eines für den Nachnamen hinzufügen. Namen sind jedoch auf der ganzen Welt unterschiedlich: Manche Personen haben beispielsweise keinen Nachnamen. Wie sollten sie das Feld für den Nachnamen ausfüllen?

Verwenden Sie nach Möglichkeit ein einzelnes Formularfeld für Namen, um die Eingabe von Namen schnell und einfach zu gestalten und sicherzustellen, dass alle ihren Namen unabhängig vom Format eingeben können.

Weitere Informationen zu Personennamen

Wenn Ihr Name nicht lateinische Zeichen enthält, ist möglicherweise das Problem aufgetreten, dass Ihr Name in einigen Formen als invalid gemeldet wird. Achten Sie beim Erstellen von Formularen darauf, alle möglichen Zeichen zuzulassen – und gehen Sie nicht davon aus, dass ein Name nur aus lateinischen Zeichen besteht.

Verschiedene Adressformate zulassen

Der Hauptsitz von Google ist 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA.

Diese Adresse umfasst Hausnummer, Straße, Stadt, Bundesland, Postleitzahl und Land. In Ihrem Land kann das Adressformat völlig anders aussehen. Wie sorgen Sie dafür, dass alle ihre Adresse in das Formular eingeben können?

Eine Möglichkeit besteht darin, generische Eingaben zu verwenden.

Weitere Informationen zur Verwendung von internationalen Adressfeldern

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Internationalisierung und Lokalisierung

Wie wird für Screenreader die richtige Aussprache festgelegt?

Mit dem Attribut lang.
🎉
Mit dem Attribut hreflang.
Versuch es noch einmal.
Eine Beschreibung mit der verwendeten Sprache hinzufügen
Versuch es noch einmal.
Mit dem Attribut language.
Versuch es noch einmal.

Wie können Sie das Schriftsystem Ihrer Website ändern?

Mit dem Attribut direction.
Versuch es noch einmal.
Mit dem Attribut dir.
🎉
Logische CSS-Attribute verwenden
Versuch es noch einmal.
Unter Verwendung des <link>-Elements.
Versuch es noch einmal.

Ressourcen