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/