ReactJS 中的可访问性

ReactJS 可访问性：可访问性是一种必要的工具或方法，通过这些工具或方式，用户可以轻松访问网站，其功能包括可点击的按钮、下拉菜单或空格，以编写评论和内容。

React 完全支持构建可访问的网站，通常使用标准的 HTML 技术。

语义 HTML：语义 HTML 是 Web 可访问性的基础，因为它们为开发人员和测试团队提供了便利。有时我们使用太多的

来包装我们的代码以使其工作，这反过来又会导致理解代码和调试代码的问题。

所以有时，我们会使用 <> 或 之类的片段来对我们有利。请记住，我们需要先导入片段。

例子：

Javascript

import React, { Fragment } from 'react';
function studentList() {
  return (
          
        
24
          
 Stefen Sen
      );
}

标签属性：有很多标签属性可以做出反应。标签属性属性设置或返回标签属性的值。

label 属性之一是 htmlFor 属性，它设置或返回属性的值。

例子：

Javascript

// Using htmlFor in label of form 
// Remember the camelCase writing
  
Name:

键盘焦点：键盘焦点是指 Web 应用程序中从用户那里接受来自键盘的数据或操作的部分，通常指的是 DOM 输入。主要在用户填写表单或任何类型的输入字段时使用。

有时 TAB 用于进入表单中的下一个条目。

React 中的引用： React 中的引用更像是 React 的关键。它是 react 中的一个属性，可以存储对特定 react 元素的引用。它提供了一种访问 React 元素以供参考的方法，并且在我们需要在不使用 prop 的情况下更改子元素时使用。

例子：

Javascript

class MyComponent extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
  }  
  render() {  
    return 
;  
  }  
}

鼠标和指针事件：大多数时候我们使用鼠标或指针设备访问互联网，因此我们必须非常清楚鼠标或指针事件，如单击、双击、悬停等。

示例：此示例用于外部单击。

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
  
function clickMe() {
  alert("You Just Clicked");
}
  
const clickFun = (
  Click Me!
);
  
  
ReactDOM.render(clickFun, document.getElementById('root'));

示例： onBlur 和 onFocus 的代码。

Javascript

function App() {
  const [fieldValue, setFieldValue] = React.useState('');
  
  const handleBlur = (e) => setFieldValue(e.target.value);
  
  console.log(fieldValue);
  
  return ;
}
  
  
function App() {
  const [fieldValue, setFieldValue] = React.useState("");
  
  const handleChange = (e) => setFieldValue(e.target.value);
  
  console.log(fieldValue);
  
  return ;
}

此代码将功能公开给指针设备和键盘用户。另请注意添加的 aria-* 道具以支持屏幕阅读器用户。为简单起见，尚未实现启用弹出选项的箭头键交互的键盘事件。