[React] 공식문서 학습(문서) : 고급 안내서 (1), 작성중..

고급 안내서는 카테고링 없이 심화기능이 열거되어 있다. 글을 정리하다 분량이 길어지면 나눌 생각이다.

---

💙 접근성

웹 접근성은 모두가 사용할 수 있는 웹사이트를 디자인, 개발하는 것을 의미한다. React는 접근성을 적극 지원하며, 대부분은 표준 HTML 기술이 활용된다.

 

0. 표준 및 지침

WCAG(Web Content Accessibility Guidelines) 라는 접근성을 갖춘 웹사이트를 만드는데 필요한 지침을 제공한다.

(링크 : www.w3.org/WAI/standards-guidelines/wcag/)

 

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 문서는 접근성을 갖춘 JS위젯을 만드는 기술들을 제공한다.

JSX는 모든 aria-* HTML 어트리뷰트를 지원하며, React의 다른 DOM 프로퍼티와는 다르게 hypen-case(kebab-case, lisp-case)로 작성.

(링크 : www.w3.org/WAI/standards-guidelines/aria/)

 

1. Semantic HTML(태그)

시맨틱 HTML(혹은 시맨틱 태그)는 웹 어플리케이션 접근성의 기초이다. 정보의 의미가 강조되는 HTML 엘리먼트를 태그를 통해 명시한다.

반복되는 요소를 <li>로 표현하고, 그 상위를 <ul>로 묶거나, <table> 활용, <header> & <footer> 적용 등이 해당된다.

 

2. 접근성 있는 폼

1) 라벨링

<input>, <textarea> 등 폼 컨트롤은 구분 가능한 라벨이 필요하다. 스크린 리더가 컨트롤러에 대한 설명으로서 참고한다.

<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

* Javascript의 for 반복문 문법과 혼선을 피하기 위해, htmlFor 이라는 프로퍼티 속성명을 사용하고 있음을 명심하자!

 

2) 사용자들에게 오류 안내하기

오류 발생 시, 이를 전달하여 스크린 리더가 오류 문구를 노출하도록 해야 한다.

 

3. 포커스 컨트롤

웹 어플리케이션을 키보드만 사용하여 동작할 수 있도록 만드는 것이다.

또한, 키보드 탐색 효율을 높이기 위해 내부 페이지 영역을 <main>, <aside> 등 대표성을 띄는 엘리먼트들로 나눠야하며,

프로그래밍적 포커스 관리를 위해 이전 DOM 엘리먼트를 저장하여 부적절한 키보드 포커스를 방지해야 한다.

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.inputElement = React.createRef();
  }
  render() {
    return (
      <CustomTextInput inputRef={this.inputElement} />
    );
  }
}

// 이제 필요할 때마다 포커스를 잡을 수 있습니다.
this.inputElement.current.focus();

createRef() (혹은 hooks의 useRef()) 메서드를 사용하여 current 엘리먼트를 저장한 뒤, 여기에 포커스를 맞출 수 있다.

 

* 포커스 컨트롤은 모달창에서 특히 중요하다. (모달을 열면 그 안으로 한정짓거나, 닫은 경우 이를 연 요소로 이동) => react-aria-model

 

4. 마우스와 포인터 이벤트

마우스(포인터) 이벤트로 모든 기능을 구현하면, 키보드 사용자들은 불편함을 겪을 수 있다. 대표적인 예시가, '외부 클릭 패턴' 이다.

이러한 팝오버를 닫을때, 일반적으로 window에 클릭 이벤트를 부여한다. 하지만, 키보드의 경우 이것이 불가능하여 불편함을 겪을 수 있다.

이 경우를 위해, onFocus / onBlur 이벤트 핸들러를 추가적으로 부여하여 탭기능을 지원한다.

 

---

 

[출처] React 공식문서 : ko.reactjs.org/docs/accessibility.html