WCAG 3.2.1 On Focus — Testing Guide for Mobile & Web Apps

WCAG 3.2.1, "On Focus," is a foundational accessibility requirement. It mandates that when an interactive element receives focus, it shouldn't trigger a change of context. This ensures users can relia

Ensuring Usability: A Practical Guide to WCAG 3.2.1 (On Focus)

WCAG 3.2.1, "On Focus," is a foundational accessibility requirement. It mandates that when an interactive element receives focus, it shouldn't trigger a change of context. This ensures users can reliably navigate and interact with web content and applications.

What WCAG 3.2.1 Actually Means

In simpler terms, if a user tabs to a button, clicks on a link, or navigates to an input field using a keyboard or assistive technology, that action should *only* move the focus. It should not simultaneously:

• Open a new window.
• Submit a form.
• Navigate to a different page.
• Redirect the user to another section of the page.
• Initiate any other significant change that isn't directly related to simply highlighting the active element.

The goal is predictable interaction. Users should know what to expect when they interact with an element, and unexpected context changes can be disorienting and exclusionary.

Why "On Focus" Matters: The User Impact

This criterion directly impacts users who rely on keyboard navigation or screen readers. Imagine a user who can only navigate with the Tab key. If tabbing to a seemingly innocuous link or button suddenly navigates them away from their current position without warning, they can easily become lost, frustrated, and unable to complete their tasks.

• Keyboard Users: They depend on a clear visual indicator of focus and expect predictable behavior. Unexpected navigation breaks their workflow and can lead to data loss.
• Screen Reader Users: While they may not see the visual focus, their screen reader announces the element that receives focus. If that focus triggers a context change, the screen reader might miss announcing the new content or location, leaving the user unaware of the change.
• Users with Cognitive Disabilities: Unexpected changes can be confusing and overwhelming, making it difficult to track progress or understand the application's state.
• Users with Motor Impairments: For those who find precise mouse control challenging, keyboard navigation is essential. Unpredictable focus behavior exacerbates their difficulties.

Both the EU's European Accessibility Act (EAA) and the Americans with Disabilities Act (ADA) in the US implicitly or explicitly support the principles behind WCAG 3.2.1, aiming for digital experiences that are accessible to all users, regardless of their abilities.

Common Violations and Real-World Examples

Violations of WCAG 3.2.1 often stem from using JavaScript event handlers that combine focus events with actions that change context.

#### Web Application Examples:

1. Link that Navigates on Hover/Focus:

• Violation: A navigation link that, when the mouse hovers over it or it receives keyboard focus, immediately redirects the user to a new page *without* a click.
• User Impact: A keyboard user tabbing through a menu might be unexpectedly sent to a product page before they intended to visit it.

1. Form Input with Auto-Submit:

• Violation: An input field (e.g., a search bar) that automatically submits the form or initiates a search as soon as the user types a character or when the field receives focus after being blurred.
• User Impact: A user trying to type a search query might see results appearing and disappearing as they type, or the form might submit prematurely, interrupting their input.

1. Button that Opens a Modal on Focus:

• Violation: A button that, upon receiving keyboard focus, immediately opens a modal dialog. The user might only intend to highlight the button to see its label before deciding to click it.
• User Impact: A keyboard user expecting to press Enter or Space to activate the button might find the modal appearing unexpectedly, disrupting their navigation flow.

#### Mobile Application Examples (Android/iOS):

1. Tab Bar Item with Instant Navigation:

• Violation: Tapping (or focusing on with accessibility services) a tab bar item that immediately navigates to a new screen without requiring a distinct "select" action.
• User Impact: A user intending to switch to a different section might accidentally navigate away from their current task if they briefly touch or focus on a tab item.

1. Toggle Switch that Saves on Focus Change:

• Violation: A toggle switch (e.g., for settings) that saves its state and potentially triggers a page reload or significant UI update the moment focus shifts away from it, rather than on the tap/click itself.
• User Impact: A user trying to review their settings might inadvertently change them by simply tabbing or swiping past the switch.

1. List Item with Context Change on Focus:

• Violation: In a list of items (e.g., email subjects, product listings), focusing on a list item (e.g., using swipe gestures or accessibility focus) causes the content to change or navigate to a detail view.
• User Impact: A screen reader user swiping through a list might be taken to a detail view of the first item they swipe past, preventing them from hearing the titles of subsequent items.

Testing for WCAG 3.2.1 Compliance

Ensuring compliance requires a combination of manual exploration and automated checks.

#### Manual Testing Steps:

1. Keyboard Navigation:

• Use the Tab key to move focus through all interactive elements on the page/screen.
• Use Shift + Tab to move focus backward.
• Use Enter or Space keys to activate buttons and links.
• Observe: Does any element trigger a context change (navigation, form submission, new window) *solely* by receiving focus or by pressing Enter/Space on it, *before* you've explicitly confirmed an action?

1. Assistive Technology Simulation:

• Screen Readers (e.g., NVDA, JAWS, VoiceOver, TalkBack): Navigate through the application using screen reader gestures. Pay attention to how focus changes and if unexpected content loads or navigation occurs.
• Focus Order Verification: Ensure the focus order is logical and follows the visual flow of the content.

1. Mouse Interaction (Less Direct, but Useful):

• While not the primary focus, briefly hovering over elements or clicking them to see if any "on focus" behavior is also triggered by hover can sometimes reveal underlying issues.

#### Automated Tools for WCAG 3.2.1 Checks:

• Browser Developer Tools: Many browser dev tools have accessibility panels that can highlight focus issues or indicate elements that might be problematic.
• Lighthouse (Google Chrome): Audits for accessibility, including some aspects related to focus management.
• axe-core / axe DevTools: A popular accessibility testing engine that can detect many WCAG violations, including those that might lead to 3.2.1 issues.
• Dedicated Accessibility Scanners: Tools like Siteimprove, Level Access, or WAVE can provide reports on accessibility compliance.

#### Mobile-Specific Considerations (Android/iOS):

• TalkBack (Android) / VoiceOver (iOS): These are essential for testing mobile applications. Practice using swipe gestures for focus navigation and understand how they interact with UI elements.
• Android Accessibility Scanner: A tool from Google that can identify accessibility issues on Android apps.
• Xcode Accessibility Inspector (iOS): Helps developers inspect UI elements and their accessibility properties on iOS.
• Emulators/Simulators: Use these to test keyboard navigation on virtual devices.

Fixing WCAG 3.2.1 Violations

The core principle for fixing 3.2.1 violations is separation of concerns: focus management should be distinct from action execution.

#### Code Examples:

Web (JavaScript):

• Problematic Code (Example):

    // This link navigates when it gains focus
    const problematicLink = document.getElementById('auto-nav-link');
    problematicLink.addEventListener('focus', () => {
        window.location.href = '/new-page'; // BAD: Context change on focus
    });

• Corrected Code:

    const correctLink = document.getElementById('correct-nav-link');
    // Only navigate on a click or Enter/Space press when focused
    correctLink.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent default link behavior if needed
        window.location.href = '/new-page'; // Action triggered by explicit interaction
    });

    // Ensure Enter/Space also triggers the action for keyboard users
    correctLink.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            window.location.href = '/new-page';
        }
    });

Mobile (Conceptual - Android XML/Kotlin):

• Problematic Pattern: An OnClickListener or OnFocusChangeListener directly triggering a new Activity or Fragment transition.
• Corrected Pattern: Ensure that the action to start a new activity or show a new fragment is tied to a distinct user interaction like a click event on a button or list item, not an incidental focus change. For instance, using setOnClickListener for navigation, and ensuring OnFocusChangeListener only handles visual state changes if necessary, not navigation.

How SUSA Checks for WCAG 3.2.1 Compliance

SUSA (SUSATest) autonomously explores your application, simulating various user behaviors to uncover issues like WCAG 3.2.1 violations.

• Autonomous Exploration: SUSA uploads your APK or web URL and begins exploring. It doesn't rely on pre-written scripts for basic interaction.
• Persona-Based Testing: SUSA utilizes 10 distinct user personas, including:
• Novice & Elderly: These personas often rely more heavily on clear, predictable navigation and might be more prone to accidental focus changes.
• Power User & Teenager: These users might navigate faster and could trigger focus-related actions unintentionally.
• Accessibility Persona: Specifically designed to mimic assistive technology users, SUSA's accessibility persona rigorously tests focus order and interaction predictability.
• Dynamic Testing: SUSA dynamically tests elements as it encounters them. When an element receives focus (simulated via keyboard navigation or touch/swipe gestures), SUSA monitors for any subsequent changes in the application's state or content.
• Flow Tracking: SUSA tracks user flows like login, registration, and checkout. If an unexpected context change occurs during these critical flows due to focus, SUSA flags it.
• WCAG 2.1 AA Testing: SUSA incorporates WCAG 2.1 AA accessibility testing, which includes checks for focus management. While 3.2.1 is Level A, SUSA's comprehensive approach