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/