Question

是否可以使用WAI-ARIA为HTML5中的可访问元素提供单独的tabIndex顺序？

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

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

例如，请通过以下链接http://www.html5tests.com/tests/intro/intro-00.php

查看问题

在这种情况下我们应该如何使用咏叹调。

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。

在HTML5中使用ARIA分隔tabIndex的可访问性顺序

1 个答案: