0

Problem statement: I have a web page which has widgets on top of it (basically these are injected using JavaScript into the web application). I would like to know if we can find any accessibility violations (WCAG 2.0) in my widgets.

Most of the tools available in the market are capable of scanning through the browser content and give a report of the violations as per WCAG 2.0 (A, AA, AAA).

So I'm specifically looking for a tool which can tell me the violations happening in widgets which are actually not part of web page itself. They are injected into the web application through JavaScript injection.

Super Jade
  • 5,609
  • 7
  • 39
  • 61
Sunil
  • 136
  • 2
  • 12
  • 2
    It sounds like what you are attempting to say is that these "widgets" are not part of the HTML source code, but they are part of the DOM. This shouldn't be a problem for accessibility tools. What type of behavior are you attempting to test here? – Josh Dec 03 '19 at 17:04
  • Thanks for the reply Josh. Basically at whatfix we integrate our widgets in to our customer sites by JS injection. Since we don't have customer application code access we take this approach. As per the regulation requirement these widgets needs to be WCAG compliance. Basically I'm looking for the audit of the Widgets which are injected as
    sections in the webpage. My hunch is, all the tools will load the page and scan the content. By that time the injection would not have happened so it is not able to find the injected widgets even though it is part of the DOM.
     – Sunil Dec 04 '19 at 04:12

2 Answers2

1

I would recommend using the Wave tool:

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

The widget should still be able to capture errors if something is inject to the website since the wave tool only triggers the scan once you initiate it.

If it's an iframe, you can possibly visit the iframe link directly and run the wave tool on the iframe URL page.

However, please note that it is a tool so it can still fail or show some false positives. Manual auditing for accessibility is always recommended.

Gcamara14
  • 510
  • 4
  • 14
  • Gcamara14 : I did try Wave extension. Since our widgets are injected into the webpage, it becomes part of webpage once the main page loads. Basically we inject it after the end user application page loads. Now, with tools like wave, when I try to do Audit, it loads the page and do auditing, since by then my injection is not done, wave tool is not identifying these injected widgets. That's my guess. – Sunil Dec 04 '19 at 04:15
0

There is a plugin called Axe - Web Accessibility Testing for Google Chrome.

You can run the audit at any particular point, so as long as you run it after the widgets have initialised it will work.

If you experience issues testing with this tool then there is something actually preventing those widgets being accessed in the first place as I have used this for numerous projects with dynamically loaded content without issue.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • 1
    Looks like this is useful when I use it in firefox browser and able to give useful information about the contents loaded in the dynamic widgets. Thanks Graham. – Sunil Dec 10 '19 at 02:48