please please fix screen reader accessibility issue

[balajip881]

When i hover on collection , tool tip with ... (more options) is showing up, which is screen reader inaccessible. plz fix it. I am using nvda screen reader.

[rangav]

Hi @balajipbalajip881123, thanks for feedback,

I am not expert in accessibility issues.

Can you let me know what are you expecting in this case? Name of collection on hover?

[balajip881]

Hi,

I have created a collection (test-collection ). I tried to add request to test-collection. For that i have to hover onto test-collection so that tooltip appear.The tooltip is not focusable with keyboard only users. possible fix:

1. Plz add a button beside every collection rather than tooltip. screen reader user can not move focus to ... (more options). or

2. Show more options menu , when user right clicks on collection like in postman.

   3. plz make sure all interactive elements can be accessed by keyboard only (using tabs and arrow marks (up, down, left and right arrow marks on keyboard ).

   For more info about accessibility you can go through WCAG2.1 guidelines (web content accessibility guidelines) . Thank you for trying to help me. please call me in whatsup number so that ican explain clearly. Thank You, Balaji Pentamsetti, mob: +91 8555072557.

On Mon, Feb 14, 2022 at 5:43 PM Ranga Vadhineni @.***> wrote:

Hi @balajipbalajip881123 https://github.com/balajipbalajip881123, thanks for feedback,

I am not expert in accessibility issues.

Can you let me know what are you expecting in this case? Name of collection on hover?

— Reply to this email directly, view it on GitHub https://github.com/rangav/thunder-client-support/issues/467#issuecomment-1038991528, or unsubscribe https://github.com/notifications/unsubscribe-auth/AK7ZRCSUPB547TVTHTMTQJTU3DT2HANCNFSM5OLCGTRA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[rangav]

Thanks @balajipbalajip881123 for the suggestions, will add to roadmap.

[Yeldece]

Hello, thanks for the great idea and the project. I will add a few more request to the original post.

All the ... functions are inaccessible for the screen readers. EG you want to rename a collection, normaly you would click to ... symbol right of the collection name and choose rename. But screen reader can't detect that button.

Also alt z is great, but if you could add a default wordwrap option to the options it would be great, or even simplier follow up VS code's wordwrap choice. Screenreaders aren't happy with wordwrapping enabled.

Rest are accessible enough, thanks again.

[balajip881]

Hi,

We all use file explorer in vscode. screen reader users also use keyboard shortcuts. keyboard navigation in file explorer :

1. ctrl +shift+ e focus on current file . in our case ctrl+shift+r focus on the current request.

   2. left arrow tocollapse and rightarrow to expand the folder. we can also implement the same for our collections and folders.
   3. down arrow and up arrow to navigating the treeof folders or collections.
   4. enter and space to open the file . in our case we can use it to open the request.
   5. rightclick or context menu on key board to open more options menu (collectionmenu or folder menu or request menu).

   In summary if we make it keyboard accessible that almost make it screen reader accessible.

Q1) How to check keyboard accessibility ?

First let us check in file explorer in vscode.please use only keyboard. Do not use a mouse. We should use all functionality with keyboard only. https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html

1.press ctrl+shift+ e . It moves keyboard focus to current file.press up, down, left and right arrow and observe how focus is moving.

2. press space or space on file or folder and check how it is behaving.
3. press context menu on key board ( similar to right click ) and check proper context is opening or not.

Q2)How to implement screen reader accessibility ?

1. First we should check for keyboard boardaccessibility and fix the issues.

2. we can use ARIA authoring practise guide to implement accessible tree.

https://www.levelaccess.com/creating-an-accessible-aria-tree-control/

Q3) How to check screen reader accessibility? NARRATOR (screenreader name) is preinstalled in every windows OS. we can use it to check our implementation. letus use it to observe in vscode file explorer.

1. press windows logo andsearch narrator appand pressit.that will launch narrator.
2. open vscode app. use keyboard shortcuts Ctrl +shift+ e and listen to what screen reader is saying.now you can navigate using upand down arrows to navigate in the tree.observe screen reader output on every keyboard press.
3. you can use other arrows and context menus and enter and space and check proper audio output..

Important :

1. to start or stop narrator press windows key + ctrl+ enter.
2. First let us try to implement keyboard navigation. after that we can add roll as tree and other aria atributes to make more accessible to screenreader users.
3. I tried Postman and other api clientsbut none of them have keyboard accessibility. So i am using axios npm library to check my apis in node js. The SMALL CHANGES that you make in your code will have significant impact on the lives of the people, who are in need of them. Thanks.

Message ID: @.***>

[rangav]

Thanks all for the feedback

[hamidrezaabroshan]

For every item like collections that we have some more options by hovering the mouse, the options should be available when user 's focus moves to that item by context menu that opens up by pressing applications key or shift+F10 key on the keyboard.

[balajip881]

Yes, that works but menu and menu items should be key board accessible one should reach without using mouse

Message ID: @.*** com>

[balajip881]

@rangav @Yeldece @hamidrezaabroshan Is there any update on this issue. please fix it please...