HTML 页面的辅助功能、选项卡和屏幕阅读器

Question

我正在构建一个需要特定阅读方向和标签方向的可访问性页面。

页面以左侧导航开始，然后是主要内容。在该主要内容（下方蓝色）中，我有一个 <aside> 标记（绿色），一旦阅读了主要内容，就需要阅读该标记。

我遇到的问题来自于我不知道我的<aside> 中有多少文本，所以我无法设置这个标签的高度。我也不能使用position: absolute，否则它可能会与主要内容重叠。

这是我需要应用的阅读方向的表示：

我今天的代码看起来像这样：

<nav class="red-frame">
   ...
</nav>
<div class="blue-frame">
   <div>
      <p>...</p>
      <aside class="green-frame">...</aside>
   </div>
   <div>
      <p>...</p>
   </div>
</div>
<footer class="pink-frame"></footer>

如您所见，<aside> 出现在第二段之前，因此当您使用标签时，它会出现在第二段之前。这是我发现能够拉伸蓝框顶部并避免内容与第二段重叠的唯一方法。

最好将<aside> 放在第二段之后，但如果不使用position: absolute，我找不到将其放置在右上角/右上角的方法。

我不想使用 javascript 来做那件事，那太可惜了……

你有什么建议来放置这个元素，让它在高度上伸展而不与第二段重叠，并且在第二段之后有一个制表符和阅读方向？

谢谢

Answer 1

这个问题发布已经有一段时间了，但我认为用现代可用的 CSS 来回答这个问题会很好。要使用 CSS 获得您要求的布局，您需要使用 flexbox。使用该规范，您可以访问“订单”，因此可以将第 3 项定位为第 2 项。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

现在浏览器对此的支持还不错。

HTML：

<main class="main">
  <aside class="rail">
    <nav class="section-nav">
      <ul>
        <li><a href="#">Nav Listed Content</a></li>
        <li><a href="#">Nav Listed Content</a></li>
        <li><a href="#">Nav Listed Content</a></li>
      </ul>
    </nav>
  </aside>
  <article class="article">
    <div class="flex-example">
      <div class="content">
        <h1>Page Title</h1>
        <p>A fighter that size couldn't get this deep into space on its own. Well, he ain't going to be around long enough to tell anyone about us. <a href="#">Look at him.</a> He's headed for that small moon. I think I can get him before he gets there...he's almost in range. That's no moon! It's a space station.</p>
      </div>
      <div class="content">
        <p>Are you all right? What's wrong? <a href="#">I felt a great disturbance in the Force</a>...as if millions of voices suddenly cried out in terror and were suddenly silenced. I fear something terrible has happened. You'd better get on with your exercises.</p>
      </div>
      <aside class="extra-content">
        <ul class="link-list">
          <li><a href="#">Unknown number of links</a></li>
          <li><a href="#">Unknown number of links</a></li>
          <li><a href="#">Unknown number of links</a></li>
          <li><a href="#">Unknown number of links</a></li>
          <li><a href="#">Unknown number of links</a></li>
        </ul>
      </aside>
    </div>
  </article>
</main>
<footer class="footer">
  <p>Star Destroyer. All right, Chewie. Ready for light-speed. If your people fixed the hyperdrive. All the coordinates are set. <a href="#">It's now or never.</a> Punch it!</p>
</footer>

CSS（请注意这不是前缀 - 查看设置了 autoprefixer 的 codepen 以更好地了解真正的跨浏览器 CSS 代码库）：

*, *:before, *:after { box-sizing: inherit; }

body { box-sizing:border-box; }
.main { display:table; width:100%; }
.main > .rail, .main > .article { display:table-cell; vertical-align:top; }
.main > .rail { width:200px; }

.rail { border:1px solid #f00; padding:20px; }
.article { border:1px solid #00f; padding:20px; }
.footer { border:1px solid #f0f; padding:20px; }

.flex-example { display:flex; flex-flow:row wrap; } 
.flex-example > .content { order:3; padding:20px; }
.flex-example > .content:first-child { order:1; width:75%; }
.flex-example .extra-content { order:2; width:25%; padding:20px; border:1px solid #0f0; }

http://codepen.io/ngoodrum/pen/KzrKgb

Answer 2

tabindex 正在工作。每个链接、输入、按钮……都必须手动设置。这样你就不必关心html标签的顺序了。

http://jsfiddle.net/fqhs2k8h/2/

第二个示例适用于自动tabindex。不同的是，我改变了 html 元素的顺序。如果你说绿框应该在蓝框段落之后激活，你应该把绿框放在最后。 CSS是对样式和重新定位负责的。

http://jsfiddle.net/fqhs2k8h/1/