pytorch / pytorch/pytorch.github.io

Get Started page has four h1 headings (WCAG 1.3.1)

Open Beginner friendly
#2,133 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
285
Forks
317
PR merge metrics
No merged PRs in 30d

Description

🕋 Website

The Get Started page renders four <h1> elements, so the document has four competing top-level headings instead of one.

https://pytorch.org/get-started/locally/

h1  Get Started
h1  Installing on macOS
h1  Installing on Linux
h1  Installing on Windows

The three install headings come from this repo, and each opens with a markdown #:

  • _get_started/installation/mac.md
  • _get_started/installation/linux.md
  • _get_started/installation/windows.md

Those files are included into a page that already carries its own h1, so the # becomes a second, third and fourth top-level heading rather than a section heading under it.

Why it matters

Headings are how screen reader users navigate a long page. Most screen readers offer "jump to next heading" and a heading list, and both rely on the levels describing a real outline. Four h1s say the page has four separate documents in it, so the outline stops being useful for exactly the page a new user is most likely to be reading carefully while installing something.

This is WCAG 2.2 1.3.1 Info and Relationships, Level A.

To Reproduce

  1. Go to https://pytorch.org/get-started/locally/
  2. Run in the console:
[...document.querySelectorAll('h1')].map(h => h.textContent.trim())
  1. Four headings are returned rather than one.

Expected behavior

One h1 per page. The three install headings become ##, which puts them under "Get Started" where they belong and leaves the rendered page looking the same.

Two things I could not determine from outside

Both are about the page chrome rather than the content, and I suspect they are not owned by this repo, so I am asking rather than reporting:

  1. There are two role="contentinfo" landmarks on every page I checked, one on div.nectar-global-section.before-footer and one on #footer-outer. There should only be one, otherwise landmark navigation offers two "footers".
  2. The homepage h1 is "JOIN US", which is a conference banner rather than a description of the page.

Both look like they come from the WordPress theme wrapping the Jekyll content, not from this repository. If that is right, I would be glad to know where they should be raised instead.

Happy to open a pull request for the # to ## change if that is useful.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting the markdown headings in _get_started/installation/mac.md, _get_started/installation/linux.md, and _get_started/installation/windows.md, then reproduce the issue with the provided browser-console query on the Get Started page. Done means the rendered page has one h1, the three installation headings appear as h2 elements, and the page's visual appearance is unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, markdown
Domain
accessibility, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
84/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.