<img src="first.jpg" alt="first" width="500" height="600" />
<img src="second.jpg" alt width="500" height="600" />
<img src="third.jpg" alt="third" width="500" height="600" />
<img src="fourth.jpg" alt width="500" height="600" />
<img src="fifth.jpg" alt="" width="500" height="600" />

find image tags with alt attribute without double quotes and replace with empty double quotes for ADA accessibility, I need to jquery to find second and fourth img tags replace with alt="" just like fifth. This is sample html markup, a page can have this instances 10 or 20 instances, all these should be replaced with alt=""

I tried this below didn't work

$(function() {
  $("img").each(function() {
    if (this.alt) {
      console.log(this.alt);
    } else {
      $(this).attr('alt', "");
    }
  });
});

When I use VoiceOver of Mac to navigate the website using the keyboard command (cmd+shift+left/right arrows), the focus remains on a button. It is there until another button is encountered. The issue is only in Chrome and Microsoft Edge browsers. The above-mentioned scenario is working well for Safari and Firefox browsers. When a button gets the focus and VoiceOver moves to other text elements, due to the focus of the button, the voiceover is again navigating back to the focused button and iterating through the elements that are already read.

I tried "focusin","focusout" event listeners to set aria-hidden / tabIndex values accordingly. I also tried setting the focus of elements using CSS, making box-shadow:none, outline:none, but that just makes the focus not visible.

I am currently making a website ADA Compliance. But confused to find best tools to check Accessibility score.

1. What is the best tool/website to check the web accessibility score(ADA)?

2. Is it possible to achieve 90%+ accessibility score?

Is there an Accessibility tool that can scan images of a design for a website and compare color contrast on elements on the page? I am interested in an image scan, not an actual website scan, so this can be done before any coding work. I simply provide multiple images, the tool will scan them for ADA purposes and score.

I have form

<form onsubmit="return false;" class="city-form-inner">
          <div id="ember506" class="wrap-autocomplete ember-view">  <label for="search-locations-address">Enter ZIP, State or City</label>
    <div class="autocomplete-input">
      <input aria-label="Enter ZIP, State or City" role="combobox" aria-expanded="false" type="text" name="search-locations-address" id="search-locations-address" class="form-control ember-text-field ember-view ui-autocomplete-input" autocomplete="off">
    <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete custom-autocomplete ui-front" role="listbox" style="display: none;"></ul></div>
    <div role="status" aria-live="polite" class="autocomplete-status">0 results are available, use up and down arrow keys to navigate</div>
    </div>
          <input type="button" value="Find Stores" class="btn-blue submit" data-ember-action="" data-ember-action-513="513">
        </form>

and have same form in modal window, after run ARC toolkit test I get error about duplicate labels, I tried aria-hidden aria-disabled for form not in modal but it didn't help^aria-labelledby for input and nothing help or started saying the wrong text, can please hint me?