Skip to main content

Running Authenticated Scans in Accessibility Monitor

Many websites have pages that require authentication. UserWay's Accessibility Monitor supports different types of authentication.

Some pages live behind a login — a staging site, an internal portal, or a secure customer area. Accessibility Monitor can sign in for you and run authenticated scans, so accessibility testing doesn't stop at the login screen.
​

Choose your authentication method:

Accessibility Monitor supports three methods. Pick the one that matches how your site logs in:

Method

Best for

#basic

A browser popup asks for username + password

#form

A normal login page with email/username + password

#scenario

Multiple steps, MFA, or extra clicks

💡 Quick guide: Browser popup → Basic. Normal login page → Form. Several steps or MFA → Scenario.

1. Basic Authentication

Use this for sites protected by HTTP Basic Authentication — the kind that pops up a small browser sign-in box.

Try it with this test site:

Field

Value

URL

https://jigsaw.w3.org/HTTP/Basic/

Username

guest

Password

guest

Steps

  1. Open the Basic Authentication section.

  2. Enter the URL, username, and password.

  3. Click Start Scan:

That's it — no selectors needed. ✅

2. Form Authentication

Use this when your site has a standard login form (email/username + password on one page).
​

What you'll need

  • Login URL

  • Username or email

  • Password

  • CSS selectors for: username field, password field, and submit button

💡 Tip: If you can, give your login fields and button unique IDs. It makes setup far more reliable.

How to find a CSS selector

A selector is just how the scanner "points at" an element on the page.

  1. Right-click the field on your login page → Inspect.

  2. In DevTools, read the element's id, name, or attributes.

  3. Use that value as the selector (e.g. an id="email" becomes #email).

New to selectors? Here's a friendly primer: CSS Selectors – W3Schools.
​

Example — https://manage.userway.org

Element

Selector

Email field

#email

Password field

#password

Submit button

button[type="submit"]

Enter these into the Form Authentication settings, and Accessibility Monitor will sign in automatically before each scan:

3. Scenario Authentication

Use this when a simple form isn't enough — for example:

  • Login has multiple steps (email first, then password)

  • Multi-factor authentication (MFA) is involved

  • You need to click extra buttons or dialogs

  • The page needs custom JavaScript interactions

What you'll need

  • Comfort reading CSS selectors

  • Basic JavaScript knowledge

  • Familiarity with the scenario commands below

The commands (only 4 to learn)

Command

What it does

clickOnSelector('selector')

Clicks an element.

typeInSelector('selector', 'text')

Types text into a field.

waitForSelector('selector')

Waits until an element appears (great for pages that load dynamically).

waitForTimeout(ms)

Pauses for a set time. Use it whenever the page changes.

📎 Reference: Common CSS selectors

What you want

Selector

Element by ID

#login

CSS class

.login-button

Element type

button

Type + attribute

button[type="submit"]

Input by type

input[type="email"]

Input by name

input[name="email"]

Input by ID

input[id="email"]

Button by ID

button#login

Button by class

button.login-button

Button by name

button[name="login"]

Button by data attribute

button[data-testid="login-button"]

Input by data attribute

input[data-testid="email"]

Element by ARIA label

button[aria-label="Sign in"]

Link by href

a[href="/login"]

Link by class

a.login-link

Checkbox

input[type="checkbox"]

Radio button

input[type="radio"]

Textarea

textarea

Dropdown

select

Placeholder text

input[placeholder="Email"]

Child element

form button

Direct child

form > button

Multiple classes

.btn.primary

📎 Reference: Common usage examples

Goal

Example

Enter an email

typeInSelector('input[type="email"]', 'user@example.com');

Enter a username

typeInSelector('#username', 'john.doe');

Enter a password

typeInSelector('input[type="password"]', 'Password123');

Click Sign In

clickOnSelector('button[type="submit"]');

Click by data attribute

clickOnSelector('button[data-testid="login-button"]');

Click by ARIA label

clickOnSelector('button[aria-label="Sign in"]');

Wait for password field

waitForSelector('input[type="password"]');

Wait for dashboard

waitForSelector('#dashboard');

Pause before next step

waitForTimeout(2000);

Click a checkbox

clickOnSelector('input[type="checkbox"]');

Click a login link

clickOnSelector('a[href="/login"]');

Fill a search field

typeInSelector('input[name="search"]', 'Accessibility');

Full example — https://login.live.com

This flow enters the email, continues, waits for the next screen, then enters the password and submits: 

// Enter the email address
typeInSelector('input[type="email"]', 'test@test.com');

// Click the "Next" or "Continue" button
clickOnSelector('button[type="submit"]');

// Wait for the password field to load
waitForTimeout(1000);

// Enter the password
typeInSelector('input[type="password"]', 'testing');

// Click the "Sign In" button to complete authentication
clickOnSelector('button[type="submit"]');

Paste your scenario below the Login URL, and Accessibility Monitor will run it before scanning:

Need more help? Contact the UserWay Support Team — we're here to assist you.
​Get in touch with UserWay Support.

Related Articles
Did this answer your question?