[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?

  • From: <timothyjb310@xxxxxxxxx>
  • To: <program-l@xxxxxxxxxxxxx>
  • Date: Mon, 17 Jan 2022 13:14:04 -0800

Hi,

 

thanks for the tips. I will have to check out advanced rest client. My problem 
is that my work restricts which applications can be used internally. I work for 
JPMorgan Chase, and as a bank security is a top priority. We have a software 
repository from which we can download software that is guaranteed to be safe to 
use. Until the software is reviewed and added to the list of safe applications 
to download, I am unable to use it. This has made my life difficult on more 
than one occasion since the firm starts pushing certain applications for 
developers to use, and sometimes those applications are not very accessible. 
Command line tools are really my only option for work that are accessible for 
http clients.

 

I am a full stack software engineer using Spring Boot (java) for the backend, 
and angular for the front-end. Front end work is hard since I always have to 
work with a teammate if styling needs to be done, but it works. I actually did 
a presentation to my team on accessibility coding practices, however even 
before that I have encouraged other members of my team to be more aware of 
accessibility when writing front end code. My team encourages everyone to be a 
full stack engineer. Although we all have preferences, it does make it easier 
to pick up stories since any of us can pick up any story theoretically. I have 
done my best to push accessibility even outside my team. I have been talking 
with managers about possibly doing a hackathon where I would give a talk on 
writing accessible code, and then give the teams the time and chance to look 
through their own code to fix accessibility bugs, test NVDA, play with Axe and 
color contrast tools, etc… It is something that I hope to do in the future, and 
my managers seem to be open to the idea.

 

I would recommend learning html at least, and learning about aria. This will 
only make you a stronger developer, and help you to be able to articulate the 
UI issues that you are having to the front end team. Perhaps you may even 
become a consultant for the front end team to make things more accessible. Once 
developers learn about accessibility, a lot of time they are receptive to 
learning, or getting help so that their code is accessible to more people. That 
is just my limited experience though. If you are in the United States, digital 
access for all is law, and this is something that is an excellent lever to use 
to push accessibility for your applications that you work with. Fortunately, as 
developers, we have far more influence than as just users, Especially if you 
have direct access to the code. The hardest part in my experience is convincing 
product owners that accessibility is important. A developers time is valuable, 
and product owners know that, so they are wary of letting developers work on 
anything that is not strictly pushing the app forward. Accessibility does not 
change anything for most users. When it comes to dealing with the business side 
of things, I tend to approach accessibility from a legal aspect. I help build 
an internal  search engine for lawyers for JPMorgan, so my argument is always, 
what if Chase hires a blind lawyer and they have to use our application. Our 
application better be accessible, because if it is not they have the right to 
sue, and as a lawyer, they will know how to sue us very well :).

 

Timothy Breitenfeldt

 

From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx> On Behalf 
Of hamidreza abroshan
Sent: Monday, January 17, 2022 12:40 PM
To: 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 Timothy for your brilliant solutions!
About screen reader, I'm using nvda too.
Accessibility is not a priority of this company and I'm not familiar with the 
front end very much, and I only know a little bit of html.
But the bigger problem is that I was hired as a back end developer and If I 
want to do these things, I need more time and should create a task in jira for 
that.
Are you working as a back end developer?
How did you convince them to put more time on accessibility?
I would be glad if you provide info that helps me make the app more WCAG 
compliant.
About http requests, I'm using firefox .
I think you are familiar with copying requests within firefox, but I explain 
that it may be useful for someone.
As you know, pressing F12 opens Firefox dev tools. and will track every request 
and response from now on.
Here, if you press Nvda+Space, you can easily get Http requests info.
if you press ctrl+home, you will find some buttons regarding various tabs of 
the dev tools and the network is selected by default.
By pressing arrow down key, you can find some buttons to filters some requests 
like images, html pages and so on and by pressing t, you can finde table that 
shows list of requests and responses.
If you press enter on any Http request and press applications key and open 
coppy sub menu, you can coppy request, request headers, post data, response 
headers and so on.
If you press enter on any Http request and press ctrl+end, You can read it's 
details here. Reading these info is a little bit harder than copying them.
If your data is json, press on raw data and hear press ctrl+end and then space.
You can easily navigate json content.
But for reading headers, You should read them from the treeview above the json 
editor by navigation mode.
I highly recommend to copy the data because it is much simpler.
Now, it's ready to be pasted on any rest client like advance rest client.
I'm recommend to use Advanced rest client instead of scripting.
I can say it is fully accessible.
Although scripting is fun, it is time consuming.
Thanks Timothy  for your time and sharing your great experiences.
Best.

 

On Tue, Jan 18, 2022 at 12:02 AM hamidreza abroshan 
<hamidreza.abroshan@xxxxxxxxx <mailto:hamidreza.abroshan@xxxxxxxxx> > wrote:

Travis,
The idea of macro is amazing!

I'm familiar with selenium and will search more about that and if you have more 
info, I'll be very glad to hear from you.

Thanks!

 

On Mon, Jan 17, 2022 at 11:59 PM hamidreza abroshan 
<hamidreza.abroshan@xxxxxxxxx <mailto:hamidreza.abroshan@xxxxxxxxx> > wrote:

Thanks all, these are very helpful recommendations and I 'll try to use all of 
them as much as possible.
I don't know how to Thank you! You are the best friends that someone can find 
in a mailing list!
I'll reply to all emails by sending an order.

 

On Mon, Jan 17, 2022 at 10:08 PM Dzhovani Chemishanov 
<dzhovani.chemishanov@xxxxxxxxx <mailto:dzhovani.chemishanov@xxxxxxxxx> > wrote:

Hi,
my idea is not to run it in debug mode, but to have logs at debug
level. Or whatever way you can grap the production logs. Debug logs
are something totally different from running the application with
debug breakpoints.
If you don't have access to the production logs, you can hope that
either you can find the integration tests of the microservice
responsible and get an example from there or that you can reconstruct
the expected payload from the types of the variables in the handler.
If none of these works, you can try to reverse engineer the source
code of the ui and try to find what data could be put in the http
request.
Finally, you can ask a colleague to give you a hand with the payload.
HTH,
Dzhovani

On 1/17/22, timothyjb310@xxxxxxxxx <mailto:timothyjb310@xxxxxxxxx>  
<timothyjb310@xxxxxxxxx <mailto:timothyjb310@xxxxxxxxx> > wrote:

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 <mailto:program-l-bounce@xxxxxxxxxxxxx>  
<program-l-bounce@xxxxxxxxxxxxx <mailto:program-l-bounce@xxxxxxxxxxxxx> > On
Behalf Of hamidreza abroshan
Sent: Monday, January 17, 2022 8:22 AM
To: program-l@xxxxxxxxxxxxx <mailto:program-l@xxxxxxxxxxxxx
Cc: travis@xxxxxxxxxxxxxx <mailto: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
<mailto: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>  
<mailto:karl-otto@xxxxxxxxxx ;<mailto:karl-otto@xxxxxxxxxx> >
https://mawingu.se

Den 2022-01-17 kl. 15:37, skrev travis@xxxxxxxxxxxxxx 
<mailto:travis@xxxxxxxxxxxxxx
<mailto:travis@xxxxxxxxxxxxxx ;<mailto:travis@xxxxxxxxxxxxxx> > :
SO are you saying the web application is inaccessible? Or the dev tools
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
<mailto:program-l-bounce@xxxxxxxxxxxxx ;
<mailto:program-l-bounce@xxxxxxxxxxxxx> >  <program-l-bounce@xxxxxxxxxxxxx 
<mailto:program-l-bounce@xxxxxxxxxxxxx
<mailto: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>  
<mailto: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> >
<mailto: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> >
    <mailto: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> >
    <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> >
    <mailto: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> >
    <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> >
    <mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx
<mailto:program-l-request@xxxxxxxxxxxxx ;
<mailto:program-l-request@xxxxxxxxxxxxx> > > with the Subject:- faq



--

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


** To leave the list, click on the immediately-following link:-
** [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
** 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> ?subject=faq]
** or send a message, to
** program-l-request@xxxxxxxxxxxxx <mailto:program-l-request@xxxxxxxxxxxxx>  
with the Subject:- faq



-- 

hamidreza



-- 

hamidreza



-- 

hamidreza

Other related posts: