Investigate H1 position for new Media Asset Pages

[aeroplanejane]

Is your feature request related to a problem? Please describe.
Given the media is the hero of the media page we would like to investigate how we visually display the h1 below the media while ensuring the h1 is announced to screenreaders before the media (the h1 should be the 1st piece of content in the main landmark to a screen reader user).

There is a risk that visual users will not see the content on smaller screens where the privacy and cookie banner, navigation and longer headlines are displayed before the media. This would require the users to scroll to find video content.

Given this scrolling behaviour, the hypothesis would be that this design will reduce the likelihood that a user watches media content on the page. Given we don't want to deliver pages which are less performant today, we want to hero the AV content at the top of the page.

Describe the solution you'd like
Ideally we would want to display the headline below the media content, but ensure that the h1 headline is announced as the first piece of content to screen reader users before the media/rest of the main content. Solutions will need to be tested with all supported AT and the pro's and cons weighed up.

Describe alternatives you've considered

1. Hidden off-screen H1 element announces text
2. Use CSS grid to visually re-order elements - this would only work where there is browser support for CSS grid. Where browsers do not support it (e.g. IE11) we would render the h1 headline before the media.
3. There may also be other ways to achieve this, which should be investigated/researched as part of this

Testing notes
[Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• This feature is expected to need manual testing.

Additional context
Headline above the page:
https://zpl.io/2yWxNLp
Headline below the page:
https://zpl.io/ad1OOjn

[greenc05]

See write up https://docs.google.com/document/d/11SeKpJz2n5K-PqQl98WeWQKriWdMvuwDuJQt0IeXhtA/edit?usp=sharing

[pharingee]

Agreed to use the second alternative to achieve this based on write up above.

[pjlee11]

Blocked awaiting meeting with Articles + Sareh to check their requirements and thoughts on the second implementation described in https://docs.google.com/document/d/11SeKpJz2n5K-PqQl98WeWQKriWdMvuwDuJQt0IeXhtA/edit?usp=sharing

[aeroplanejane]

Blocks #4150

[greenc05]

@pjlee11 why do MAPs affect articles? This implementation is just for MAPs

[pjlee11]

@greenc05 Articles have been looking at having a headline anywhere in the body of the article and therefore have different but related requirements to this issue. The media pod decided in refinement it would be good to get their input prior to starting this work as whatever solution the media pod find for having a H1 not in the first position will likely be extended in the future by articles.

[pjlee11]

Confirmed in the meeting with articles+ that we can go with the approach of an offscreen <h1> and the visual headline being rendered as <strong>

[aeroplanejane]

@pjlee11 Thanks, Phil - yes confirmed by @jimjohnsonrollings and @gavinspence that this implementation works for MAPS. Articles have some outstanding questions around multiple h1s and the absence of headlines.