Screen readers read content twice

[markmagennis]

The text content of the terminal is included twice - (1) the visible content, (2) a visually hidden copy intended to cause a screen-reader announcement. Unfortunately, screen readers read both while the user is reading through the terminal. This not only gives an incorrect report of the terminal content, it is also confusing and since it may be very long it makes it time consuming to get past.

Why this happens

When you enter a command in the terminal, the output is displayed. At the same time, the terminal uses aria-live to cause screen readers to announce the output. This is good, but the way it's implemented isn't good. Instead of adding the aria-live attribute to the container of the visible output, a separate visually hidden <div class="live-region" aria-live="assertive"> is present and a copy of the output is put into that. This causes the screen reader to read it immediately (the purpose of aria-live regions) but means the output is now duplicated - once as visible text and once within the hidden aria-live region. Using a screen reader, if you then arrow through the terminal to read its content, the screen reader reads both the visible content and the hidden content.

Solution

There are two possible solutions:

1. Add aria-live="assertive" and aria-atomic="false" to the <div role="list"> which contains the terminal content and don't use the hidden <div class="live-region" aria-live="assertive"> at all. This will still cause new output to be announced by screen readers when it appears but there will only be one copy.
2. Keep using the hidden <div class="live-region" aria-live="assertive"> but clear it 300ms after injecting the copy of the output into it. This will give the screen reader enough time to register it so it will be announced, but the copy won't remain on the page to be read again later while the user is browsing through the terminal content.

Details

Occurs in all browser and screen reader combintions, e.g.:

• Win/Chrome/JAWS

• Win/Firefox/NVDA

• MacOS/Safari/VoiceOver

• xterm.js version: 4.19.0

Steps to reproduce

1. Run a screen reader.
2. Tab to the terminal input, type any command and hit Enter.
3. If using VoiceOver, read the contents of the terminal using Ctrl+Option+Left Arrow and Ctrl+Option+Right Arrow (VoiceOver) keys.
4. If using JAWS or NVDA, press Esc to exit forms/focus mode then read the contents of the terminal using Up Arrow & Down Arrow keys.