Skip to content

[Due for payment 2026-01-30] Screen Readers: Settings Security: The fields of code are announced without a programmatic name #76912

@nbhardwaj-del

Description

@nbhardwaj-del

Action Performed:

Prerequisites:

  • the user is signed in
  1. Using Chrome + JAWS, open the URL – https://new.expensify.com/
  2. Navigate using the Tab key to the Account button and press Enter to activate it.
  3. Navigate using the Tab key to the Security button and press Enter.
  4. Navigate to the Two-factor authentication section and press Enter.
  5. Enter the verification code that is sent to your registered Email.
  6. In the Two-factor authentication modal, fill in the steps and click the Next button.
  7. In step 2, press the Tab key to focus the 6 fields for the code.
  8. Note how each field is announced.

Expected Result:

Each code input field should have a programmatic name (label or aria-label) that clearly indicates its purpose, such as:
Each input field representing a digit in the six-digit authentication code should be announced with a programmatic name, e.g.:

  • 'enter digit 1 of 6'
  • 'enter digit 2 of 6'
  • 'enter digit 3 of 6'
  • 'enter digit 4 of 6'
  • 'enter digit 5 of 6'
  • 'enter digit 6 of 6'

Actual Result:

The code input fields are announced with no identifying label or context. The screen reader does not announce what the field is for, causing confusion for users.

HTML:

Area issue was found in:

Settings-Security

Failed WCAG checkpoints

WCAG 4.1.2 Name, Role, Value
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value

User impact:

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

Suggested resolution:

If each digit is required to be entered into a separate field, use aria-label to announce each field, e.g.:

  • 'enter digit 1 of 6'
  • 'enter digit 2 of 6'
  • 'enter digit 3 of 6'
  • 'enter digit 4 of 6'
  • 'enter digit 5 of 6'
  • 'enter digit 6 of 6'

Environment(s)

Windows Windows 11 - Chrome

Screenshots/Videos

Image
Bug6999182_1762758395735.SR-Settings_Security-The_fields_of_code_are_announced_without_a_programmatic_name.mp4

Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36605/community-issues/6999182
Issue reported by: NA
Slack conversation: NA

Metadata

Metadata

Assignees

Labels

AccessibilityIssues affecting WACG accessibility on any platform.Awaiting PaymentAuto-added when associated PR is deployed to productionWeeklyKSv2

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions