GoogleChrome / accessibility-developer-tools

This is a library of accessibility-related testing and utility code.
Apache License 2.0
2.28k stars 363 forks source link

How does one Restrict the scope of the Audit? Not clear from this Wiki. #290

Closed ssjjcc closed 8 years ago

ssjjcc commented 8 years ago

This is a dumb question, but looking at the README, it mentions that you can restrict the scope of the entire audit to a subsection of the page. It says that to do this, all you do is redefine the configuration like this:

var configuration = new axs.AuditConfiguration(); configuration.scope = document.querySelector('main'); // or however you wish to choose your scope element axs.Audit.run(configuration);

However, I couldn't understand from the README as to where you actually do this. In the tools/runner/audit.js file? In the dist/js/axs_testing file? If anyone has experience with this, please let me know. Thanks!

jdan commented 8 years ago

Hey @ssjjcc, not a dumb question at all.

Typically you'll use this library by injecting axs_testing.js into a page, which exposes a global axs object. After this you'll call axs.Audit.run() on the page, so around here is where you'll specify a custom configuration.

Here's a sample implementation. If the author of that library wanted to scope the audit they would do so around line 59. Does that clear things up?

ssjjcc commented 8 years ago

Sorry, finger slipped over the close issue button there.

Yes, that makes a lot of scene. Looks like most of the problem revolved around not including the needed dependencies, like 'system' and 'webpage'. Thanks @jdan! With the audit now being restricted, that does open up my second question..

I'm able to simply put html, head, or body in the querySelector. Example: configuration.scope = document.querySelector('main'); .However, these are one time instance html tags. How do I put in unique tags so I can test them, like <div id=banner> or <div class=mobile-nav>?

Timetrax commented 8 years ago

I can't understand what you read - I speak gearman, and i only had a smartphone. Sabine Stein Am 30.06.2016 19:57 schrieb "Scott Christensen" notifications@github.com:

This is a dumb question, but looking at the README, it mentions that you can restrict the scope of the entire audit to a subsection of the page. It says that to do this, all you do is redefine the configuration like this:

var configuration = new axs.AuditConfiguration(); configuration.scope = document.querySelector('main'); // or however you wish to choose your scope element axs.Audit.run(configuration);

However, I couldn't understand from the README as to where you actually do this. In the tools/runner/audit.js file? In the dist/js/axs_testing file? If anyone has experience with this, please let me know. Thanks!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/accessibility-developer-tools/issues/290, or mute the thread https://github.com/notifications/unsubscribe/ALcqPsWEpbv-qdyYmaj1QQ0zlgoX9RsEks5qRAMfgaJpZM4JCawZ .

ssjjcc commented 8 years ago

Oh, sorry! I just had a question about restricting the Audit. I wanted to know what you are supposed to put into document.querySelector( ); so that the Audit will run inside of unique html tags? Like, how can you focus on<div id=banner> or <div class=mobile-nav>, rather than just putting 'div' into the parenthesis?

jdan commented 8 years ago

@ssjjcc Great question :)

The text passed to document.querySelector represents a CSS query selector, the types of rules you would normally enter into a stylesheet to target specific items.

To point to something by id, you prefix the string with a hash (in your case, "#banner"). For classes, you use a period (for example, ".mobile-nav").

Does that make sense?

ssjjcc commented 8 years ago

Yep, that's exactly the info I needed and now it works like a dream. I'll go ahead and close this issue for real because you answered all of my questions regarding Audit restriction. Again, thanks a bunch!