html - 在 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是:

If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

就您而言，<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" />

请记住，这并不意味着您必须在 native HTML 元素和 ARIA 之间进行选择。始终首先选择最语义化的元素，如果您还有其他要求，请使用 ARIA 补充该元素。

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