> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/mini-project/part-1/eslint.md).

# ESLint 접근성 검사

React 앱에서 아래와 같이 사용된 앵커 코드는 모두 접근성 문제를 일으키는 잘못된 예입니다. 앵커 요소의 역할은 `href` 속성을 통해 특정 페이지 또는 현재 페이지의 특정 위치로 이동하는 것입니다. 하지만 아래 방법은 모두 역할을 무시하고 JavaScript로만 제어하는 잘못된 것들입니다.

```
<a href="javascript:void(0)" onClick={handleClick} >액션</a>
<a href="#" onClick={handleClick} >액션</a>
<a onClick={handleClick} >액션</a>
```

위와 같이 JavaScript로만 컨트롤 하는 경우 앵커가 아닌, 버튼 요소를 사용해야 합니다.

```
<button type="button" onClick={handleClick} >액션</button>
```

하지만 a 요소를 사용했음에도 버튼 역할(`role="button"`)을 수행하도록 구성할 수 있습니다. 이런 경우 `href` 속성은 키보드 포커스 역할을 수행하는 목적으로 사용되므로 값이 중요하지 않습니다. (`tabIndex` 속성 대체 가능) 그럼에도 접근성 검사는 이를 현재 판별할 수 없어 사용자가 직접 오류가 아님을 알려줘야 합니다.

[eslint-plugin-jsx-a11y ](https://github.com/evcohen/eslint-plugin-jsx-a11y)의 [anchor-is-valid](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md) 접근성 오류 검사를 회피하려면 다음과 같이 [인라인 비활성화 주석](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)을 작성 추가합니다.

```
/* eslint-disable jsx-a11y/anchor-is-valid  */
```