Moved "learn more" link fragment spans to be above subject header

[jgrimes86]

This PR closes issue #650

I moved the <span>s that serve as targets of the two "learn more" links so that they are immediately above the headers of the sections they are related to. Visually, the linked-to headers are brought to the top of the Methodology page, and screen readers now announce the header, rather than the previous paragraph.

Question for @bacitracin : I'm still using the <span>s so that the screen reader reads the text of the header and then stops. I could delete the <span>s and instead add id=... to the <div> containing the header and paragraph text, which was suggested as a possible alternative solution to this issue. I tested it and the navigation works the same either way. However, if I add the id to the <div>, the screen reader reads the header and also reads the first paragraph. What is the preferred behavior?

Also, for reference, here are some before-and-after screenshots of the "access method" section of the Methodology page as it appears after clicking the "learn more" link:
Before this PR on a large screen:

After this PR on a large screen:

Before this PR on a small screen:

After this PR on a small screen:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vacant-lots-proj	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 8:10pm

[bacitracin]

@jgrimes86 Thanks for the screenshots! They're helpful. It looks good to me.

I think in the ticket @marvieqa meant moving the id to the H2 that says "How did we determine “priority”?" and not the container div. That would be cleaner if it works (haven't tried but don't see any issues with it).

It's up to you whether you want to try that or keep the span. We definitely don't want the entire paragraph read out, that's a rough experience for screenreader users.

[jgrimes86]

I think in the ticket @marvieqa meant moving the id to the H2 that says "How did we determine “priority”?" and not the container div. That would be cleaner if it works (haven't tried but don't see any issues with it).

Ah, that makes more sense. I made that change and it seems to behave the way we want it. Navigation works the same as I had it before, and the screen reader just reads the H2 text.

[bacitracin]

Less code, nice!