Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[low] JAWS+Chrome: Many Pages: Visual headings are not announced as such #5458

Closed
ogumen opened this issue Sep 23, 2021 · 0 comments
Closed

Comments

@ogumen
Copy link

ogumen commented Sep 23, 2021

Action Performed:

Prerequisites: the user is not logged in.

  1. Using JAWS+Chrome, open https://staging.new.expensify.com/
  2. Press H key to navigate through the headings.
  3. Note what headings the page has.

Expected Result:

Visually the 'Split bills and chat with friends' text looks like a heading, so it should be also announced as heading level 1.

Actual Result:

The 'Split bills and chat with friends' text is visually represented as a heading but programmatically it is not implemented as a heading.

HTML:
<div dir="auto" class="css-901oao" style="color: rgb(255, 255, 255); font-family: GTAmericaExp-Regular; font-size: 36px; font-weight: 700; line-height: 40px;">Split bills and chat with friends.</div>

Other occurrences:

  1. Terms of service -> 'Expensify terms of service', 'Who Can Use the Expensify Service?', 'Individual Account Registration', 'Corporate Policies', 'Linked Financial Accounts', 'Bill Pay and Invoicing', 'Personal Payments', 'Third Party Payment Services', 'Fees and Payment', 'Term and Termination' and many more are visually looking as headings but programmatically they are not defined as headings.
  2. Set password -> the visual 'Split bills and chat with friends' heading is not implemented as heading semantically.
  3. Email verification -> the visual 'Split bills and chat with friends' heading is not implemented as heading semantically.
  4. Create new group overlay -> the visual headings 'New Group', 'Recents' and 'Contacts' are not implemented as headings semantically.
  5. Privacy policy -> the visual headings are not implemented as headings semantically.
  6. Request money overlay -> the visual 'Request money' heading is not marked up semantically as a heading.
  7. Settings overlay -> the visual 'Settings' heading is not implemented as a heading semantically.
  8. Split bill overlay -> the visual 'Split Bill' heading is not marked up semantically as a heading.

Workaround:

No workaround

Area issue was found in:

Landing page, Terms of service page, Set password page, Email verification page, Create new group overlay, Privacy policy page, Request money overlay, Settings overlay, Split bill overlay

Failed WCAG checkpoints

1.3.1

User impact:

The screen reader user might not understand the structure of page.

Suggested resolution:

Use heading semantics to implement the visual headings, make sure to follow the hierarchy of headings (the main page heading should be implemented as <h1>, the section headings as <h2>, followed by sub-section headings implemented as <h3> and so on). See: https://www.w3.org/WAI/tutorials/page-structure/headings/

Platform:

Where is this issue occurring?

  • Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:
Bug5180527_heading_-_terms_of_service

Bug5180527_info_and_relationship_-_heading_-_landing_page.mp4

Bug5180527_info_and_relationship_-split_bills-_landing_page
Bug5180527_Main_heading_-_set_password
email verification page-visual Heading
Jaws_Chrome-Create_New_Group-Visual_headings_are_not_programmatic
Privacy policy page- visual headings
Request money page-visual heading
Settings page-Visual heading
Split bills-visual heading

View all open jobs on GitHub

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants