0

考虑以下 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>
4

2 回答 2

0

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

我们曾经采用这种方法，尽管屏幕阅读器用户可能会（稍微）从该命令中受益，但也有一些人依赖键盘但可以看到屏幕（例如行动不便，人们可能会使用斯蒂芬霍金式的开关使用权）。视频示例。

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

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

更好的解决方案是使用跳转到内容的导航上方的跳转链接： 如何使用跳转链接。

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

如果“其他原因”（也许是搜索引擎优化？）意味着您仍然想使用 nav-last 方法，那么您能说出为什么不喜欢 display-table 方法吗？

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

于 2013-09-10T09:37:33.530 回答
-1 
<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可能导致标签向上移动。

于 2013-09-10T07:24:36.680 回答