gpt4 book ai didi

html - 使用 CSS 重新排序内容以显示以支持可访问性

转载 作者:行者123 更新时间:2023-11-28 15:32:43 27 4
gpt4 key购买 nike

考虑以下 html 布局。出于可访问性和其他一些原因,我希望菜单位于源代码的第三个位置。但显然菜单实际上应该出现在顶部,在文章之前。我对此有什么选择? (支持 IE8 及以上版本)

<html>
<body>
<article>The article ...</article>
<aside>something aside</aside>
<nav>the menu</nav>
</body>
</html>

目前,我的同事非常不喜欢我使用“显示:表格”(http://jsfiddle.net/Dqzyj/):

<html>
<body style="display:table;">
<article style="display:table-row-group;">The article ...</article>
<aside style="display:table-row-group;">something aside</aside>
<nav style="display:table-header-group;">the menu</nav>
</body>
</html>

最佳答案

从可访问性的 Angular 来看,我不建议重新排序这样的元素。

我们过去采用这种方法,虽然屏幕阅读器用户可能会(稍微)从该顺序中受益,但也有一些人依赖键盘但可以看到屏幕(例如行动不便的人,人们可能会使用斯蒂芬霍金式开关访问)。 Video example .

假设页面有足够的内容来诱导滚动,以这种方式重新排序也会对语音识别产生负面影响。

当他们(有效地)在页面中切换时,焦点似乎会跳过可见的导航,使其看起来不可访问。如果他们通过足够多的选项卡找到导航,那么它会跳回页面,这非常令人迷惑。例如,尝试通过 Tab 键浏览 Lakeland page找到顶部导航。

更好的解决方案是在转到内容的导航上方使用跳过链接: How to use skip links .

注意:这是一篇旧文章,因此演示了“跳转到导航”链接,但原理是一样的。

如果“其他原因”(也许是 SEO?)意味着您仍然想采用导航最后的方法,那么您能说说为什么不喜欢显示表方法吗?

现代方法是使用 flexbox 和排序,但在 IE10 之前不支持。绝对定位可能有效,但请注意缩放页面或调整文本大小不会破坏它。在提出解决方案之前,我需要有关该问题的更多信息。

关于html - 使用 CSS 重新排序内容以显示以支持可访问性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18712256/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com