Each issue show the related markup clearly, hitting ‘inspect node’ jumps right back into the elements tab of DevTools highlighting the element.

aXe rates the impact of a11y issues differently to WAVE, in this example the alt-text issue is critical, the tabindex issue is serious and the others are moderate. It’s worth noting that this presentation compells me to resolve all of the violations because it tells me there’s nine of them, rather than WAVE telling me there’s one error and nine alerts.

aXe also lists things for review, which don’t specifically cause a violation of accessibility guidance but may need to be considered based on the actual context of the element within the UI. The galaxy image behind our sign-in UI is actually a video which doesn’t particularly need captions or an audio-description track, but perhaps it needs marking as purely presentational only. I can’t do this yet because we use a third-party library to inject the <video> element, but it’s something for me to review in the future.

Interestingly, aXe is smart enough to know that the blue box containing our form has opacity (0.9) with an image behind it. The colour contrast issues are flagged because the tool can’t guarantee the background colour would allow the required contrast level of the foreground text to be met (it does, but it’s useful to be reminded to check).

WCAG Accessibility Audit Developer UI

It only checked four things, and passed them all. In the bin with you.