JSX-A11Y插件中no-redundant-roles规则详解

JSX-A11Y插件中no-redundant-roles规则详解

eslint-plugin-jsx-a11y Static AST checker for a11y rules on JSX elements. 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-jsx-a11y

规则概述

no-redundant-roles是JSX-A11Y插件中的一条重要规则，用于检测并防止在JSX元素上设置冗余的ARIA角色(role)属性。这条规则属于前端无障碍(A11Y)最佳实践的一部分，可以帮助开发者编写更符合无障碍标准的代码。

为什么需要这条规则

在HTML中，许多元素本身就具有默认的语义角色。例如：

• <button>元素默认具有button角色
• <img>元素默认具有img角色
• <nav>元素默认具有navigation角色

当开发者显式地为这些元素添加与默认角色相同的ARIA角色时，就造成了冗余。这种冗余不仅没有必要，还可能导致以下问题：

1. 增加代码量，降低可读性
2. 可能造成维护时的困惑
3. 在某些情况下可能影响屏幕阅读器的正确解析

规则配置

该规则默认配置允许<nav>元素保留其navigation角色，这是遵循W3C的建议。开发者可以自定义配置来允许其他元素的特定默认角色。

配置示例：

{
  'jsx-a11y/no-redundant-roles': [
    'error',
    {
      nav: ['navigation'],
      // 可以添加其他元素及其允许的角色
      header: ['banner'],
      footer: ['contentinfo']
    },
  ],
}

正确与错误示例

正确用法

<div />  // div没有默认角色，可以添加任何角色
<button role="presentation" />  // 设置与默认不同的角色
<MyComponent role="main" />  // 自定义组件可以设置角色

错误用法

<button role="button" />  // 冗余，button已有默认button角色
<img role="img" src="foo.jpg" />  // 冗余，img已有默认img角色

无障碍指南建议

1. 遵循HTML语义：优先使用具有正确语义的HTML元素，而不是依赖ARIA角色
2. 避免冗余：不要为元素添加与默认角色相同的ARIA角色
3. 特殊情况处理：对于确实需要覆盖默认角色的情况，才显式设置ARIA角色

技术背景

ARIA(Accessible Rich Internet Applications)是一组属性，用于增强Web内容的可访问性。然而，ARIA应该作为HTML语义的补充，而不是替代。大多数HTML元素已经具有浏览器实现的默认语义和角色，过度使用ARIA反而可能降低可访问性。

实际开发建议

1. 熟悉常用HTML元素的默认ARIA角色
2. 在不确定是否需要设置角色时，查阅MDN文档
3. 使用JSX-A11Y插件并启用这条规则，让工具帮助检测冗余角色
4. 对于自定义组件，根据需要显式设置适当的ARIA角色

通过遵循这些最佳实践，开发者可以创建更简洁、更易维护且更具可访问性的Web应用。

eslint-plugin-jsx-a11y Static AST checker for a11y rules on JSX elements. 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-jsx-a11y