面试题：React中如何为按钮组件添加无障碍访问属性

Question

在React中，假设你正在开发一个按钮组件，描述一下如何添加必要的无障碍访问（a11y）属性，以确保屏幕阅读器等辅助技术能正确解读该按钮的功能和用途，并给出代码示例。

Answer 1

1. 添加 aria - label 属性：
   • 当按钮没有可见文本时，aria - label 可以为屏幕阅读器提供按钮功能的描述。
   • 示例代码：

   import React from'react';
   
   const MyButton = () => {
     return <button aria - label="删除当前项">删除</button>;
   };
   
   export default MyButton;
   

2. 添加 role 属性（通常按钮默认有正确的 role，但了解一下）：
   • 按钮元素本身就有 role="button" 的默认语义，但在一些非标准的元素模拟按钮行为时需要明确添加。
   • 示例代码（假设用 div 模拟按钮，不推荐实际这么做，仅作示例）：

   import React, { useCallback } from'react';
   
   const MyDivButton = () => {
     const handleClick = useCallback(() => {
       console.log('按钮被点击');
     }, []);
     return <div role="button" aria - label="模拟按钮" onClick={handleClick}>模拟按钮</div>;
   };
   
   export default MyDivButton;
   

3. 使用 title 属性（作为补充）：
   • title 属性在鼠标悬停时会显示提示信息，也能为辅助技术提供额外信息。
   • 示例代码：

   import React from'react';
   
   const MyButtonWithTitle = () => {
     return <button aria - label="保存文件" title="将当前文件保存到指定位置">保存</button>;
   };
   
   export default MyButtonWithTitle;