Screen Reader: Many Pages: Visual headings not announced as such

[nbhardwaj-del]

Action Performed:

1. Using JAWS + Chrome, open the page https://new.expensify.com/
2. Attempt to navigate through the page headings using the 'H' hotkey
3. Observe the visual headings on the page are found

Other Occurrences (1st part):

1. On Settings - Profile: the titles Profile, Public, Private
2. On Settings - Subscription: the titles Subscription, Payment, Your plan
3. On Settings - Troubleshoot: the title Troubleshoot
4. On Settings-Save the World: the titles Save the world, Teachers Unite
5. On Settings - About: the titles About, About Expensify
6. On Settings - About - Keyboard Shortcuts: the title Keyboard shortcuts
7. On Settings - About - App Download Links: the title App download links
8. On Settings - Save the world - I know a teacher: the title
9. On Settings - Save the world - I am a teacher: the title
10. On Settings - Preferences the title and the text 'App preferences'
11. On Settings - Preferences - Priority mode: the title
12. On Settings - Preferences - Language: the title
13. On Settings - Security: the title and the texts 'Security options' and 'Copilot Delegate access'
14. On Settings - Security - Validate your account: the title
15. On Settings - Security - Close account: the title
16. On Settings - Security - Two-factor authentication: the title
17. On Settings - Profile - Display name: the title
18. On Settings - Profile - Contact methods: the title
19. On Settings - Profile - Pronouns: the title
20. On Settings - Profile - Share Code: the title
21. On Settings - Profile - Legal Name: the title
22. On Settings - Profile - DOB: the title
23. On Settings - Profile - Phone number: the title
24. On Settings - Profile - Address: the title
25. On Settings - Profile - Country: the title
26. On Workspaces - Duplicate Workspaces: the title
27. On Workspaces - Overview: the title 'Overview'
28. On Workspaces - Overview - Expensy Policy: the title
29. On Workspaces - Overview - Workspace Name: the title
30. On Workspace - Reports: the titles 'Reports', 'Report title' and 'Report fields'
31. On Workspace - Categories: the title 'Categories'
32. On Workspace - Categories - Settings: the title
33. On Workspace - Categories - Add category: the title
34. On Workspace - Workflows: the titles 'Workflows', 'Submission frequency, 'Add approvals\ and 'Make or track payments'
35. On Workspace - Workflows - Edit Approval Workflow: the title
36. On Workspace - Workflows - Expenses From: the title
    37: On Workspace - Workflows - Approver: the title
37. On Workspace - Rules: the titles 'Rule', 'Expenses', 'Expense Reports'
38. On Workspace - Rules - Cash Expenses Defaul: the ttitle
39. On Workspaces - Distance Rates: the title 'Distance rates'
40. On Workspaces - Distance Rates - Rate Details: the title
41. On Workspaces - Expensify Card: the titles 'Expensify Card' and 'Get the Expensify Card'
42. On Workspaces - Expensify Card - Add bank account: the title
43. On Workspaces - Expensify Card - Confirm currency and country: the title
44. On Workspaces - Expensify Card - Bank info: the title
45. On Workspace - Company Cards: the titles 'Company cards', 'Get the Expensify Cards' 'Import company cards'
46. On Workspace - Company Card - Add Cards: the title
47. On Workspace - Invoices: the titles 'Invoices', 'Invoice balance', 'Bank accounts', 'Invoicing details'
48. On Workspace - Create Workspace - Confirm Workspace: the title
49. On Workspace - Create Workspace - Invite new members: the title
50. On Workspace - Create Workspace - Default Currency: the title
51. On Workspace - More Features: the titles 'More features', 'Integrate', 'Organize', 'Manage', 'Spend', 'Earn'
52. On Create Report - Restricted: the title
53. On Create Report - Add payment card: the title
54. On Create Report - Change payment currency: the title
    56: On Track Distance: the title
    57: On Track Distance: the title
55. On Track Distance - Choose Recipient: the title and 'Workspace' and 'Contacts'
56. On Send Invoice
57. On Book Travel

Expected Result:

Visually emphasized headings are announced as headings, e.g.:

• Travel and expense, at the speed of chat
• section titles in the footer

Actual Result:

No headings are found on the page, although the following text elements are visually emphasized as headings: 'Travel and expense , at the speed of chat" in the main content and in the footer area: "Features", "Resources", "Learn More", "Get Started"

Other Occurrences (2nd part):
61. On Wallet: the titles 'Wallet', 'Bank Account', 'Expensify Wallet (Beta)'
62. On Wallet - Add bank account: the title
63. On Create Expense flow: the titles of all dialogs
64. On Paid Expense details flow
65. On Reports flow
66. On Chat flow

HTML:

Travel and expense, at the speed of chat

Area issue was found in:

Landing Page

Failed WCAG checkpoints

WCAG 1.3.1 Info and Relationships
https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships

User impact:

Users with different disabilities employ assistive technology to adapt content according to their specific needs. For example, users who are blind (using a screen reader) benefit when information conveyed through color is also available in text (including text alternatives for images that use color to convey information), and users who are deaf-blind and use braille (text) refreshable displays may be unable to access color-dependent information.

Suggested resolution:

Use semantic HTML to ensure each visual heading is announced as such.
https://www.w3.org/WAI/tutorials/page-structure/headings/

Environment(s)

Windows Windows 10 - Chrome

Screenshots/Videos

Bug6995139_1762363650901.Visual_headings_not_announced_as_such.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/6995139
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[rushatgabhane]

fixed by #79241

[MelvinBot]

Bug reproducible - https://platform.applause.com/services/links/v1/external/0e6a28ab47e2b7fedbaeeee27cd4bcd1322c99d6691ebbdc559b587075bc2fbf

[rushatgabhane]

Asked for confirmation https://expensify.slack.com/archives/C9YU7BX5M/p1773022863722339?thread_ts=1761671288.437029&cid=C9YU7BX5M

[rushatgabhane]

@ Rushat for the headings bug, there is a headings related bug on the page but not as written. In general, there should only be a singular h1 per page/screen. Right now you have like 6 h1's, image attached. The rest of those can be lower level headings (h2, for example) or not a heading at all (for "get started below")

@MelvinBot can we do only one heading?

[MelvinBot]

Yes, this is feasible. Here's what's happening and how to fix it:

Current state: The sign-in page has 6 elements using accessibilityRole={CONST.ROLE.HEADER}, which React Native for Web renders as role="heading" with a default aria-level="1" (i.e., h1). These are:

1. Hero text — "Travel and expense, at the speed of chat" (SignInHeroCopy.tsx:28)
2. Welcome header — e.g., "Welcome back!" (SignInPageContent.tsx:46)
3. Footer column titles (4x) — "Features", "Resources", "Learn More", "Get Started" (Footer.tsx:176, rendered in a .map() loop)

Fix: Keep only the hero text as h1. Downgrade the others by adding aria-level={2} (or a custom prop) to the footer section titles and the welcome header. The "Get Started" footer title could arguably be removed as a heading entirely, since it's more of a call-to-action.

React Native for Web supports the aria-level prop on Text components, so the changes would be minimal — just adding aria-level={2} alongside accessibilityRole={CONST.ROLE.HEADER} in Footer.tsx and SignInPageContent.tsx.

Note that the broader issue (#76945) lists 60+ pages with heading problems across Settings, Workspaces, etc. Those use HeaderWithBackButton and similar components. A more thorough fix could introduce a heading level context or update those components too, but fixing the sign-in page h1 proliferation is a good standalone change.

[rushatgabhane]

can't we use React native props @MelvinBot