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?
lang
.hreflang
.language
.Wie können Sie das Schriftsystem Ihrer Website ändern?
direction
.dir
.<link>
-Elements.Ressourcen
- Artikel und Anleitungen zur W3C-Internationalisierung
- Franks Zwangsführer zu Postanschriften enthält nützliche Links und umfassende Anleitungen für Adressformate in über 200 Ländern.
- DataHub.io ist ein Tool zum Herunterladen von Ländercodes und -namen.