在 HTML5 中使用 ARIA 为辅助功能分离 tabIndex 顺序

Question

有什么方法可以使用 WAI-ARIA 为 HTML5 中的可访问元素提供单独的 tabIndex 顺序？

用例：让我们举一个用 HTML 呈现多项选择题的情况。它可以有一个问题文本、带标签的单选按钮和一个提交按钮。

这里只有单选按钮和提交按钮应该是可标签的。而屏幕阅读器应该可以访问所有三个组件。应该在阅读单选按钮标签之前阅读问题文本。

例如，请检查以下链接中的问题http://www.html5tests.com/tests/intro/intro-00.php

在这种情况下我们应该如何使用 aria。

Answer 1

The Using WAI-ARIA in HTML Spec 提供了一些关于使用 ARIA 的实用指南。正如该规范中所写的the first rule of ARIA use 是：

如果您可以使用原生 HTML 元素 [HTML5] 或已内置所需语义和行为的属性，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问，那么请执行所以。

在您的情况下，<fieldset> HTML 元素已内置您的所有要求，因此我将使用 <fieldset> 而不是使用其他东西并使用 ARIA 重新调整它的用途。这是一个示例实现：

<fieldset>
    <legend>We hear that the internet is based on HTML. What is HTML exactly?</legend>
    <p>
        <input type="radio" name="HTML" id="option1" />
        <label for="option1">HTML is a protocol that is used to route data across the internet, via TCP/IP.</label>
    </p>
    <p>
        <input type="radio" name="HTML" id="option2" />
        <label for="option2">HTML is a text-based language that is used to structure and present content on the world wide web.</label>
    </p>
    <p>
        <input type="radio" name="HTML" id="option3" />
        <label for="option3">HTML is a binary file format that codes web pages for use on the Internet.</label>
    </p>
    <p>
        <input type="radio" name="HTML" id="option4" />
        <label for="option4">HTML is a disk file system used in modern operating systems.</label>
    </p>
</fieldset>

<input type="submit" value="Submit Answer" />

请记住，这并不意味着您必须在原生 HTML 元素和 ARIA 之间做出选择。始终首先选择最符合语义的元素，如果您仍有其他要求，请使用 ARIA 补充该元素。

您可以在本文中找到有关字段集技术的更多信息：H71: Providing a description for groups of form controls using fieldset and legend elements。