Question

考虑以下html布局。出于可访问性和其他一些原因，我更喜欢菜单位于源代码的第三个位置。但显然菜单应该在文章之前出现在顶部。我有什么选择？（支持IE8及以上版本）

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

目前我使用“display：table”非常不喜欢我的同事（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>

Answer 1

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

我们曾采用这种方法，虽然屏幕阅读器用户可能会从该订单中受益（稍微），但也有人依赖键盘但可以看到屏幕（例如行动障碍，人们可能会使用Stephen Hawking式交换机访问）。 Video example

语音识别也会受到这种方式重新排序的负面影响，假设页面有足够的内容来引导滚动。

当他们（有效地）在页面中切换时，焦点似乎会跳过可见导航，使其显示无法访问。如果他们通过足够的标签找到导航，那么它会跳回页面，这非常迷惑。例如，尝试使用Lakeland page标签来查找顶部导航。

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

注意：这是一篇旧文章，所以演示了“跳到导航”链接，但原理是一样的。

如果“其他原因”（搜索引擎优化可能是？）意味着您仍然希望采用导航最后一种方法，那么您能说出为什么不喜欢显示表方法吗？

现代方法是使用弹性框和排序，但在IE10之前不支持。绝对定位可能有效，但要小心缩放页面或文本大小不会破坏它。在提出解决方案之前，我需要更多关于这个问题的信息。

Answer 2

<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-row-group;">the menu</nav>
    </body>
</html>

将导航样式从table-header-group更改为table-row-group。 table-header-group会导致代码向上移动。

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

2 个答案: