Terminal output div container should be more accessible for screen readers
See original GitHub issueCC @isidorn
System Info
- Version: 1.46.0-insider (system setup)
- Commit: cd41dd1f6065db76c77c6e2f659bb50e6f558dec
- Date: 2020-05-29T05:51:32.662Z
- Electron: 7.3.0
- Chrome: 78.0.3904.130
- Node.js: 12.8.1
- V8: 7.8.279.23-electron.0
- OS: Windows_NT x64 10.0.18363
Steps to Reproduce:
- With either NVDA or JAWS loaded, type any commands in terminal (Ctrl+`) input area.
- Press
Shift+Tab
two times from the terminal input to focus in terminal output list view. - The terminal output list is reachable via tab key thanks to
tabindex = "0"
attribute; however, screen readers (both NVDA and JAWS) do not read anything with arrow keys unless users manually switch on browse mode. - The additional problem can be found with very long terminal outputs that require scroll behavior. Screen reader users have to switch back to forms mode to arrow up/down to scroll through the output history (while not being read any current line) and again, turn back to browse mode to check the results.
- Does this issue occur when all extensions are disabled?: Yes
Suggested Solutions
Currently, the terminal output <div>
container denoted with class = "xterm-accessibility-tree"
has role = "list"
.
As a blind developer myself, I am requesting the following for accessibility improvements for screen readers.
- Please change the value of
role
attribute from"list"
to"document"
so that screen reader users can navigate the terminal output via arrow keys using browse mode. - Please adjust the
tabindex
value of this terminal output container in the way that screen reader users can quicklyShift+Tab
from terminal input area. In other words, pressingtab
key from terminal output area should go to terminal input area; pressingShift+Tab
key from terminal input goes to terminal output area denoted withrole = "document"
div. - Ideally, it would be great if the terminal output can be also included in the F6-keycycle.
Issue Analytics
- State:
- Created 3 years ago
- Comments:74 (40 by maintainers)
Top Results From Across the Web
Accessible way of notifying a screen reader about loading the ...
The most important things I've learned about ARIA live regions is that aria-live element must exist in the DOM on page load instead...
Read more >Force Screen Reader to Read Label Upon Entering Div
I want a label to be read by screen readers upon entry of the div via tabbing, but the div itself is (and...
Read more >Make it Accessible: Better Layout with HTML - This Dot Labs
In this article, I'm going to teach you how to use the HTML tags <div> , <section> and <article> , and how they...
Read more >A Responsive Accessible Table - Adrian Roselli
... </table> </div> <p> Note that this is an <em>accessible</em> (keyboard and screen reader) responsive (width and print) table. You can <a ...
Read more >HTML: A good basis for accessibility - Learn web development
You should now be well-versed in writing accessible HTML for most ... One of the best accessibility aids a screen reader user can...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@jooyoungseo fixed 🙂
Okay we will revert that change