Accessibility - Heading structure needs adjusting on some pages (1.3.1 - Info and Relationships)

[dmtrek14]

Background on the problem the feature will solve/improved user experience

Good, semantic HTML helps those using assistive devices better understand the content on a page, its structure, and the relationships between sections of the page to each other. When h1-h6 headings are used properly, a user with a screen reader can have the headings read out to them and be able to know how the content on the page is structured. When heading levels are missing or skipped, this can make content more confusing for those using assistive devices.

Generally, heading levels structuring content are covered in WCAG guidelines 1.3.1 (Info and Relationships) and 1.3.2 (Meaningful Sequence).

Describe the solution you'd like

Make sure that each page in Legit-Info has a level one heading (h1) that accurately describes what the page is about. For instance, the search page could have an h1 with the content 'Search Legislation'.

Additionally, make sure that heading levels are not skipped. If there is more than one heading on a page, make sure they follow the logical order of the h1, then any h2s, with any h3s under the h2, etc.

If the native Bootstrap styling for an h1 is too large and doesn't meet with style guidelines, Bootstrap has provided some utility classes (such as .h1, .h2, .h3, etc.) that allow you to style any header to be the size of another heading level. For example, if we like the size/style of the h2 level heading for h1, then we'd write an h1 as follows:

<h1 class="h2">My Heading Level 1 Styled as an H2</h1>

This will leave the heading level intact, but style the element as an h2, thus helping us strike a balance between sighted users and those using a screen reader.

Tasks

• [ ] In cfc_app/templates/search.html at line 5, surround the page header text ("Search legislation") with an h1 element, as this is the page title
• [ ] In cfc_app/templates/locations.html, the page header is using an h5 instead of an h1. Change to h1.
• [ ] In cfc_app/templates/impacts.html, the page header is using an h5 instead of an h1. Change to h1.
• [ ] In cfc_app/templates/criterias, surround the page header text ("Tables for Users, Profiles, and Criterias") with an h1 element
• [ ] In users/templates/reigster.html, the page header is using an h4 instead of an h1. Change to h1.
• [ ] In users/templates/login.html, surround the page header text ("Sign in") with an h1 element
• [ ] In users/templates/profile.html, surround the page header text ("Profile") with an h1 element
• [ ] In users/templates/update.html, surround the page header text ("Update Profile") with an h1 element

If any pages look to have defined sections of content, consider using additional headings to mark up the content.

Acceptance Criteria

• Each page should have an h1 that is effectively the page title.
• If content is further broken up with additional heading levels, they should be in the correct order and no levels should be skipped.
• If styling for a different heading level is desired, use the Bootstrap 4 utility classes to style the heading level.
• No heading levels should be skipped on any page.

[dmtrek14]

This is related to #133 (Accessibility testing for level 1) as it is a level one specification issue.

[github-actions[bot]]

:wave: Hi! This issue has been marked stale due to inactivity. If no further activity occurs, it will automatically be closed.

[demilolu]

re-opening!

[github-actions[bot]]

:wave: Hi! This issue has been marked stale due to inactivity. If no further activity occurs, it will automatically be closed.