beatovich: Mehrsprachigkeit Steuerung UI

Beitrag lesen

hallo

@@beatovich

Schau dir die aktuelle Online Version https://beat-stoecklin.ch/pub/website_multilang.html an.

Irgendwas stimmt da nicht. Ich bekomme die Seite initial auf französisch präsentiert; in der Sprachauswahl ist aber DE hervorgehoben.

Da war doch tatsächlich noch ein data-lang="fr" im Original Quelltext.

Und noch was stimmt nicht:

Screenshot

stimmt, um die 600px.

gefixt

Anstatt absoluter Positionierung wäre da vielleicht float: right oder Flexbox besser.

Und sollte nicht die Sprachauswahl gleich vorne im DOM stehen, gleich nach dem Skip-Link?

naja, da gibt's verschiedene Anwärter. Da werde ich mir noch Gedanken machen. Die Themes sind ja strukturell nicht in Stein gemeiselt.

Das hiesse dann ein select Element.

Bitte nicht. [qa-navigation-select]

Ob die Sprachkürzel als Beschriftung in deiner Sprachauswahl taugen, hängt von deiner Zielgruppe ab.

Die ist ja immer noch einsprachig. Ich werde mir den Aufwand nicht machen. Aber andere User dürfen sicher das Theme an ihre Bedürfnisse anpassen.

Auf Webseiten hast du aber allen Platz der Welt, um die Sprachen auszuschreiben: Deutsch, English, Español, Français, Italiano. Die aktuelle Sprache muss im Menü nicht auftauchen; nur die anderen jeweils verfügbaren.

Ich wüsste nicht, dass sich Webseiten allen Platz der Wahl nehmen.

Denkbar wäre dann eine Klappbox, wenn ich da nur ein Box-Label/Icon hätte, das immer verständlich ist. Solche Lösungen können nur site-spezifisch (von anderen) entschieden werden und sind deshalb ausserhalb meiner Domäne.

Das title-Attribut kann dann dazu genutzt werden, die Sprachbezeichnungen in der aktuellen Sprache anzuzeigen, bspw. auf der englischen

Es ist sicher gut, das title-Attribut befüllt zu haben, damit man es via CSS für den Button-Text bei Bedarf nutzen kann.

	<button title="German" onclick="setLangCookie(this.lang)">
		<span lang="de">
			<span class="visually-hidden">Diese Seite auf</span>
			deutsch
		</span>
	</button>

Diese Mitteilung diese Seite auf ... ist aber nur zum Teil richtig. Man wählt auch den Zustand für jede nächste mehrsprachige Seite.

Ich neige dazu, dass Sprachkürzel in den meisten Fällen ausreichen. Eventuell kann der Sprach-Vollname dienen.

Alles andere aber kann mehr Verwirrung stiften.

Was tut die Funktion setLangCookie()? Mehr als ihr Name aussagt?

Sie setzt das attribut data-lang= $lang im html Element

Ich kann mir einen besseren Namen ausdenken: setUserLang()

Ich erwarte aber nicht, dass Theme-User mit dem Funktionsnamen in Berührung kommen.

Ich kann den Wert auch leer lassen.

Nochmal nachgelesen: ja, kannst du. aria-current="" wird als aria-current="true" gewertet. aria-current="lang" übrigens auch.

Meine Vermutung ist, dass jeder Wert, der aus Sicht der assistiven Technologie nicht einem registrierten Wert entspricht, schlicht als true verstanden wird. Operativ sollte die aktuelle Schreibweise also kein Problem darstellen.

Das ist wohl der Einzig Fall, wo man entschuldigt ist, dass man ein Icon nicht mit Text begleitet.

Nicht einmal mit Alternativtext.

Was mich dazu bringt, wie ich bei Mehrsprachigkeit mit alt-texten umgehen soll.

Ist die Funktion des alt-textes der einer Beschreibung, so ist aria-describedby vorzuziehen. Dort sind Übersetzungen einfach anzubringen.