使用 VoiceOver 跳转到内部链接

Question

我正在寻找一种方法，使用语音辅助功能从导航链接跳转到我连接的链接页面的内部部分。

例如： 我的左侧有一个链接列表。一种是用于表格。当我单击“表单”时，我的表单列表将填充到该面板的右侧，然后如果您单击特定表单，该表单将显示在该面板的右侧。该页面包含 3 个面板，左侧为导航，中间为列表，右侧为表单。

现在，如果我单击“表单”链接，我必须按 Tab 键浏览整个导航面板才能到达新打开的表单列表。

是否有一些我缺少的 ARIA 元素可以帮助从表单链接直接切换到我的表单列表？

Answer 1

有两种简单的方法可以做到这一点。

请注意，以下两种方法都不需要任何

aria

即可工作，以下示例中的

aria

纯粹是向页面添加部分和标题时的最佳实践。

选项 1 - 锚点

第一个是使用指向页面上的 id 的锚点。

在你的侧边栏中

<a href="#forms">forms</a>

主页部分

<section aria-labelledby="forms">
    <h2 id="forms">Forms</h2>
    <!---your forms --->
</section>

请注意我如何为页面内容指定标题（选择适当的标题级别），然后用

aria-labelledby

标记该部分。这些都不是使该方法发挥作用所必需的，但这是一个很好的做法。

您唯一需要做的就是确保您的

href

与标题 ID 匹配。

但是，鉴于您正在填充页面右侧的表单（我假设使用 AJAX 调用），您可能需要使用 JavaScript 手动管理焦点......

选项 2 - 使用 JavaScript 和

.focus()

如果您使用的是 JavaScript，则遵循类似的原则，为部分标题指定一个 ID，但这次表单列表加载后，将焦点设置在列表标题上。

html

<!--your link in the menu -->
<a href="#forms" id="getForms">forms</a>

<!--section on the page, I omitted the aria here for clarity / simplicity but it is still needed-->
<section>
    <h2 id="forms" tabindex="-1">Forms</h2>
</section>

JavaScript

// start: however you have this implemented at the moment
const formsLink = document.querySelector("#getForms");

formsLink.addEventListener('click', function(e){
    e.preventDefault();
    get('yourURL').then((data) => {
        // populate the list
        list.update(data);
        // end: however you have this implemented at the moment

        // once the list is populated set focus on the heading (last thing to do after everything else is done) 
        document.querySelector('#forms').focus();
    });

});

请注意，在此示例中，

<h2>

具有

tabindex="-1"

。

我们需要它来实现程序化的重点。我们使用

-1

，这样我们就可以通过 JavaScript 聚焦标题，但它不会添加到页面焦点顺序中（因此您无法使用 Tab 访问它）。