Bird
Raised Fist0
Testing Fundamentalstesting~15 mins

Accessibility testing in Testing Fundamentals - Build an Automation Script

Choose your learning style10 modes available
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
Login button has accessible name
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

Practice

(1/5)
1. What is the main goal of accessibility testing on a website?
easy
A. To improve the website's loading speed
B. To add more images and videos
C. To ensure the website is usable by people with disabilities
D. To increase the number of advertisements

Solution

  1. Step 1: Understand the purpose of accessibility testing

    Accessibility testing focuses on making websites usable for everyone, including people with disabilities.
  2. Step 2: Compare options to the goal

    Only To ensure the website is usable by people with disabilities matches this goal, while others focus on unrelated aspects like speed or content.
  3. Final Answer:

    To ensure the website is usable by people with disabilities -> Option C
  4. Quick Check:

    Accessibility testing = usability for all [OK]
Hint: Focus on users with disabilities for accessibility testing [OK]
Common Mistakes:
  • Confusing accessibility with performance optimization
  • Thinking accessibility means adding more content
  • Ignoring users with disabilities
2. Which HTML attribute is important for accessibility to describe images?
easy
A. alt
B. title
C. src
D. href

Solution

  1. Step 1: Identify attribute for image description

    The alt attribute provides text descriptions for images, helping screen readers.
  2. Step 2: Check other attributes

    title shows tooltips, src is image source, href is for links, none describe images for accessibility.
  3. Final Answer:

    alt -> Option A
  4. Quick Check:

    Image description attribute = alt [OK]
Hint: Use alt for image descriptions to help screen readers [OK]
Common Mistakes:
  • Using title instead of alt for image description
  • Confusing src with description
  • Missing alt attribute entirely
3. Consider this HTML snippet:
<button>Click me</button>

Which accessibility improvement is best?
medium
A. Remove the button element
B. Add aria-label="Submit button" to the button
C. Change button text to "" (empty string)
D. Add style="color: white;" only

Solution

  1. Step 1: Understand button accessibility

    Buttons need clear labels for screen readers; adding aria-label clarifies purpose.
  2. Step 2: Evaluate other options

    Empty text or removing button removes meaning; styling alone doesn't improve accessibility.
  3. Final Answer:

    Add aria-label="Submit button" to the button -> Option B
  4. Quick Check:

    Use aria-label for clear button description [OK]
Hint: Use aria-label to describe buttons clearly [OK]
Common Mistakes:
  • Leaving buttons unlabeled
  • Removing interactive elements
  • Relying only on visual styles
4. You test a form and find keyboard users cannot reach the submit button. What is the likely cause?
medium
A. The button has tabindex="-1"
B. The button has a visible label
C. The button uses type="submit"
D. The button has a high contrast color

Solution

  1. Step 1: Understand tabindex effect on keyboard navigation

    A tabindex="-1" removes the element from keyboard focus order, so users can't tab to it.
  2. Step 2: Check other options

    Visible label, submit type, and color contrast do not block keyboard focus.
  3. Final Answer:

    The button has tabindex="-1" -> Option A
  4. Quick Check:

    tabindex="-1" blocks keyboard focus [OK]
Hint: Check tabindex for keyboard focus issues [OK]
Common Mistakes:
  • Confusing label visibility with focusability
  • Ignoring tabindex attribute effects
  • Assuming color affects keyboard navigation
5. You want to test if a website's color choices meet accessibility standards for contrast. Which approach is best?
hard
A. Use random colors to test visually
B. Only rely on automated tools without manual checks
C. Ignore color contrast if text is large
D. Use an automated color contrast checker and manually verify with users

Solution

  1. Step 1: Understand color contrast testing methods

    Automated tools quickly check contrast ratios, but manual testing ensures real user experience.
  2. Step 2: Evaluate other options

    Relying only on tools misses context; ignoring contrast or random colors do not ensure accessibility.
  3. Final Answer:

    Use an automated color contrast checker and manually verify with users -> Option D
  4. Quick Check:

    Combine automated and manual checks for best results [OK]
Hint: Combine tools and manual checks for color contrast [OK]
Common Mistakes:
  • Trusting only automated tools
  • Ignoring contrast for large text
  • Testing colors without standards
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard