# ReactJS - 접근성
React에서 접근성에 대한 소개
안녕하세요, 미래의 React 개발자 여러분! 오늘은 종종 제대로 주목받지 못하는 웹 개발의 중요한 측면 하나를 다루어보겠습니다: 접근성. React를 몇 년 동안 가르쳐온 사람으로서, 이 주제의 중요성을 강조할 수 없습니다.
접근성은 종종 a11y(11개의 글자가 'a'와 'y' 사이에 있기 때문에)로 약자되며, 우리의 웹 애플리케이션이 가능한 한 많은 사람들이 사용할 수 있도록 하는 것에 관한 것입니다. 이는 단순한 좋은 기능이 아닙니다; 좋은 웹 디자인의 기본적인 측면입니다.
접근성이 중요한 이유
당신이 최고의 React 앱을 만들어냈을 상상해보세요. 아름답고, 빠르고, 꿈에 그렸던 모든 것이 다 있습니다. 하지만, 만약 나가 말해준다면, 많은 사용자들이 화면 리더기에 의존하거나 키보드로만 이동할 수 있다면, 그들의 사용이 불가능하다는 것을요? 접근성이 여기서 중요한 역할을 합니다.
우리의 React 애플리케이션을 접근성 있게 만들어 두면, 모든 사람들, 그들의 능력에 관계없이, 우리의 창작물을 사용하고 즐길 수 있도록 보장합니다. 계단 옆에 램프를 짓는 것과 같은 것이죠 - 휠체어를 탄 사람들뿐만 아니라, 아이를 태운 보스턴, 짐을 싣은 사람들, 그리고 많은 다른 사람들에게도 도움이 됩니다.
React에서 기본 접근성 원칙
1. 의미 있는 HTML 사용
React에서 접근성을 개선하는 가장 쉬운 방법 중 하나는 의미 있는 HTML을 사용하는 것입니다. 예를 들어보겠습니다:
// 나쁜 예시
<div onClick={handleClick}>Click me!</div>
// 좋은 예시
<button onClick={handleClick}>Click me!</button>첫 번째 예시에서는 <div>을 버튼으로 사용하고 있습니다. 시각적으로는 괜찮아 보일 수 있지만, 화면 리더기는 이를 버튼으로 인식하지 못합니다. 두 번째 예시에서는 의미 있는 <button> 요소를 사용하여 접근성을 높입니다.
2. ARIA 속성 사용
ARIA(Accessible Rich Internet Applications) 속성은 보조 기술에 추가 정보를 제공합니다. React에서 이를 어떻게 사용할 수 있는지 보겠습니다:
function CustomButton({ label, onClick }) {
return (
<button
onClick={onClick}
aria-label={label}
>
{label}
</button>
);
}aria-label 속성은 버튼에 레이블을 제공하여 화면 리더기가 사용할 수 있게 합니다. 버튼의 텍스트가 자체적으로 설명이 부족할 때 특히 유용합니다.
3. 포커스 관리
키보드로 이동하는 사용자들에게는 포커스 관리가 매우 중요합니다. React는 autoFocus 속성을 이를 위해 제공합니다:
function LoginForm() {
return (
<form>
<input type="text" placeholder="Username" autoFocus />
<input type="password" placeholder="Password" />
<button type="submit">Log In</button>
</form>
);
}이 예시에서, 사용자가 양식을 로드할 때 자동으로 사용자 이름 입력 필드에 포커스가 맞춰지며, 키보드 사용자들이 즉시 상호작용을 시작할 수 있도록 합니다.
React 특정 접근성 기능
1. Fragment
React의 Fragment 기능은 여러 요소를 그룹화하면서 DOM에 추가 노드를 추가하지 않도록 합니다. 이는 화면 리더기에 대한 논리적 구조를 유지하는 데 특히 유용할 수 있습니다:
function List({ items }) {
return (
<ul>
{items.map(item => (
<React.Fragment key={item.id}>
<li>{item.name}</li>
<li>{item.description}</li>
</React.Fragment>
))}
</ul>
);
}이렇게 하면 관련된 목록 항목들이 함께 유지되면서 불필요한 마크업을 도입하지 않습니다.
2. React 특정 ARIA 속성
React는 특정 ARIA 속성을 다르게 처리합니다. 예를 들어, aria-* HTML 속성은 완전히 지원되지만, aria-valuenow을 React에서 사용하려면 ariaValueNow로 작성해야 합니다:
function ProgressBar({ value }) {
return (
<div
role="progressbar"
aria-valuenow={value}
aria-valuemin="0"
aria-valuemax="100"
>
{value}%
</div>
);
}React에서 접근성 테스트를 위한 도구
React 애플리케이션이 접근성이 있는지 확인하기 위해 다양한 도구를 사용할 수 있습니다. 다음은 몇 가지 인기 있는 옵션을 요약한 표입니다:
| 도구 | 설명 | 사용법 |
|---|---|---|
| React DevTools | 공식 React 브라우저 확장 | 컴포넌트 계층 구조와 속성을 검사 |
| eslint-plugin-jsx-a11y | ESLint 플러그인을 위한 접근성 규칙 | 개발 중 접근성 문제를 찾기 |
| react-axe | React 애플리케이션을 위한 접근성 감사 | 개발 모드에서 접근성 테스트 수행 |
| WAVE | 웹 접근성 평가 도구 | 사이트의 접근성 문제를 분석 |
결론
React에서 접근성은 단순히 규칙을 따르는 것에 관한 것이 아닙니다; 이는 공감과 포용성에 관한 것입니다. 우리의 애플리케이션을 접근성 있게 만들어 두면, 장애가 있는 사용자들에게만이 아니라, 모든 사용자들에게 더 나은 경험을 제공하게 됩니다.
접근성은 지속적인 과정입니다. React 애플리케이션을 개발할 때, 항상 자문해보세요: "모든 사람들이 이를 사용할 수 있을까?" 접근성을 고려하는 것이 습관이 되면, 더 포용적이고 사용자 친화적인 애플리케이션을 만들어 나갈 수 있습니다.
그러므로, 웹을 더 접근성 있는 곳으로 만들기 위해, 하나의 React 컴포넌트씩 노력해보세요! 행복하게 코딩하세요, 그리고 웹 개발의 세상에서는 모두가 파티에 초대됩니다!
Credits: Image by storyset