为何ARIA要求在role="tablist"下必须设置role="tab"？

Great question—this cuts to a core distinction between our own CSS class conventions (like your .cars list where you infer each <li> is a "car") and how ARIA roles work for accessibility. Let’s break down why explicit role="tab" is necessary, even when the parent is a tablist:

1. ARIA Doesn’t Rely on Implicit "Parent-Child Inference" Like CSS Classes #

Your .cars example is a convention you’ve defined for your own codebase—there’s no universal rule that a <ul class="cars"> must have <li> elements representing cars. ARIA, though, is a standardized language for communicating with assistive technologies (screen readers, keyboard navigation tools, etc.).

ARIA roles are explicit by design because ambiguity would break accessibility. A <ul role="tablist"> tells assistive tech "this is a tab container," but it doesn’t automatically assume every child element is a tab. For example, you might have a "Add Tab" button inside the tablist alongside actual tabs—you wouldn’t want that button to be treated as a tab!

2. Default Element Roles Take Priority #

A plain <li> has a default ARIA role of listitem. Even inside a tablist, that default role doesn’t get overridden automatically. To make assistive tech recognize the <li> as a tab, you need to explicitly set role="tab" to replace its default role.

This is different from some native elements (like <button>, which has an implicit button role), but tab isn’t a default role for any HTML element—so it has to be declared.

3. Flexibility in Markup Structure #

ARIA doesn’t force you to use <ul>/<li> for tablists. You might build a tablist with <div> elements, or even <span>s (though we’d recommend using focusable elements like buttons for interactivity). In these cases, there’s no inherent parent-child relationship that assistive tech could use to infer the tab role—explicitly setting role="tab" is the only way to make the structure clear.

4. Consistency Across Assistive Technologies #

Different screen readers and assistive tools have varying levels of support for edge cases or implicit assumptions. By explicitly setting role="tab", you eliminate guesswork and ensure your tab interface works reliably for all users, regardless of the tool they’re using.

In short: Your CSS class convention is a shortcut for your code, but ARIA roles are a precise communication tool for assistive tech. Explicitly declaring role="tab" ensures clarity, avoids ambiguity, and keeps your interface accessible to everyone.

内容的提问来源于stack exchange，提问作者aaaaaa