Hi, so I work on a project with only a couple micro services, but have faced
similar problems. I use Google Chrome, and have slowly started to understand
how to use the dev console to help in debugging. I can provide what I know and
have done to read HTTP requests/responses, but like in Firefox, the chrome
console is not easy to use with a screen reader. I know as much as I do from
working with sited teammates. I use NVDA, and am basing all of my instructions
on using NVDA. JAWS may read things differently, and I can not attest to doing
any of this with JAWS.
In terms of working with an inaccessible UI, I understand. It is very
frustrating to be working on a story, but you cannot even test it until you fix
accessibility bugs. However, it does make the app more WCAG compliant, and only
makes your life easier. I tend to just use aria to improve accessibility of the
UI as I go. Eventually things get easier the more fixes you make. I just slip
in these accessibility fixes into the stories I work on, and since I tend to
only fix these bugs using aria, there is no visual change to the screen so
there is no complaints from product owners or anyone else. My team, with my
help, has become more aware of accessibility, and things that can be done to
write more accessible code. One of the big things that I encourage my team to
do, which tends to fix a lot of issues, is to just use HTMl elements as they
are ment to be used. So use the button tag instead of a div or span tag marked
up with a click event, or use a heading tag instead of making the text bigger
and bolding it. With aria, you can fix these easily enough, but it is better to
just use the actual elements as we all know. If you have any questions about
how to go about fixing these bugs and others with aria, let me know.
If you are trying to examine HTTP requests and responses using Chrome, you
first need to open up the web page in question, then press f12. From the top of
the screen, down arrow until you find the network tab and press enter. It is a
tab like element not a link or button, so I have yet to find a quick way to
navigate the tabs. There may be chrome dev tool specific shortcuts that may
help. In newer versions of Chrome, you may need to down arrow to the more tabs
button and choose network from the dropdown, however my version of Chrome does
not have this. It is important that the network tab is open before you test the
feature that you are trying to read the HTTP request/response for. If you are
testing a request that is made when the page loads, then just press f5 to
refresh the page once the network tab is open. To get back to your actual page,
the fastest way I have found is to jump to the address bar using alt+d, and
shift tabbing until you start hearing elements that are from your page. You
should be able to navigate your page as normal. Visually on the screen from
what I have been told, the dev tools window is still open, and is taking up
part of the screen, where the other part of the screen is the site. Navigate to
the feature that is causing you issues, and trigger the request. Once you know
that the request should be sent, do ald+d again to jump to your address bar,
and tab into the dev tools which should still be open. It gets a bit tricky
from here, but I recently figured out how to actually read the requests and
responses, although sometimes it takes some fiddling to get the information you
want. The quickest way I have found to get to the HTTP request/response tree,
is to first navigate to the end of the screen using control+end and then press
shift+x, which should read out the checkbox
“Network panel property page 3rd-party requests check box not checked “
From hear, you should be able to tab three times, which should hopefully on a
good day turn on forms mode for you, place focus on the tree view, and read out
something like
“Network Log Rows: 11, use the up and down arrow keys to navigate and interact
with the rows of the table; Use browse mode to read cell by cell.”
You can use the arrow keys to navigate the tree view, if you want to examine a
request more carefully, expand that request. You can also press enter on it,
which should open the request, and give you some more options to view headers
and the response if you do insert+space to get out of forms mode. I cannot
instruct much beyond this point since I am still trying to find a consistent
method method to get to this information myself. Remember when exploring to try
right clicking on things to see what your options are using shift+f10 or using
your applications key.
Beyond getting the request from the UI, you may need to send it to an API. As I
am sure you know, postman is not accessible. It is a rather frustrating thing
for blind full stack developers, but there are alternatives. I personally use
httpi, which is a python based command line tool like curl, but way easier to
use. I have struggled until recently using httpi since my company requires some
additional flags and information to be used to authenticate, but it works well
enough. We use JWT authentication, so I wrote a batch script using httpi and jq
to request a token with one short command. JQ is a command line tool also
python based, which can parse json. I just added this to my path. Then I can
just run the command
Dev-token | clip
To request the token, and pipe it directly into my clipboard. Where dev-token
is the name of my batch file that I added to my path. I intend to create other
such batch files for our other environments, such as uat-token, and prod-token,
I have just not done it yet. This is assuming you are using windows. Anyways, I
save specific requests that I tend to make in batch files that I can run later.
I love scripting my development environment to make my life easier, especially
as a blind developer, since we tend to have to do things differently and
sometimes in a longer way than our sited peers. A quick tip that I recently
used with httpi is that if you assign your token to the environment variable
JWT_AUTH_TOKEN, and you use the jwt httpi plugin, you can make requests without
sending the token. If you want to know more about this, let me know.
Hope this helped,
Timothy Breitenfeldt
From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx> On Behalf
Of hamidreza abroshan
Sent: Monday, January 17, 2022 8:22 AM
To: program-l@xxxxxxxxxxxxx
Cc: travis@xxxxxxxxxxxxxx
Subject: [program-l] Re: If you had to work on a web project with lots of
microservices that does not have an accessible ui, How do you find which part
of the code needs change or has bug?
Devtools in firefox is accessible but a little bit tricky and you can
completely coppy http response, headers, and request and it's headers.
If you want, I can record quicke tutorial for that.
The trick is that you should use Nvda's focus mode instead of browse mode.
But my problem here is that The web UI is not accessible.
In some Dev companies, the test team is responsible for providing the payload
and should tell you which micro service has bugs, but here they don't have such
rules.
How can I automate with selenium if I can't browse some parts of the page?
Best.
On Mon, Jan 17, 2022 at 7:34 PM Karl-Otto Rosenqvist <karl-otto@xxxxxxxxxx
<mailto:karl-otto@xxxxxxxxxx> > wrote:
Hi!
My experience is that the dev tools in Microsoft Edge is hard to use
with NVDA. Perhaps it's because I don't have enough experience and
knowledge of where to look.
I'm partly sighted and have tried to inspect elements but I feel that
it's very hard to do with a screen reader. Perhaps it is easier if you
know the keyboard shortcuts to jump between the dev tools window/pane
and the page itself?
Perhaps it's a similar problem that hamidreza abroshan experiences?
Regards
Karl-Otto
Karl-Otto Rosenqvist
MAWINGU
Orgnr: 750804-3937
0701- 75 98 56
karl-otto@xxxxxxxxxx <mailto:karl-otto@xxxxxxxxxx>
https://mawingu.se
Den 2022-01-17 kl. 15:37, skrev travis@xxxxxxxxxxxxxx
<mailto:travis@xxxxxxxxxxxxxx> :
SO are you saying the web application is inaccessible? Or the dev tools** To leave the list, click on the immediately-following link:-
are?
If the web application is inaccessible that seems a whole problem on its
own.
I guess if you really wanted you could try to automate executing steps
in the web application using something like Selenium. But it sure sounds
like an uphill battle if the application’s UI is inaccessible to that
extreme.
*From:* program-l-bounce@xxxxxxxxxxxxx
<mailto:program-l-bounce@xxxxxxxxxxxxx> <program-l-bounce@xxxxxxxxxxxxx
<mailto:program-l-bounce@xxxxxxxxxxxxx> >
*On Behalf Of *hamidreza abroshan
*Sent:* Monday, January 17, 2022 7:12 AM
*To:* program-l@xxxxxxxxxxxxx <mailto:program-l@xxxxxxxxxxxxx>
*Subject:* [program-l] Re: If you had to work on a web project with lots
of microservices that does not have an accessible ui, How do you find
which part of the code needs change or has bug?
Thanks Dzhovani,
We are running micro services locally, and can not trigger http requests
from outside.
If I could debug the Micro services that are running on the central
server, the test team and other developers can not use the app because I
put a breakpoint somewhere and the execution stops when it hits my break
point.
Let me explain my problem clearly.
Imagine that you joined a back end team of an app.
You receive a bug that says, "in the second page of customer
registration, when customer details are added, We get 500 server error".
At this point, your fellow sited developer, opens the UI, navigates to
registration, completes the form until gets to page 2, and in page 2,
before hitting that button that sends customer details, opens his
browser dev tools to track http requests and hits that send button.
Now, he can copy the http request and response from dev tools and resend
with any rest client like postman and debug the local app, but if you
were blind, you can not sea the UI, and you can not obtain the payload
that you need to debug the app this way.
I'm asking any alternate solutions that
On Mon, Jan 17, 2022 at 1:39 PM Dzhovani Chemishanov
<dzhovani.chemishanov@xxxxxxxxx <mailto:dzhovani.chemishanov@xxxxxxxxx>
<mailto:dzhovani.chemishanov@xxxxxxxxx ;
<mailto:dzhovani.chemishanov@xxxxxxxxx> >>
wrote:
Hi,
As far as I get your problem, you are unable to trigger an http
request in order to inspect its content. If I get you correctly, debug
log the incoming request on the backend and wait for someone to
trigger it. This is valid if you can fiddle with the handlers and
have access to the raw data of the http request.
HTH,
Dzhovani
On 1/17/22, hamidreza abroshan <hamidreza.abroshan@xxxxxxxxx
<mailto:hamidreza.abroshan@xxxxxxxxx>
<mailto:hamidreza.abroshan@xxxxxxxxx ;
<mailto:hamidreza.abroshan@xxxxxxxxx> >> wrote:
> Hey all,
> I'm working on a java project that has 60 microservices and this
project
> does not have an accessible UI.
> My problem is that when I need to debug this app, I need a
payload to send
> with rest clients, and every one says, "go and get the payload
from UI."
> What do you do in similar situations?
> I need urgent help and appreciate your help.
> Thanks in advance.
>
> --
> hamidreza
>
** To leave the list, click on the immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx>
<mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx> >?subject=unsubscribe]
** If this link doesn't work then send a message to:
** program-l-request@xxxxxxxxxxxxx
<mailto:program-l-request@xxxxxxxxxxxxx>
<mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx> >
** and in the Subject line type
** unsubscribe
** For other list commands such as vacation mode, click on the
** immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx>
<mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx> >?subject=faq]
** or send a message, to
** program-l-request@xxxxxxxxxxxxx
<mailto:program-l-request@xxxxxxxxxxxxx>
<mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx> > with the Subject:- faq
--
hamidreza
