💻 접근성(feat. 리액트 공식문서)

waterglasses·2022년 10월 3일

React 접근성

TIL

목록 보기

38/50

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

접근성이 필요한 이유

웹 접근성은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것을 의미한다.

React는 접근성을 갖춘 웹사이트를 만들 수 있도록 모든 지원을 하고 있으며, 대부분은 표준 HTML 기술이 사용된다.

접근성을 준수하면 보조기기 사용자의 접근성을 향상시킬 수 있으며, SEO도 향상 시킬 수 있다.

표준 및 지침

WCAC(Web content Accessibility Guidelines)

접근성을 갖춘 웹 사이트를 만드는 데 필요한 지침을 제공한다.

WAI-ARAI(Web Accessibility Initiative - Accessible Rich Internet Applications)

접근성을 갖춘 JavaScript 위젯을 만드는 데 필요한 기술들이 담겨 있다.

JSX에서는 모든 aria-* HTML 어트리뷰트를 지원하고 있다. 이 어트리뷰트는 일반적인 HTML과 마찬가지로 hypen-case로 작성해야 한다.

<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

JSX란?

JavaScript를 확장한 문법이다. JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

시멘틱 HTML

시멘틱 HTML은 웹 애플리케이션에 있어 접근성의 기초이다. HTML 태그를 웹 사이트에서 사용하면 자연스럽게 접근성이 갖추어진다. 즉, 의미에 맞는 태그를 사용해 문서를 작성하는 것을 말한다.

리액트에서는 <div> 와 같은 엘리먼트를 사용하는 것보다 React Fragment를 사용해서 여러 엘리먼트를 묶는 것을 권장한다.

import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  );
}

접근성 있는 폼

라벨링

<input>과 <textarea> 같은 모든 HTML 폼 컨트롤은 스크린 리더를 사용하는 사용자를 위해 구분할 수 있는 라벨이 필요하다.

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

포커스 컨트롤

키보드 포커스와 포커스 윤곽선

React 앱들은 런타임동안 HTML DOM을 변경하기 때문에, 가끔 키보드 포커스를 잃거나 예상치 못한 엘리먼트에 포커스를 맞추곤 한다.

⚠️ 키보드 포커스는 매우 중요한 접근성 기능이지만, 동시에 매우 조심해서 사용해야 한다. 키보드 포커스 흐름이 흐트러졌을 때 이를 고치려는 방법으로 사용해야 한다.

원하는 콘텐츠로 건너뛸 수 있는 방법

키보드로 이전에 탐색한 영역을 건너뛸 방법을 제공해야 한다.

Skil Navigation Links

키보드 사용자가 페이지와 상호작용할 때만 표시되는 숨겨진 링크들

네비게이션 건너뛰기 링크 만들기(ex. <nav>)
일시적으로 숨겨진 건너뛰기 링크(ex. 초점이 맞춰지면 보임)

프로그래밍적으로 포커스 관리하기

예를 들어, 모달이 닫힌 후에는 모달을 열었던 버튼으로 키보드 포커스를 다시 맞춰주어야 함

React에서 포커스를 지정하는 방법

DOM 엘리먼트에 ref 사용

공식문서 Refs and the DOM

클래스형 컴포넌트의 리액트 내장 함수 createRef

class App extends React.Component {
  componentDidMount() {
    this.divRef = React.createRef();
  }
  render() {
    return (
      <div>
        <div id="divR" ref={this.divRef}>
          App, here
        </div>
      </div>
    );
  }
}

함수형 컴포넌트의 리액트 훅 useRef

import React, { useRef } from "react";

const App = () => {
  const divRef = React.useRef();
  const valueRef = React.useRef(90);
  return (
    <div>
      값 : {valueRef.current}
      <div id="divR" ref={divRef}>
        App, here
      </div>
      <button onClick={() => (valueRef.current = 88)}> 증가 </button>
    </div>
  );
};

export default App;