Slide screenreaders reading order improvements

[oleksandr-danylchenko]

Our a11y tester noted that the current reading order of the Timeline Slide can be a bit confusing for the visually impaired users.

Now it reads as:

https://user-images.githubusercontent.com/68850090/174115109-04acb76c-303d-41c7-a284-3831feed5506.mp4

The images have descriptions, but the images and their metadata come before both the <h3> and <h2> headings that they support. Also, the use of <h3> for the date and <h2> for the slide title could be disorienting, causing students to associate the date with the event before the item that the year is intended to label.

Solution: Change the DOM tree order to get a better reading order but use CSS to position elements in their current places

*I've already started to work on this issue and then I'll do the PR

[JoeGermuska]

This would be very welcome. The risk of disrupting well-established presentation for legacy timelines is one reason we did not pursue this change, despite its accessibility benefits, but if you can do it in a way which maintains the same rendered result, we would welcome the help in improving timeline's accessibility.

Despite potential semantic issues with specific tags, we would prefer not to change them, in order to avoid changing already created timelines.

[oleksandr-danylchenko]

we would prefer not to change them

That's what I kept in mind before starting this :ok_hand:

[oleksandr-danylchenko]

Also, some TL users may depend on the existence of specific tags, like h2 for titles & h3 for dates. Because they are navigatable with the SRs with 1-6 number presses. So I'm hesitant to change 'em too

[JoeGermuska]

fixed with #747