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.
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: uppercaseto capitalise the text in CSS so the content in the HTML can be lowercase.Also your
h1content is broken up into multiplespans for styling purposes. This causes screenreaders to treat it as three separate chunks of text, pausing between each. You can fix this by putting anaria-labelon theh1, which should make the screenreader read that out instead of the content of the element.