标题在可重复使用的 HTML 内容块中用于 WYSIWYG 编辑器和 WCAG 有意义的序列

问题描述

我很难理解包含预定义标题（无法删除）的可重用 HTML 块的最佳方法。用户可以在 html 块中添加 h1 - h6。

页面本身有 <h1>，每个可重复使用的块都有一个预定义的 <h2> 标题。

因此，如果用户通过 WYSIWYG 编辑器添加 <h1> 标题，它在语义上将不正确，<h2> 也是如此。

用户还可以在其内部添加一个块来创建嵌套的 <h2> 标题。

<h1>Page heading</h1>

<div class="widget1">
  <h2>Re-useable block heading</h2>
  <h3>User added heading 3</h3>
    <div class="widget2">
      <h2>Re-useable block heading</h2>
      <h1>User added heading 1</h1>
      <h2>User added heading 2</h2>
      <h3>User added heading 3</h3>
    </div>
</div>

有更好的方法吗？我应该考虑使用 ARIA API 和 role="heading" aria-level="xxx" 吗？

或者我应该禁止 h1 和 h2 吗？或者这只是最终用户的问题？

WCAG 受影响地区：

1.3.2 有意义的顺序：当内容呈现的顺序影响其含义时，可以通过编程确定正确的阅读顺序。（A级）

1.3.1 信息和关系：通过演示传达的信息、结构和关系可以通过程序确定或以文本形式提供。（A级）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html html-heading wcag