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.
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
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.
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
A document must not have more than one
mainelement that does not have the
Within any document or application, the author SHOULD mark no more than one element with the banner role.
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.
Answered By – slugolicious
Answer Checked By – Mildred Charles (AngularFixing Admin)