Gunnar Bittersmann: Mehrsprachigkeit Steuerung UI

Beitrag lesen

@@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.

Und noch was stimmt nicht:

Screenshot

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?

Warum nicht auch eine vernünftige Beschriftung für sehende Nutzer? Bist du sicher, dass alle mit den Kürzeln de, en, fr, it etwas anfangen können?

Und für nichtsehende könnte sie auch aussagekräftiger sein:

	<button title="Deutsch" aria-label="Diese Seite auf deutsch" onclick="setLangCookie(this.lang)" lang="de">de</button>

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

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

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

Außer das Cookie zu setzen passiert nichts? Soll nicht auch sofort die Sprache gewechselt werden?

Nur eine Fehlfunktion könnte erklären, warum der Sprachwechsel nicht sofort erfolgt. Wo scheitert's?

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

lang ist kein gültiger Wert für aria-current. [WAI-ARIA 1.2]

Dann sollte es das schleunigst werden.

Reich einen Vorschlag ein!

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.

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

Nicht einmal mit Alternativtext.

LLAP 🖖

--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann