impactmakers / impactmakers/climatechoice

Multiple h1s on pages

Open
#142 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
60
Forks
17
PR merge metrics
No merged PRs in 30d

Description

It looks like there is generally quite a good heading structure across the pages, but sometimes there are multiple `

` elements per page. As a general rule, there should only be one `

`, and all heading levels underneath should be hierarchal.

This particularly benefits users of assistive technology, such as screen reader users, who can sometimes look at heading levels in isolation, to get a sense of what's on the page.

The main places the multiple `

`s seem to come from are in the little share strapline:

![image](https://user-images.githubusercontent.com/16868713/67727679-3b0acf00-f9e2-11e9-8681-7dd9a65c57d5.png)

And in the 'Impact makers' footer card:

![image](https://user-images.githubusercontent.com/16868713/67727702-4d850880-f9e2-11e9-8a2c-4cbff0923b52.png)

I'd also argue that maybe the strapline in the home page header shouldn't be a `

`. A pattern that GOV.UK, the Financial Times and BBC seem to use is to have a visually `

` on every page, that says something like 'welcome to X', or just 'X', where X is their organisation's name. Something I've also seen done is having the logo have some visually hidden text, which might work well on this site.

Again happy to make a PR if welcome! :)

Contributor guide

Open the contributing guide

Research direction

Start by locating the page templates or components that render the share strapline, the “Impact makers” footer card, and the home page header. Inspect the resulting heading structure across representative pages, then verify that each page has one h1 and hierarchical levels beneath it, including an accessibility check with a screen reader or heading audit.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.