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

我正在构建一个需要辅助特定阅读方向和选项卡方向的页面。HTML页面的辅助功能，选项卡和屏幕阅读器

页面以左侧导航栏开始，然后是主要内容。在主要内容（蓝色下面）中，我有一个<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来做到这一点，那将是一种耻辱......

你有什么建议给这个元素的位置，使其在高度上伸展不重叠第二款，第二段之后有甩尾&的阅读方向？

谢谢

来源

2015-01-13 alexmngn

-1

tabindex正在工作。每个链接，输入，按钮......都必须手动设置。这样你就不必关心html标签的顺序了。

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

第二个例子的工作原理与自动tabindex。不同的是，我改变了html元素的顺序。如果你说绿框在蓝框的段落之后应该是活动的，你应该把绿框放在最后。 CSS是用于造型和重新定位的责任人。

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

来源

2015-01-13 20:45:05 localghost

第一个例子不适用于我，因为我不知道我的网页的所有链接... 我已经尝试过你的第二个例子，这实际上是我在我的任务中解释的离子，文本是重叠的。我用更多的内容编辑你的小提琴来向你展示问题：http://jsfiddle.net/xxvp52ke/3/ – alexmngn

http://jsfiddle.net/xxvp52ke/4/将蓝框的填充改为宽度绿色框架 – localghost

如果我正在更改蓝色框架的填充，这将在旁边创建一个空白列，并且我希望文本适合蓝色框架，就像您在我的图像上看到的那样。虽然，如果绿框推低第二段，那很好。 – alexmngn

它已经有一段时间，因为这个问题被张贴，但我想，这将是很好的回答这个问题，有现代化的可用CSS。要获得只需要CSS的布局，您将需要使用flexbox。有了这个规范，你可以访问“订单”，因此可以将第三个项目定位为第二个项目。

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设置，以获得真正的跨浏览器CSS代码库的一个更好的主意codepen）：

*, *: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

来源

2016-04-30 14:39:26

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

回答

相关问题