Question

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

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

我遇到的问题来自于我不知道<aside>中会有多少文字，所以我无法将高度设置为此标记。我也不能使用position: absolute，或者它可能与主要内容重叠。

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

enter image description here

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

<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。根据该规范，您可以访问＆＃34; order＆＃34;因此可以将第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/

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

2 个答案: