How to add attribute lang="en" to label element of an input field?

Question

I have a Vaadin website in German language. Attribute lang="de" is set on html element. Some technical terms are English words. For web accessibility reasons, I have to add the attribute lang="en" to elements carrying the English terms. That makes a screen reader to read them out in proper English, which improves the understandability.

Vaadin input fields like TextField only have setLabel(String label). There are no other methods regarding the label. And the label element itself is not (easily) accessible.

Setting attribute lang="en" to the TextField is not an option. That would make the screenreader to read out all elements of TextField in English. But the input, helper text, error message and required indicator shall be read in German.

On Vaadin blog I found Basic Tips for Improving Accessibility. There is some code for setting aria-label on inputElement:

// Use placeholders with a label or aria-label
TextField search = new TextField();
search.setPlaceholder(“Search”);

textfield.getElement().executeJs(
  "this.inputElement.setAttribute(
    'aria-label', ‘Search'
)");

textfield.getElement().executeJs(
  "this.inputElement.removeAttribute(
    'aria-labelledby'
)");

(I know textfield is never defined. Should have been search. Oh, and you can't have a string over several lines like that. And there are different quote signs. Copied this unchanged.)

That code gave me an idea, how I might add attributes to the label:

// Set lang="en" on label
TextField myTextfield = new TextField();
myTextfield.setLabel(“AD Identifier”);

myTextfield.getElement().executeJs(
    "this.labelElement.setAttribute('lang', 'en')"
    );

But that doesn't work. JS can't find labelElement:

The error has occurred in the JS code: '$0, return (function() { this.labelElement.setAttribute('lang', ‘en')}).apply($0)'

Is this the way to go for setting attributes on label element of Vaadin input component? Is this guaranteed to be working in future Vaadin versions?

Answer 1

The language of a label set via aria-label can't be different than the input element.

If you need to specify a different language for the label, then you have whether to use a <label> element, or another element you references with aria-labelledby.

The <label> element is better, as you avoid using ARIA where it isn't really necessary (first rule of ARIA), and you get some very handy features for free, such as a click on the label give the focus to the field.

This gives the following HTML code:

<label for="field" lang="en">English label</label>
<input type="text" id="field" lang="de" value="Wert auf Deutsch"/>

Or:

<span id="label" lang="en">English label</span>
<input type="text" aria-labelledby="label" lang="de" value="Wert auf Deutsch"/>

In Vaadin you can do this with Java using the code like follows:

    TextField field = new TextField();
    NativeLabel label = new NativeLabel("English label");
    label.getElement().setAttribute("lang", "en");
    label.getElement().setAttribute("slot", "label");
    field.getElement().appendChild(label.getElement());