Verify accessibility features on the login page

Preconditions (2)

Step 1: Navigate to the login page URL

Step 2: Check that the email input field has a proper label associated

Step 3: Check that the password input field has a proper label associated

Step 4: Verify that the login button has an accessible name

Step 5: Use keyboard only to navigate through the email field, password field, and login button

Step 6: Verify that focus is visible and moves in a logical order

Step 7: Check that all images have alt text

Step 8: Use a screen reader to verify that all elements are announced correctly

✅ Expected Result: All form fields have proper labels, the login button has an accessible name, keyboard navigation works with visible focus in logical order, images have alt text, and screen reader announces all elements correctly.

Automation Requirements - Selenium with Python

Assertions Needed:

Email and password fields have associated labels

Keyboard focus moves logically and is visible

Images have alt attributes

Screen reader text matches expected labels

Best Practices:

Use explicit waits for element visibility

Use semantic locators like By.ID or By.CSS_SELECTOR with aria-label or for attributes

Avoid brittle XPath selectors

Use Page Object Model to separate page structure from test logic

Validate accessibility attributes directly from DOM

Automated Solution

Testing Fundamentals

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import unittest

class LoginPageAccessibilityTest(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Chrome()
        self.wait = WebDriverWait(self.driver, 10)
        self.driver.get('https://example.com/login')

    def test_accessibility(self):
        driver = self.driver
        wait = self.wait

        # Wait for email input and check label
        email_input = wait.until(EC.visibility_of_element_located((By.ID, 'email')))
        email_label = driver.find_element(By.CSS_SELECTOR, 'label[for="email"]')
        self.assertTrue(email_label.is_displayed(), 'Email label is not displayed')
        self.assertTrue(email_label.text.strip() != '', 'Email label text is empty')

        # Wait for password input and check label
        password_input = wait.until(EC.visibility_of_element_located((By.ID, 'password')))
        password_label = driver.find_element(By.CSS_SELECTOR, 'label[for="password"]')
        self.assertTrue(password_label.is_displayed(), 'Password label is not displayed')
        self.assertTrue(password_label.text.strip() != '', 'Password label text is empty')

        # Check login button accessible name (aria-label or text)
        login_button = wait.until(EC.visibility_of_element_located((By.ID, 'login-button')))
        accessible_name = login_button.get_attribute('aria-label') or login_button.text
        self.assertTrue(accessible_name.strip() != '', 'Login button accessible name is empty')

        # Check images have alt attribute
        images = driver.find_elements(By.TAG_NAME, 'img')
        for img in images:
            alt_text = img.get_attribute('alt')
            self.assertIsNotNone(alt_text, 'Image missing alt attribute')
            self.assertTrue(alt_text.strip() != '', 'Image alt attribute is empty')

        # Keyboard navigation test
        # Focus email input
        email_input.click()
        self.assertEqual(driver.switch_to.active_element, email_input, 'Focus is not on email input')

        # Press Tab to move focus to password input
        from selenium.webdriver.common.keys import Keys
        email_input.send_keys(Keys.TAB)
        self.assertEqual(driver.switch_to.active_element, password_input, 'Focus did not move to password input')

        # Press Tab to move focus to login button
        password_input.send_keys(Keys.TAB)
        self.assertEqual(driver.switch_to.active_element, login_button, 'Focus did not move to login button')

    def tearDown(self):
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

This test script uses Selenium with Python's unittest framework to automate accessibility checks on a login page.

First, it opens the login page URL in a Chrome browser.

It waits explicitly for the email and password input fields to be visible, then finds their associated labels using the for attribute. It asserts that these labels are visible and have text, ensuring screen readers can announce them.

Next, it checks the login button for an accessible name, either from the aria-label attribute or visible text.

It then verifies all images on the page have non-empty alt attributes, which is important for screen readers.

For keyboard navigation, it simulates tabbing through the email input, password input, and login button, asserting that the focus moves logically and is on the expected element.

The test uses explicit waits to avoid timing issues and semantic locators like By.ID and By.CSS_SELECTOR for maintainability.

Finally, the browser closes after the test.

Common Mistakes - 4 Pitfalls

{'mistake': 'Using hardcoded XPath selectors for labels and inputs', 'why_bad': 'Hardcoded XPath is brittle and breaks easily if page structure changes.', 'correct_approach': "Use semantic locators like By.ID or By.CSS_SELECTOR with attributes like 'for' or 'aria-label'."}

Not using explicit waits before accessing elements

Checking only visible text and ignoring aria attributes

Not verifying keyboard navigation and focus order

Bonus Challenge

Now add data-driven testing with 3 different login page URLs to verify accessibility on multiple environments.

Show Hint