Internationalisierung und Lokalisierung

Wenn Sie dies lesen, nutzen Sie das World Wide Web. Ihre Formulare können auch von Menschen mit anderen Sprachen verwendet werden, Menschen aus verschiedenen Ländern und Menschen mit unterschiedlichem kulturellen Hintergrund. Hier erfahren Sie, wie Sie Ihr Formular für die Internationalisierung und Lokalisierung vorbereiten.

Sicherstellen, dass das Formular in verschiedenen Sprachen verfügbar ist

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

Wenn du deine Website lokalisieren möchtest, musst du zuerst das Sprachattribut lang für das <html>-Element definieren. Mit diesem Attribut können Screenreader die richtige Aussprache aufrufen, und ermöglicht 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 sicherstellen, dass Suchmaschinen und Browser über die übersetzte Version informiert werden? Du kannst in der <head> deiner Website <link>-Elemente zur Beschreibung der alternativen Versionen hinzufügen.

<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">

Nutzern, die eine andere Sprache sprechen, dabei helfen, das Formular zu verwenden

Sie können Ihr Formular nicht in jede Sprache übersetzen, aber Sie können dafür sorgen, dass Übersetzungstools sie für Sie übersetzen können.

Um sicherzustellen, dass die Übersetzungstools den gesamten Text im Formular übersetzen, Stellen Sie sicher, dass der gesamte Text in HTML definiert und sichtbar ist. Einige Tools arbeiten auch mit in JavaScript definierten Inhalten. Um die Kompatibilität zu verbessern, versuchen Sie, so viel Text wie möglich in HTML einzufügen.

Sicherstellen, dass das Formular mit verschiedenen Schreibsystemen funktioniert

Unterschiedliche Sprachen verwenden unterschiedliche Schriftsysteme und Zeichensätze. Einige Skripts werden von links nach rechts und andere von rechts nach links geschrieben.

Abstände unabhängig von Schriftsystemen verwenden

Um sicherzustellen, dass Ihr Formular für verschiedene Schriftsysteme geeignet ist, können Sie logische CSS-Eigenschaften verwenden.

Die Eingabe hat an allen Seiten eine Rahmenstärke von 1px. außer auf der linken Seite, bei der der Rahmen 4px breit ist. Bearbeiten Sie nun den CodePen und ändern Sie das Schriftsystem von rechts nach links. indem Sie dir="rtl" zum Element <main> hinzufügen

Der dicke Rahmen befindet sich jetzt auf der rechten Seite. Das liegt daran, dass wir die Grenze mithilfe einer logischen Eigenschaft definiert haben.

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

Weitere Informationen zu logischen Attributen

Sicherstellen, dass das Formular unterschiedliche Namensformate verarbeiten kann

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

Sie könnten ein Feld für den Vornamen und ein Feld für den Nachnamen hinzufügen. Allerdings unterscheiden sich die Namen Menschen auf der ganzen Welt haben beispielsweise keinen Nachnamen. Wie sollen sie also den Nachnamen eintragen? surname ein?

Um die Namenseingabe zu erleichtern und sicherzustellen, dass alle ihren Namen eingeben können, unabhängig davon, Format: Verwenden Sie nach Möglichkeit nur ein Formularfeld für Namen.

Weitere Informationen zu Personennamen

Wenn Ihr Name nicht lateinische Zeichen enthält, gehen Sie so vor: haben Sie möglicherweise das Problem, dass Ihr Name in manchen Fällen als invalid angezeigt wird. Wenn Sie erstellen Sie Formulare und achten Sie darauf, dass alle Zeichen zulässig sind. Gehen Sie nicht davon aus, dass ein Name nur aus mit lateinischen Zeichen.

Ermöglichen einer Vielzahl von Adressformaten

Der Hauptsitz von Google befindet sich in 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA.

Diese Adresse umfasst Hausnummer, Straße, Ort, Bundesland/-staat, Postleitzahl und Land. In Ihrem Land kann das Adressformat völlig anders sein. Wie können Sie sicherstellen, dass alle Personen ihre Adresse in Ihr Formular eingeben können?

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

Erfahren Sie mehr über die anderen Möglichkeiten der Arbeit mit Felder für internationale Adressen.

Wissen testen

Testen Sie Ihr Wissen über Internationalisierung und Lokalisierung

Wie rufen Sie die richtige Aussprache für Screenreader auf?

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 auf Ihrer Website ändern?

Mit dem Attribut direction.
Versuch es noch einmal.
Mit dem Attribut dir.
🎉
Verwendung logischer CSS-Eigenschaften.
Versuch es noch einmal.
Mit dem Element <link>.
Versuch es noch einmal.

Ressourcen