Question

我正在开发一个WordPress主题，我打算用Bootstrap开发它。对于这个主题，可以选择使用三列（左侧边栏，内容，右侧边栏）布局（或者甚至只是左侧边栏，然后内容将适用于此问题）。

无论如何，我是盲目的，所以我敏锐地意识到，当有视力的用户可以通过大量的小部件移动内容左侧的侧边栏时只是为了获取内容本身是多么烦人只是看不起内容。所以我的问题是：你怎么能让屏幕阅读器（也许是dom？）看到左侧边栏在内容之后，但仍然是直接在Bootstrap内容的左边？

我想到了一种可能的方法，即在第1列和第3列中使用它们之间的内容制作两个空白div，然后转到新行并使用它们之间的空白div执行第1列和第3列，但这只是看起来真的的hackish。

有什么想法吗？

Answer 1

ARIA规范定义aria-flowto property;但是，屏幕阅读器对此属性的支持是有限的。有关更多信息，请参阅以下网页：

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

我刚刚在Safari 9.0.1 / VoiceOver for Mac OS 10.11.1和Firefox 41.0.2 / Windows Narrator for Windows 10的“Using aria-flowto to give users a choice of reading order”页面上查看了示例，发现{{1没有效果。在Microsoft Edge浏览器/ Windows讲述人中，从“每日星球”导航跳转到选举结果部分，然后跳到体育新闻部分，但不会返回天气部分。因此，在浏览器和屏幕阅读器的组合中似乎部分支持aria-flowto。

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

例如：

aria-flowto

请注意，主要内容标记首先按源顺序显示，并通过<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>推送到3列（可视化）。左侧边栏标记按源顺序显示在下方，并通过col-md-push-3从6列（视觉上）拉出。

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

Answer 2

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

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

2 个答案: