Recommendations for using the lang attribute with live regions? #1346

brennanyoung · 2020-10-27T10:14:41Z

There appear to be some issues with screen readers (notably NVDA and VoiceOver) not respecting the lang attribute in live regions. I can't help feeling that this may be partly because of lack of explicit guidance.

Naturally, if the page is in a single language, it ought to be enough to specify it on the html root, or perhaps the body and if the screen reader does not respect this in a live region (regardless of whether it has browse/focus mode), it is IMO an AT bug. Unfortunately, I can't point to anything in the spec which would nail this down, and which I could include in a bug report to the AT vendors.

There's precious little documentation about how the lang attribute is supposed to work with live regions. I would expect that adding lang to the live region would be enough in many cases (although as mentioned, some ATs are failing here).

But more conceptually, what if the live region - such as a multi-lingual chat log - contains elements with text in multiple languages?

Would it be valuable to add some notes of clarification to the spec for aria-live, explaining how it should work with WCAG SC 3.1.2 (Language of Parts). Is there a better place for such guidance to appear?

Given that live regions may be implemented without aria, perhaps it would fit better on the Understanding doc for SC 3.1.2?

The text was updated successfully, but these errors were encountered:

carmacleod · 2020-10-27T12:49:30Z

There's some guidance on live regions being developed for APG in this PR w3c/aria-practices#1027
There's nothing there on lang, though. Not sure there should be? I think it should just work? And if it doesn't, then it's a screen reader bug?

Given that live regions may be implemented without aria

Ok, I'm intrigued. What have you heard? [Edit: I guess you must mean CSS Speech?]

JAWS-test · 2020-10-27T13:27:33Z

JAWS also has problems with correct language output in live regions: FreedomScientific/standards-support#8 and w3c/aria-practices#1163

JAWS-test · 2020-10-27T13:51:51Z

I'm not sure if the problem is more general and therefore not limited to live regions. In my experience the language and the language change is only output correctly when reading linearly with the virtual cursor. But as soon as the text is not read directly with the virtual cursor, but only a reference to the text is used as plain text for output, the language change within it and often also the language markup of the text itself is lost. This occurs, for example, with the following ARIA and HTML attributes/elements:

title attribute
aria-labelledby
label for
fieldset / legend
caption
aria-describedby
Live Regions

I think that the specification should be more exact here, so that then afterwards bugs can be opened at the AT manufacturers (see: w3c/accname#56)

brennanyoung · 2020-10-27T14:09:03Z

@carmacleod the <output> element is a live region by default in many/most browsers. This makes a lot of sense, since it is expected to change its content when another element (typically, but not necessarily, another form element) is in focus.

This is really good, although it's not required by the spec, and support is likely to be uneven, so it would be convenient if this was better known, and better documented. I have already made sure it is mentioned on the MDN page for <output>

carmacleod · 2020-10-27T17:05:25Z

the element is a live region by default in many/most browsers.

Oh, right. Forgot about output. :)
Have you tried testing whether lang on an output is pronounced correctly (live) when its input changes?

pkra · 2020-10-28T08:32:28Z

WICG/aom#128 seems tangentially related.

brennanyoung · 2020-10-30T14:21:19Z

Safari/VoiceOver does not honour lang on <output>. For good measure, I have reported this to Apple.

Below is the code I used. If you're going to test, make sure that the speech 'voice' for the language(s) in question has been downloaded!

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>test of lang attribute with live regions</title>

	<style>
	body {
		background:silver;
		font-size:120%;
	}
	button {
		font-size:120%;
	}
	output {
		background:white;
		padding:0.4em;
		display:block;
		height:1em;
		width:30em;
	}
	</style>

</head>

<body>
	<button id="french">A French expression</button>
	<button id="english">An English expression</button>
	<output id="out"></output>
</body>

<script>
let f = document.getElementById("french");
let e = document.getElementById("english");
let o = document.getElementById("out");
f.onclick = function () {
	o.setAttribute("lang", "fr");
	o.textContent = "Plus ça change, plus c'est la même chose"
};
e.onclick = function () {
	o.setAttribute("lang", "en");
	o.textContent = "if you're not part of the solution, you're part of the precipitate"
};
</script>
</html>

carmacleod · 2020-11-05T17:14:31Z

Thanks, @brennanyoung
In case it's helpful, I put your output code here for easier testing: https://carmacleod.github.io/playground/output-lang-test.html
I changed the first button to French so I had something that works to compare to.

I tested JAWS and NVDA in Chrome and FF (had to switch back to eSpeak NG synthesizer for NVDA to change langs).

the French button text is read correctly.
the French output is read correctly when using the virtual cursor (down arrow).
the live French output is not read correctly, except with JAWS in Chrome. (interesting)

Just data for now. Still have to discuss the larger issue of live regions, and the more general issue that @JAWS-test mentioned about referenced text.

jnurthen · 2020-11-05T23:38:38Z

@JAWS-test 100% agree that we could do with more clarity around which language should be spoken in all sorts of situations.

Lets keep this issue only about the live region language issues (as that seems potentially solvable in the ARIA spec itself) and leave the larger set of issues to w3c/accname#56 and any child issues that might get logged from there.

JAWS-test · 2020-11-07T04:50:48Z

@carmacleod

the live French output is not read correctly, except with JAWS in Chrome. (interesting)

But if you have a language change within <ouput> and not only at <output>, it will not be output correctly even with Chrome

brennanyoung · 2020-11-18T19:08:30Z

Just ran into this article today, produced this year. A truly dismal report on lang support from all the big players. What can we do to get some traction amongst the many browser, speech synth and AT vendors on this?

https://uxdesign.cc/the-troubled-state-of-screen-readers-in-multilingual-situations-f6a9da4ecdf3

jnurthen · 2023-09-08T20:31:02Z

There are a number of related issues to this one which we should try to tackle to better support i18n - anyone interested in working on these?

jnurthen modified the milestone: ARIA 1.3 Oct 27, 2020

jnurthen added this to the ARIA 1.3 milestone Nov 5, 2020

jnurthen modified the milestones: ARIA 1.3, ARIA 1.4 May 6, 2021

jnurthen added the help-wanted label Sep 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Recommendations for using the lang attribute with live regions? #1346

Recommendations for using the lang attribute with live regions? #1346

brennanyoung commented Oct 27, 2020

carmacleod commented Oct 27, 2020 •

edited

Loading

JAWS-test commented Oct 27, 2020 •

edited

Loading

JAWS-test commented Oct 27, 2020

brennanyoung commented Oct 27, 2020 •

edited

Loading

carmacleod commented Oct 27, 2020

pkra commented Oct 28, 2020

brennanyoung commented Oct 30, 2020

carmacleod commented Nov 5, 2020

jnurthen commented Nov 5, 2020

JAWS-test commented Nov 7, 2020

brennanyoung commented Nov 18, 2020

jnurthen commented Sep 8, 2023

Recommendations for using the lang attribute with live regions? #1346

Recommendations for using the lang attribute with live regions? #1346

Comments

brennanyoung commented Oct 27, 2020

carmacleod commented Oct 27, 2020 • edited Loading

JAWS-test commented Oct 27, 2020 • edited Loading

JAWS-test commented Oct 27, 2020

brennanyoung commented Oct 27, 2020 • edited Loading

carmacleod commented Oct 27, 2020

pkra commented Oct 28, 2020

brennanyoung commented Oct 30, 2020

carmacleod commented Nov 5, 2020

jnurthen commented Nov 5, 2020

JAWS-test commented Nov 7, 2020

brennanyoung commented Nov 18, 2020

jnurthen commented Sep 8, 2023

carmacleod commented Oct 27, 2020 •

edited

Loading

JAWS-test commented Oct 27, 2020 •

edited

Loading

brennanyoung commented Oct 27, 2020 •

edited

Loading