用重復的內容保持良好的語義

Question

假設我正在構建一個典型的文檔編輯器：

預覽（紅色）是表單數據的最新格式化 vue。

預覽元素包含語義元素（例如h1 、 h2 、 main 、 header等）。 它本身就是一種文檔，從概念上講確實很有意義。 但這使得真實文檔的結構對於爬蟲和屏幕閱讀器來說相當混亂。 例如，可能有兩個h1或main元素。 我正在尋找一種方法來避免這種情況。

另外，還有重復內容的問題（見圖）。

對於問題的可訪問性部分，我可以在預覽元素中添加一個aria-hidden="true"屬性。 事實上，視障人士不需要預覽，這對他們來說只是多余的，他們只需要表格。

但是對於爬蟲，這是我的選擇：

• 不要在預覽元素中使用語義元素，而是使用div s (😥)。
• 在另一個 URL 上托管預覽並通過iframe將其插入（這就是我現在正在做的事情，但對我來說似乎很笨拙）。
• 就這樣吧，爬蟲不在乎。

任何想法/資源/建議？

Answer 1

只要您的預覽區域清楚地指示了輔助技術，擁有冗余信息就完全可以了。 如果您有<iframe> ，請確保其上有title屬性。

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

但是，您可能會遇到多個結構元素的驗證器問題。

例如，HTML 只允許一個<main>元素：

一個文檔不能有多個沒有指定hidden屬性的main元素。

你可以有多個<header>元素，但<header>有一個默認的橫幅角色，橫幅角色說：

在任何文檔或應用程序中，作者應該標記不超過一個帶有橫幅角色的元素。

這里的關鍵是“應該”，這意味着這是一個強烈的建議，但不是必需的。 如果您的預覽部分有role="document" ，您也可以使用多個橫幅角色。

我建議不要使用非語義元素 ( div )，因為輔助技術用戶可能想要檢查所生成內容的實際語義結構，盡管我想您也可以為使用所有的預覽設置“在新選項卡中顯示”選項完整的語義，有點像你的第二個子彈，但不使用 iframe。