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?
lang
.hreflang
.language
.Wie können Sie das Schriftsystem auf Ihrer Website ändern?
dir
.<link>
.direction
.Ressourcen
- Artikel und Anleitungen zur W3C-Internationalisierung
- Frank's Compulsive Guide to Postal Address (Frank's Compulsive Guide to Postal Addressen) enthält nützliche Links und ausführliche Anleitungen zu Adressformaten in über 200 Ländern.
- DataHub.io ist ein Tool zum Herunterladen von Ländercodes und Namen.