如何为Next.js中通过SVGR导入为React组件的SVG添加alt属性

alt属性支持说明 #

SVGR导入的SVG本质是内联插入到页面的DOM节点，不是<img>标签，因此不支持直接使用alt属性，我们可以通过SVG原生的可访问性属性实现完全等价的效果。

分场景实现可访问性 #

1. 语义类SVG（有实际含义、需要被屏幕阅读器识别） #

这类SVG包括站点logo、功能按钮图标、信息提示图标等，需要按以下方式配置：

• 给组件添加role="img"属性，向辅助设备声明该元素是图片类型
• 用aria-label属性填写描述内容，作用完全等价于img标签的alt属性
  使用示例：

import UserIcon from './icons/user.svg'

// 渲染用户头像入口图标
<UserIcon role="img" aria-label="进入个人中心" />

如果描述内容较长，也可以用aria-labelledby属性关联页面上已有的描述文本节点，适配更复杂的场景。

2. 装饰类SVG（无实际含义、仅做视觉美化） #

这类SVG包括页面分割线装饰、背景点缀元素等，不需要被辅助设备识别，直接添加aria-hidden="true"属性即可，避免读屏设备输出无意义内容干扰用户：

import DividerDecoration from './decorations/divider-line.svg'

// 装饰性分割线
<DividerDecoration aria-hidden="true" />

全局默认配置（可选） #

如果需要给所有通过SVGR导入的SVG组件统一添加默认可访问性属性，可以修改next.config.js中的SVGR配置项，示例如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [
                {
                  name: 'addAttributesToSVGElement',
                  params: {
                    // 全局默认给所有SVG添加role="img"属性
                    attributes: [{ role: 'img' }]
                  }
                }
              ]
            }
          }
        }
      ],
    })
    return config
  },
}

module.exports = nextConfig

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