可访问性和Javascript:加载动态内容还是显示和隐藏？

Question

对于前端代码中的可访问性标准，我是相对较新的。

我的问题是：

accessibility，的

• 最初加载所有内容并通过“隐藏”属性显示/隐藏它更好吗？
  • 或者我可以动态加载内容并使用适当的attributes?
  • And填充它如果是这样的话，建议我在内容中添加哪些属性来通知用户内容已经更新和/或更改了？

例如，：

我有一个导航栏，有一些按钮/标签，以加载适当的内容。我可以加载所有内容，然后显示/隐藏如下所示：

 <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>

或者我可以通过选项卡/按钮点击动态加载内容。

<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显示:无，而不是咏叹调-隐藏的内容。属性aria-隐藏只能在非常特殊的情况下使用。我建议你搜索一下什么时候应该使用和不应该使用咏叹调-隐藏，以及为什么是这样。许多问题已经很好地涵盖了这个问题。

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

使用aria区域来显示内容正在加载，以防需要一段时间才能加载。但是，不要对更新/新内容本身使用aria-live，特别是如果它是长的和/或包含可聚焦的元素。

决定是显示/隐藏还是动态加载基本上不是一个可访问性问题。这在很大程度上取决于初始加载时间和后续加载时间，以及您期望的响应级别。