三栏布局的屏幕阅读器如何自定义阅读顺序？

Question

我正在开发一个 WordPress 主题，我打算用 Bootstrap 来开发它。对于这个主题，可以选择具有三列（左侧边栏、内容、右侧边栏）布局（或者甚至只有左侧边栏，然后内容就可以解决这个问题）。

无论如何，我是盲人，所以我敏锐地意识到，当一个有视力的人时，必须通过内容左侧的侧边栏和很多小部件才能到达内容本身是多么烦人用户只能看不起内容。所以我的问题是：如何让屏幕 reader（也许是 dom？）看到左侧边栏在内容之后，但仍然直接位于内容的左侧 Bootstrap?

我想到了一个可能的方法，就是在第1和第3列中做两个空白div，它们之间的内容，然后转到一个新行，并在第1和第3列中做一个空白div 在他们之间，但这看起来真的很老套。

有什么想法吗？

Answer 1

  <form class="form-horizontal" role="form" id="form" runat="server"   method="post">
    <div class="form-group col-md-12">
        <div class="row col-md-4">LeftSidebar</div>
        <div class="row col-md-4">Content</div>
        <div class="row col-md-4">RightSidebar</div>
    </div>
  </form>

Answer 2

ARIA 规范定义了一个 aria-flowto property；但是，屏幕 reader 对此属性的支持是有限的。有关详细信息，请参阅以下网页：

WCAG 维基文章 Using aria-flowto
Using aria-flowto to give users a choice of reading order
ARIA-Flowto (property)

我刚刚检查了 Safari 9.0.1 / VoiceOver 中“Using aria-flowto to give users a choice of reading order”页面上的示例，适用于 Mac OS 10.11.1 和 Firefox 41.0.2 / Windows旁白为Windows10，发现aria-flowto没有效果。在 Microsoft Edge 浏览器/Windows 讲述人中，从 "The Daily Planet" 跳到选举结果部分，然后跳到体育新闻部分，但不会 return 到天气部分。因此，在浏览器和屏幕 reader.

的组合中似乎部分支持 aria-flowto

自定义阅读顺序的典型方法是确保文档中内容的来源顺序与所需的阅读顺序相匹配。使用 Bootstrap，您可以在文档中首先放置主要内容区域，然后是左侧边栏内容，然后是右侧边栏内容。您可以使用 Bootstrap's column ordering CSS 类在视觉上交换左侧边栏和主要内容区域。

例如：

<div class="container">
    <div class="row">
        <div id="main-content" class="col-md-6 col-md-push-3">
            Main content.
        </div>
        <div id="left-content" class="col-md-3 col-md-pull-6">
            Left sidebar content.
        </div>
        <div id="right-content" class="col-md-3">
            Right sidebar content.
        </div>
    </div>
</div>

请注意，主要内容标记按源顺序首先出现，并通过 col-md-push-3 推到 3 列（视觉上）。左侧边栏标记按源顺序显示在下一个，并通过 col-md-pull-6.

拉过 6 列（视觉上）

这是一个实时的 JSFiddle：http://fiddle.jshell.net/pkywjac5/show/

三栏布局的屏幕阅读器如何自定义阅读顺序？

How to customize the reading order by screen readers of a three-column layout?

javascript

css

wordpress

accessibility

twitter-bootstrap