[英]Preserving good semantics with repetitive content
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.预览(红色)是表单数据的最新格式化 vue。
The preview element contains semantic elements (eg h1
, h2
, main
, header
, etc.).预览元素包含语义元素(例如
h1
、 h2
、 main
、 header
等)。 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.例如,可能有两个
h1
或main
元素。 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.对于问题的可访问性部分,我可以在预览元素中添加一个
aria-hidden="true"
属性。 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:但是对于爬虫,这是我的选择:
div
s instead (😥).div
s (😥)。iframe
(that's what I'm doing right now, but it seems hacky to me).iframe
将其插入(这就是我现在正在做的事情,但对我来说似乎很笨拙)。 Any idea/resource/suggestion?任何想法/资源/建议?
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
属性。
<iframe title="preview area"...>
However, you might have validator issues with multiple structure elements.但是,您可能会遇到多个结构元素的验证器问题。
For example, HTML only allows one <main>
element:例如,HTML 只允许一个
<main>
元素:
A document must not have more than one
main
element that does not have thehidden
attribute specified.一个文档不能有多个没有指定
hidden
属性的main
元素。
You can have multiple <header>
elements but a <header>
has a default role of banner and the banner role says:你可以有多个
<header>
元素,但<header>
有一个默认的横幅角色,横幅角色说:
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"
.如果您的预览部分有
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.我建议不要使用非语义元素 (
div
),因为辅助技术用户可能想要检查所生成内容的实际语义结构,尽管我想您也可以为使用所有的预览设置“在新选项卡中显示”选项完整的语义,有点像你的第二个子弹,但不使用 iframe。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.