What is optimal structure for focusable alert reading?

What HTML structure provides the best (minimal but accurate) screen reader reading experience when a heading element used as a notification gets focus or is swiped to?

Mobile screen readers may read contents of the alert heading more than once. For iOS special care must be taken to focus simple elements, as complex ones tend not to take programmatic focus.

The tip on using role="text" to wrap separate elements, used in Examples 4 and 4i, comes from Text Splitting Causes Screen Reader Problems.

Result: Examples 4 and, for iOS, 4i work uniformly well across screen readers. The 4i technique, which takes programmatic focus on a simple sub-element, works in iOS. iOS VoiceOver will focus the element and read aloud the whole alert message both on swiping to it and when programmatically focused. But since the focus rectangle does not show visibly on 4i, it may be advisable to limit the technique to iOS. For other platforms, the technique in Example 4 seems to be the best choice.

Browsers Other Than On iOS with VoiceOver

Example 1: Icon in Heading with Text Equivalent in Span

Warning: Your coat is on inside out

Example 2: Icon with Text Alternative in Heading

Your coat is on inside out

Example 3: Attempting to Override Reading Using ARIA-Label

Example 4: Attempting to “Flatten” Contents Using Role of Text

Warning: Your coat is on inside out

Example 5: Like Example 1 But Using HTML Heading Instead of ARIA-Level Heading

Warning: Your coat is on inside out

For iOS with VoiceOver

Example 1i: Icon in Heading with Text Equivalent in Span

Warning: Your coat is on inside out

Example 2i: Icon with Text Alternative in Heading

Your coat is on inside out

Example 3i: Attempting to Override Reading Using ARIA-Label

Your coat is on inside out

Example 4i: Attempting to “Flatten” Contents Using Role of Text

Warning: Your coat is on inside out

Example 5i: Like Example 1 But Using HTML Heading Instead of ARIA-Level Heading

Warning: Your coat is on inside out