javascript - 可访问性和 Javascript:加载动态内容或显示和隐藏?
问题描述
我对前端代码中的可访问性标准相对较新。
我的问题是:
- 对于可访问性,最初加载所有 HTML 内容并通过“隐藏”属性显示/隐藏它会更好吗?
- 或者我可以动态加载内容并用适当的属性填充它吗?
- 如果是这样,您建议我向内容添加哪些属性以通知用户内容已更新和/或更改?
例如:
我有一个导航栏,其中包含一些加载适当内容的按钮/选项卡。我可以加载所有内容,然后显示/隐藏,类似于以下内容:
<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>
解决方案
首先,您应该使用 CSS display:none 而不是 aria-hidden 来隐藏内容。aria-hidden 属性只能在非常特殊的情况下使用。我建议您搜索一下何时应该和不应该使用 aria-hidden,以及为什么会这样。许多问题已经很好地涵盖了该主题。
回到您最初的问题,仅就可访问性而言,如果内容只是可见或已加载,它不会有太大变化。
使用 aria-live 区域来告诉内容正在加载,以防加载可能需要一段时间。但是,不要将 aria-live 用于更新/新内容本身,尤其是当它很长和/或包含可聚焦元素时。
决定是否应该显示/隐藏或动态加载主要不是可访问性的问题。它更多地取决于初始和后续加载时间,以及您在哪个时刻期望的响应水平。
推荐阅读
- firebase - 这种重新加载方法是如何工作的,它到底是用来做什么的?
- typescript - 如何在具有多个 tsconfig.json 的项目中设置路径属性?
- java - Netbean 正在打开 Junit3 模板而不是 Junit4
- angular - 从 api 获取的数据中的角度材料中的分页
- c# - Xamarin C# MainAvtivity.Intent 为空
- windows - 克隆 repo 时 remote-https 不是 git 命令
- javascript - vuex 创建产品详情页面
- javascript - 仅在 tumblr 第一页上的脚本和 css 函数
- java - 在 Java 中查找空闲端口
- html - Flex 容器在父级上增长 - 双滚动条