[Improvement] Improve accessibility for screen reader users

[Neurrone]

• Insomnia Version: latest, 6.4.3
• Operating System: Windows 10 1809__

Insomnia works fairly well out of the box, since most elements read correctly, but there are some things that could be improved.

All testing done with the NVDA screen reader.

Offscreen content is still visible to screen readers

There is some content that is visually hidden that still shows up for me with NVDA. After the preview pane that shows the received response, I'm seeing the following:

1. A <h2>loading</h2>, followed by a "cancel request button"
2. Some sort of find dialog that shows "No match :(" if no matches are found. This field also keeps stealing keyboard focus periodically, making it harder to use the app.
3. Some extra information about recently received responses, e.g "The request has succeeded. 1203.000 milliseconds Read 73.4 KB Content"

Contents of editable fields can't be read

Nothing is announced when using the arrows while moving about through editable fields such as when entering url, or when reading the received response, which looks like a problem caused by how CodeMirror uses the DOM

[welcome[bot]]

👋 Thanks for opening your first issue! If you're reporting a 🐞 bug, please make sure
you include steps to reproduce it. If you're requesting a feature 🎁, please provide real
use cases that would benefit. 👪

To help make this a smooth process, please be sure you have first read the
contributing guidelines.

[gschier]

Thanks for taking the time to write this up! I will add aria-hidden attributes to the hidden content right now since that is straightforward.

For the editable fields, we might be blocked on this CodeMirror issue: codemirror/codemirror5#4604

[Neurrone]

Since this offscreen content is meant to b hidden for everyone, i suggest using the hidden attribute instead. There is a recemt firefox patch that fixes the code mirror issue. Will look for it

…

Sent from my iPhone

________________________________ From: Gregory Schier <[email protected]> Sent: Thursday, April 18, 2019 6:09 AM To: getinsomnia/insomnia Cc: Dickson Tan; Author Subject: Re: [getinsomnia/insomnia] [Improvement] Improve accessibility for screen reader users (#1436) Thanks for taking the time to write this up! I will add aria-hidden attributes to the hidden content right now since that is straightforward. For the editable fields, we might be blocked on this CodeMirror issue: codemirror/codemirror5#4604<codemirror/codemirror5#4604> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#1436 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AD5VPGTR6QKU2Y4MSI4OBM3PQ6NYVANCNFSM4HF2PREA>.

[gschier]

Ah, thanks! I didn't know about the hidden attribute.

[Neurrone]

@gschier thanks for being willing to help with this.

forgot to also mention that display: none would have worked too. See this article on hiding content for more info.

Pending CodeMirror 6 which should fix the editor, there is a workaround implemented in Firefox now to allow codemirror editors to work - this is the MR introducing the change and the associated tracking bug. This works by loading code that adds a new input style which has an actual editable field that screen readers can keep track of, and using it when configuring CodeMirror.

[zersiax]

I just had a play with the latest Insomnia as well. While I haven't quite found the issues @Neurrone describes, I did find a number of controls that aren't labeled or could use some ARIA love in the request creation UI:

• The HTTP VERB selector doesn't currently indicate that it can be expanded. It just lists as a button with the label "GET" which can be anything really. Adding aria-expanded to this and toggling it with JS when it toggles would already fix this.
• Various buttons in, for example, the headers tab, as well as various edit fields currently have no label that screenreaders can immediately discover. If there are labels in the UI, aria-labeledby="your_element"here" would already fix this issue. If not, consider adding labels, or add aria-label="blah" to controls that currently only have an icon.

Insomnia is already much, much easier to use than some alternatives, and these fixes really are super low-hanging fruit. Me and many others would really appreciate some of these things getting fixed.
As for the CodeMirror input fields, the last I've heard on that is that the new version would address accessibility concerns, but it has been a while since I've heard about any progress on that front. I'll go check on that after I'm done here :-) For an anternative, Monaco might be an option which is significantly more accessible, but I realize that isn't exactly a small ask :)

[zersiax]

Plaintive bump? :)
@gschier I added some feedback on this issue two weeks ago, just making sure you saw it? :)

[ajtran303]

@zersiax @gschier

Hi y'all! I would be willing to work on this.

[zersiax]

@ajtran303 good to hear, do you need anything info or testing-wise to be able to? :)

[ajtran303]

@ajtran303 good to hear, do you need anything info or testing-wise to be able to? :)

@zersiax I will keep you updated. I just made a fork of this repo and will learn where the relevant code lives.

I have followed the discussion about adding ARIA labels to the UI.

But I don't quite understand about the previous comments about CodeMirror.

[zersiax]

@ajtran303 Versions of CodeMirror that aren't the most recent v6 suffer from an accessibility issue that makes screenreaders unable to properly read the contents of the editor, which makes working with those editors to look at responses and fill in request params extremely annoying. I have no idea if CodeMirror is still even being used , but if so, that will likely mean the edit fields are still not properly readable. The only way is to copy-paste the contents out of the field and into a notepad window or similar, which is a bit of a productivity hit.

[ajtran303]

Hey @zersiax so there has been a UI update since I have last used this client. #3183 #3178

I think I have figured out how to address the issue of adding aria-expanded attributes to the drop-down components but overall I feel discouraged now since there are even more navigation problems with the app.

I've been searching for an accessible HTTP client that I can comfortably recommend to people to download and use and I'm not sure if I will recommend Insomnia anymore. In the meantime, I can write down instructions for how to try out my branch and navigate to the parts of the app that have drop-downs -- can you test to check if the aria-expanded attribute is helping to indicate that there is a drop-down?

[thgcode]

For the code editor issue, I found a patch on Mozilla that apparently fixes it (https://bugzilla.mozilla.org/show_bug.cgi?id=919711), maybe this could be incorporated on Insomnia with a setting for testing?

[sevapopov2]

Hello all,
I am new Insomnia user and I'd like to say that yes, it is much more accessible than analogs with screen readers. But I have issues with design documents:
It seems like there is no way to switch between specs, debug and test tabs with NVDA enabled after a Design Document creation. There are no links that labeled like these tabs names or elements that have the control as tabs. As far as I understand tablist and tab aria roles should be implemented for these tab switchers, but please correct me if I am wrong.
Should I create a new issue for that or it can be discussed here?