실무에서의 접근성
Source: Dev.to
디지털 접근성은 단순히 기술적인 규칙을 준수하는 것을 넘어섭니다.
이는 사람들을 포함하고, 자율성을 보장하며, 모든 사람이 공정하게 탐색하고, 상호작용하고, 콘텐츠를 소비할 수 있도록 하는 것을 의미합니다.
이 포스트에서는 프론트엔드 개발에서 적용 가능한 실용적인 접근성 개념을 공유합니다 — 의미론적 HTML부터 ARIA를 의식적으로 사용하는 방법 및 필수 도구까지.
개발자는 접근 가능한 인터페이스를 구축하는 데 핵심적인 역할을 합니다.
모든 사람이 사용할 수 있는 디지털 제품을 제공하는 것은 우리의 책임이며, 여기에는 시각, 운동, 청각 또는 인지 장애를 가진 사용자도 포함됩니다.
📌 접근성은 포함한다
- 좋은 코드 관행
- WCAG 및 ARIA와 같은 표준 사용
- 개발 초기부터의 관심
브라질에서는 디지털 접근성이 법으로 보장된 권리입니다.
코드에 포함하는 것은 세상에 포함하는 것입니다.
🛠️ ARIA (Accessible Rich Internet Applications)
W3C 사양으로 동적 컴포넌트를 더 접근 가능하게 만드는 속성을 제공합니다.
보조 기술이 이해할 수 있게 합니다:
- 요소의 역할
- 요소의 상태
- 요소의 속성
현대 인터페이스에서 많은 커스텀 컴포넌트를 다룰 때 필수적입니다.
공식 문서
📚 정보 제공 원칙
| 원칙 | 예시 |
|---|---|
| Perceptível – 정보는 모든 사람이 인식할 수 있도록 제공되어야 합니다. | 이미지에 대체 텍스트 추가. |
| Operável – 인터페이스는 모든 사용자가 이용 가능해야 합니다. | 키보드만으로 전체 탐색 가능하도록 허용. |
| Compreensível – 콘텐츠는 이해하기 쉬워야 합니다. | 명확한 지침과 간결한 메시지를 포함한 양식. |
| Robusto – 코드는 보조 기술과 호환되어야 합니다. | 시맨틱 HTML 및 ARIA를 올바르게 사용. |
🔧 분석 도구
axe DevTools
- Chrome 또는 Firefox에 확장 프로그램을 설치합니다.
- DevTools를 엽니다.
- axe DevTools 탭으로 이동합니다.
- Scan을 클릭합니다.
- 문제와 제안을 분석합니다.
NVDA (NV Access)
- 시각 장애인 사용자의 경험을 테스트하기 위한 필수 도구입니다.
- 팁: INSERT + S를 눌러 음성 모드를 전환합니다.
- 공식 사이트:
🏷️ 시맨틱 HTML (와 를 모두 사용하지 마세요)
| Tag | 설명 |
|---|---|
| “ | 페이지 또는 섹션의 헤더를 나타냅니다 (로고, 제목, 내비게이션). 서로 다른 컨텍스트를 가진 경우라면 여러 개를 사용할 수 있습니다. |
| “ | 주요 또는 보조 내비게이션 블록입니다. 사이트 또는 섹션의 내비게이션을 나타내는 링크 집합에만 사용합니다. |
| “ | 페이지의 주요 콘텐츠를 포함합니다. 유일해야 하며 중복된 콘텐츠(메뉴, 푸터 등)는 제외합니다. |
| “ | 더 큰 주제 안에서 관련된 콘텐츠를 그룹화합니다. 목적을 설명하는 제목을 반드시 포함해야 합니다. |
| “ | 보조 또는 부가적인 콘텐츠(사이드바, 광고, 추가 정보 등)입니다. |
| “ | 페이지 또는 섹션의 푸터입니다(기관 정보, 저작권, 보조 링크 등). |
| “ | 페이지 외부에서도 독립적으로 의미를 갖는 콘텐츠(게시물, 카드, 뉴스, 제품 등)입니다. |
제목 계층 구조 (→)
- 스크린 리더를 통한 탐색, 콘텐츠 이해, 시각/시맨틱 조직을 용이하게 합니다.
- 필요 없는 경우 레벨을 건너뛰지 마세요.
📄 시맨틱 구조 예시
사용 가능한 코스
프론트엔드 강좌
접근성을 갖춘 Angular
Angular를 사용하여 접근 가능한 애플리케이션을 만드는 방법을 배우세요.
실전 React와 WCAG
React에 적용된 접근성 모범 사례.
백엔드 강좌
접근 가능한 REST API
접근성을 고려하여 API를 문서화하고 구조화하는 방법.
🖼️ 이미지의 alt
alt 속성은 이미지를 볼 수 없는 사람들을 위해 이미지를 설명합니다.
[Image: Pizza de pepperoni com queijo derretido e bordas crocantes]📢 ARIA 사용 예시
접근성 이름 (보이는 텍스트가 없을 때)
✕
✔ 화면 판독기가 올바르게 알립니다.
기존 요소를 사용한 레이블 (aria-label보다 권장됨)
사용자 프로필
…
### 추가 설명 (도움말 또는 오류)
```html
Insira um e‑mail válido
📢 스크린 리더: “편집 필드, 유효한 이메일을 입력하세요”.
스크린 리더 전용 콘텐츠 숨기기
★✔ 장식 아이콘에 유용합니다.
요소에 의미론적 역할 지정
- ...
열림/닫힘 상태 표시
Menu
...
✔ 열림/닫힘 상태를 나타냅니다.
선택된 옵션
Opção 1
비활성화된 버튼 (여전히 포커스 받음)
Enviar
⚠️ 여전히 포커스를 받습니다 — 가능한 경우 disabled 속성도 함께 사용하세요.
📌 결론
접근성은 “부가 기능”이 아니라 개발의 필수 요소입니다.
시맨틱 HTML을 채택하고 ARIA를 올바르게 적용하며 테스트 도구를 사용함으로써, 우리의 디지털 제품이 진정으로 포괄적임을 보장합니다.
코드에 포함하는 것은 세상에 포함하는 것입니다.
블라인드 사용자의 경험 시뮬레이션
👉 간단하면서도 강력한 연습
접근성 조정이 없는 구현을 열어보세요.
- NVDA 시작
- 눈을 감기
- 키보드와 화면 읽기 프로그램만으로 탐색 시도
접근성은 시각적인 디테일이 아니라 완전한 경험입니다.
감사합니다!