可访问性和Javascript:加载动态内容或显示&;隐藏
我对前端代码中的可访问性标准比较陌生 我的问题是:可访问性和Javascript:加载动态内容或显示&;隐藏,javascript,html,css,accessibility,web-accessibility,Javascript,Html,Css,Accessibility,Web Accessibility,我对前端代码中的可访问性标准比较陌生 我的问题是: 对于可访问性,是否最好先加载所有HTML内容,然后通过“隐藏”属性显示/隐藏 或者我可以动态加载内容并用适当的属性填充它吗 如果是,您建议我向内容添加哪些属性来通知用户内容已更新和/或更改 例如: 我有一个导航栏,上面有一些按钮/选项卡,可以加载适当的内容。我可以加载所有内容,然后显示/隐藏is,如下所示: <nav> <div class="tabs" role="tablist&qu
- 对于可访问性,是否最好先加载所有HTML内容,然后通过“隐藏”属性显示/隐藏
- 或者我可以动态加载内容并用适当的属性填充它吗
- 如果是,您建议我向内容添加哪些属性来通知用户内容已更新和/或更改
我有一个导航栏,上面有一些按钮/选项卡,可以加载适当的内容。我可以加载所有内容,然后显示/隐藏is,如下所示:
<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>
>
表2
表内容-1
表内容-2
或者,我可以通过选项卡/按钮单击动态加载内容
<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>
>
表2
首先,您应该使用CSS display:none而不是aria hidden来隐藏内容。属性aria hidden只能在非常特定的情况下使用。
我建议搜索一下什么时候应该和不应该使用aria hidden,以及为什么会这样。许多问题已经很好地涵盖了这个主题
回到您最初的问题,仅就可访问性而言,如果内容只是可见的或加载的,则不会有太大变化
使用aria活动区域来告知内容正在加载,以防加载可能需要一段时间。
但是,不要对更新的/新的内容本身使用aria-live,特别是当它很长和/或包含可聚焦的元素时
决定是显示/隐藏还是动态加载基本上不是可访问性的问题。它更多地取决于初始和后续加载时间,以及您希望在哪一时刻达到的响应水平。您对遵守哪一个A11Y标准/规范感兴趣?我没有使用所有的评估软件。然而,我使用的少数几个方法在动态加载数据时效果不佳。例如facebook,他们会阅读页面,但一旦你向下滚动,页面就会添加更多内容。但是软件nevers知道重新开始读取,当您手动启动时,它会再次从顶部读取。如果您使用标签并隐藏和显示,软件将全部读取,而在技术上是隐藏的,软件通常不在乎。尽管这取决于软件。