Accessibility, tab, and screen reader HTML page
I am creating a page that requires a specific reading direction and tab direction for accessibility.
The page starts with the left navigation, then the main content. In this main content (in blue below) I have a tag <aside>
(green) to be read after the main content that was read.
The problem with this is because I don't know how much text will be inside mine <aside>
, so I cannot set the height of this tag. I cannot use position: absolute
or it may overlap the main content.
Here is the reading direction view I need to apply:
My code looks something like this today:
<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, it <aside>
precedes the second paragraph, so when you go to that, it's before the second paragraph. This is the only way I've found it possible to stretch the top of the blue border and avoid overlapping content in the second paragraph.
The best would <aside>
be to be after the second paragraph, but I can't seem to find a way to position it in the top / right corner without using position: absolute
.
I don't want to use javascript for this, it would be a shame ...
Do you have a suggestion to place this element, letting it stretch in height without overlapping the second paragraph and using the tab / read direction following the second paragraph?
thank
source to share
It has been a while since this question was posted, but I suppose it would be a good idea to answer this question with modern available CSS. To get the layout that you only request with CSS, you'll want to use flexbox. With this specification, you have access to the "order" and thus position the third item as the second.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Browser support for this isn't too bad right now.
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 headed for that small moon. I think I can get him before he gets there...he almost in range. That no moon! It a space station.</p>
</div>
<div class="content">
<p>Are you all right? What 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 now or never.</a> Punch it!</p>
</footer>
CSS (note that this is not a prefix - view the code with the autoprefixer parameter to better understand the true base of CSS 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; }
source to share
tabindex
works. The bottom side of every link, input, button ... must be set manually. This way you don't have to worry about the order of the html tags.
http://jsfiddle.net/fqhs2k8h/2/
The second example works with automatic tabindex
. The difference is that I changed the order of the html element. If you say that the green box should be active after the paragraphs in the blue box, you must put the green box at the end. CSS is for styling and repositioning.
source to share