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

Question

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

无论如何，我是盲人，所以我敏锐地意识到，当有视力的用户可以通过内容左侧的侧边栏移动大量小部件时，只是为了到达内容本身，这将是多么烦人只是看不起内容。所以我的问题是:如何让屏幕阅读器(也许是 dom？)看到左侧边栏位于内容之后，但仍然使用 Bootstrap 将其直接放在内容的左侧？

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

有什么想法吗？

Answer 1

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

• WCAG 维基文章 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”页面上的示例，发现 aria- flowto 没有效果。在 Microsoft Edge 浏览器/Windows 讲述人中，从“星球日报”导航会跳到选举结果部分，然后跳到体育新闻部分，但不会返回到天气部分。因此，在浏览器和屏幕阅读器的组合中，似乎部分支持 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/