Provide readable label for broken-up elements

[oliverjam]

My Voiceover reads the title out as "ess queue.. you ay el...el" (rather than just "squall").

There are two problems: breaking the content up and using all caps.

Screenreaders can treat capitalised content as an acronym, so it reads each letter out separately. You can use text-transform: uppercase to capitalise the text in CSS so the content in the HTML can be lowercase.

Also your h1 content is broken up into multiple spans for styling purposes. This causes screenreaders to treat it as three separate chunks of text, pausing between each. You can fix this by putting an aria-label on the h1, which should make the screenreader read that out instead of the content of the element.