[React공식문서읽기] 접근성

접근성

웹 접근성은 웹 사이트에서 제공하는 정보를 제한/차별없이 제공하는 것을 의미한다.

React는 웹 접근성을 준수하여 개발할 수 있도록 모든 지원을 하며 대부분 표준 HTML기술이 사용된다고 한다.

 

JSX에서는 모든 * 을HTML 속성을 지원한다.

대부분의 Dom property와 attribute에 대한 값은 camelCase로 지원되고, area-*와 같은 attribute는 일반적인 HTML과 마찬가지로 hypen-case로 작성해야 한다.

<input 
    type="text" 
    aria-label="label" 
    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setData(e.target.value)}
    value={data}
/>

시맨틱 HTML

접근성의 기초이다.

정보의 의미가 강조되는 HTML element를 웹 사이트에서 사용하면 자연스럽게 접근성이 갖추어진다.

React로 구성한 코드가 div와 같은 element를 사용하여 html의 의미가 깨지곤 한다.

이경우 React Fragment를 사용하여 여러 element를 하나로 묶어주는 것을 권장한다.

(React Fragment는 추후 posting)

접근성 있는 form

Labeling

<input>이나 <textarea>와 같은 모든 html form 컨트롤은 구분할 수 있는 label이 필요하다.

<label htmlFor="namedInput">Name:</label>
<input className="named-input" type="text" name="name"/>

오류 안내 : 오류 상황은 모든 유저가 알 수 있어야 한다.

포커스 컨트롤 : 모든 Web Application은 키보드만 사용하여 모든 동작을 사용할 수 있어야 한다.

키보드

contents 건너뛰기 : Web Application은 유저들의 키보드 탐색을 돕고 탐색 속도를 높일 수 있도록, 이전에 탐색한 영역을 건너뛸 방법을 제공해야 한다.

포커스 관리

React Application은 런타임 동안 지속해서 html dom을 변경하기 때문에, element의 포커스가 잘못될 수 있다.

이를 수정하기 위해, 키보드 포커스를 올바른 방향으로 변경해 주어야 한다.

ref, useRef를 사용하여 포커스를 설정할 수 있다. (useRef, ref는 추후 포스팅)

* 주의 : 사용자가 Application을 어떻게 사용하길 원하는 것을 예측하여 포커스를 잡지말고, 키보드 포커스가 흐트러졌을 경우 이를 고치는 방법으로 사용해야 한다.

마우스 포인터 이벤트

마우스 혹은 이벤트로 노출된 모든 기능을 키보드 만으로 사용할 수 있도록 보장해야 한다.

포인터 장치만 고려할 경우, 키보드 사용자들이 Application을 사용하지 못하는 경우가 많다.

위와 같은 상황이 있다.

클릭 이벤트로 인한 접근성이 떨어지는 경우이다.

마우스를 사용하는 유저는 위의 상황에서 대처할 수 있지만, 키보드만 사용하는 유저는 기능이 가려져 접근성이 떨어지게 된다.

이를 onBlur나 onFocus와 같은 적절한 event handler를 사용하여 키보드만을 사용하는 유저도 모든 기능에 접근할 수 있도록 해야 한다.

복잡한 위젯 : 복잡한 위젯으로 접근성이 떨어지면 안된다.

언어설정 : 페이지 텍스트에 human language를 나타내야 한다.

문서 제목 : 현재 페이지의 맥락에 올바른 title을 설정해야 한다.

가시성 : 모든 사용자의 가시성을 고려해야 한다.

 

참고 : ko.reactjs.org/docs/accessibility.html

접근성 – React