Preserving good semantics with repetitive content

Question

Say I'm building a typical document editor:

Where the preview (in red) is an up-to-date, formatted vue of the form's data.

The preview element contains semantic elements (e.g. h1, h2, main, header, etc.). It's kind of a document in itself, which does make sense, conceptually. But this makes the structure of the real document quite confusing for crawlers and screen readers. There might be, for instance, two h1 or main elements. I'm looking for a way to avoid that.

Plus, there's the problem of repetitive content (see image).

For the accessibility part of the problem, I could just add an aria-hidden="true" attribute to the preview element. In fact, visually-impaired people don't need the preview, it's just redundancy to them, they just need the form.

But for crawlers, here are my options:

• Don't use semantic elements inside the preview element, use divs instead (😥).
• Host the preview at an other URL and insert it via an iframe (that's what I'm doing right now, but it seems hacky to me).
• Leave it like that, crawlers don't care.

Any idea/resource/suggestion?

Answer 1

As long as your preview area is clearly indicated for assistive technology, it's perfectly fine to have redundant information. If you have an <iframe>, make sure there's a title attribute on it.

<iframe title="preview area"...>

However, you might have validator issues with multiple structure elements.

For example, HTML only allows one <main> element:

A document must not have more than one main element that does not have the hidden attribute specified.

You can have multiple <header> elements but a <header> has a default role of banner and the banner role says:

Within any document or application, the author SHOULD mark no more than one element with the banner role.

The key here is "should", meaning it's a strong recommendation but not required. You can also get away with multiple banner roles if your preview section has role="document".

I would recommend not using non-semantic elements (div) because an assistive technology user might want to check the actual semantic structure of what's generated, although I suppose you could also have a "show in new tab" option for the preview that uses all full semantics, kind of like your second bullet but not using an iframe.