Accessibility, tab and screen reader of HTML page

Question

I'm building a page that requires for accessibility a specific reading direction and tab direction.

The page starts with a left navigation, then the main content. In that main content (in blue below), I have an <aside> tag (in green) that needs to be read once the main content as been read.

The issue I have with that comes from the fact that I don't know how much text will be inside my <aside> , so I'm not able to set the height to this tag. I can't use position: absolute either or it might overlap the main content.

Here is a representation of the reading direction I need to apply:

My code today looks something like that:

<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>

As you can see, the <aside> comes before the second paragraph, so when you tab it's going to this before the second paragraph. That's the only way I found to be able to stretch the top part of the blue frame and avoid the content to overlap on the second paragraph.

The best would be the <aside> to be after the second paragraph, but I can't find a way to position it at the top/right corner without using position: absolute .

I don't want to use javascript to do that, it would be a shame...

Do you have any suggestion to position this element, allowing it the stretch in height without overlapping the second paragraph and with a tabbing & reading direction coming after the second paragraph?

Thanks

Answer 1

It has been some time since this question was posted but I figure it would be good to answer this one with modern available CSS. To get the layout you are asking for with just CSS you will want to use flexbox. With that spec you have access to "order" and can thus position the 3rd item as the 2nd.

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

Browser support for this isn't bad nowadays.

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 ( do note this is not prefixed - view codepen with autoprefixer set to get a better idea of the true cross browser CSS code base ):

*, *: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 is working. Downside every link, input, button ... has to be set manually. This way you don't have to care about the order of the html tags.

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

The second example works with the automatic tabindex . The difference is, I changed the order of the html element. If you say the green frame should be active after the paragraphs in the blue frame, you should put the green frame at the end. CSS is for styling and repositioning responsible.

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