辅助功能和 Javascript：加载动态内容还是显示和隐藏？

Question

我对前端代码中的辅助功能标准比较陌生。

我的问题：

对于 可访问性，是否最好先加载所有 HTML 内容，然后 show/hide 通过“隐藏”属性？
或者我可以动态加载内容并用适当的属性填充它吗？
如果是这样，您建议我在内容中添加哪些属性以通知用户内容已更新 and/or 已更改？

例如：
我有一个带有一些 buttons/tabs 的导航栏，可以加载适当的内容。我可以加载所有内容，然后 show/hide 类似于以下内容：

 <nav>
  <div class="tabs" role="tablist">
    <button
      id="tab-1"
      role="tab"
      aria-controls="tab-content-1"
      aria-selected="true"
      <!-- onClick={show/hide associated content} -->
    >
      Tab-1
    </button>
    <button
      id="tab-2"
      role="tab"
      aria-controls="tab-content-2"
      aria-selected="false"
      <!-- onClick={show/hide associated content} -->
    >
      Tab-2
    </button>
  </nav>

  <div>
    <!-- Content for Tab/Button #1, preloaded and hidden/shown from button click -->
    <section
      id="tab-content-1"
      role="tab-content"
      aria-labelledby="tab-1"
      hidden
      >
      Tab Content-1
    </section>
    <!-- Content for Tab/Button #2, preloaded and hidden/shown from button click -->
    <section
      id="tab-content-2"
      role="tab-content"
      aria-labelledby="tab-2"
      hidden
    >
      Tab Content-2
    </section>
</div>

或者我可以通过 tab/button 单击

动态加载内容

<nav>
  <div class="tabs" role="tablist">
    <button
      id="tab-1"
      role="tab"
      aria-controls="tab-content-1"
      aria-selected="true"
     <!-- onClick={load appropriate content and HTML } -->
    >
      Tab-1
    </button>
    <button
      id="tab-2"
      role="tab"
      aria-controls="tab-content-2"
      aria-selected="false"
      <!-- onClick={load appropriate content and HTML } -->
    >
      Tab-2
    </button>
  </nav>

  <div>
    <!-- Dynamically load the associated Tab Content via Javascript Here
    <section
      id="" => dynamically set 'id'
      role="" => dynamically set 'role'
      aria-labelledby="=" => dynamically set 'arria-labelledby'
      >
      // Dynamically set Content
    </section>
    -->
</div>

Answer 1

首先，您应该使用 CSS display:none 而不是 aria-hidden 来隐藏内容。 aria-hidden 属性只能在非常特殊的情况下使用。我建议搜索一下什么时候应该和不应该使用 aria-hidden，以及为什么要这样。许多问题已经很好地涵盖了主题。

回到您最初的问题，仅就可访问性而言，如果内容只是可见或已加载，则不会有太大变化。

使用 aria-live 区域来告知内容正在加载，以防加载可能需要一段时间。但是，不要将 aria-live 用于 updated/new 内容本身，特别是如果它很长 and/or 包含可聚焦元素。

决定是否应该 show/hide 或动态加载主要不是可访问性的问题。这更多地取决于初始和后续加载时间，以及您期望的响应级别。

辅助功能和 Javascript：加载动态内容还是显示和隐藏？

Accessibility and Javascript: load dynamic content or show & hide?

html

javascript

css

accessibility

web-accessibility