Incorrect Heading Structure on Latest City COB News Page

[jill-iterators]

Screengrab/videos (insert file names here) N/A

Link https://d8-stg.boston.gov

Node # (if known)

Type of User: Anonymous

Environment (Device > OS > Browser) JAWS, Voice Over, Talkback

Trusted Tester Test Headings

Brief Description Heading levels start with a level 2 on Main Menu, followed by Latest City of Boston News (level 1 and also title of page.) The next headings are level 3(news titles,) followed by another heading level 2 at the bottom of the page.

Steps to reproduce 1) Gain focus on top of news page. 2) If using JAWS, press 1 on the keyboard to jump to the first heading (note that this skips the Main Menu heading.) 3) Press 2 to jump to the first H2 after H1(Note that this skips the entire news section and jumps to Pagination.) 4) Press 3 and note that the screen reader is unable to jump to the missing H3 section. 5) Alternately, press H to jump to headings sequentially and hear the heading levels out of order(H2, H1, H3 H3 H3, H2.)

Desired Result Headings should be logical. A screen reader user would expect an h2 to follow a h1. The next h2 is Pagination at the very bottom of the page. If navigating by heading levels, user would miss h3 news titles and become disoriented. Note: user is not affected if using H for heading navigation in JAWS, or heading navigation in both mobile platforms, as there is no way to navigate by specific heading levels present.

Actual Result Headings are not logical

[subaha-cob]

@andrebtlima I do not understand why H2 was added to the main menu and the footer. For now i will remove it.

[subaha-cob]

@andrebtlima this is more complicated than I initially thought. Will require re-wiring a core module. I need to speak to David Upton about this.

[subaha-cob]

Test on: https://d8-uat.boston.gov/

[jill-iterators]

Headings verified on UAT and working well.