1.6 KiB
1.6 KiB
title, category, tags, created
| title | category | tags | created | ||||
|---|---|---|---|---|---|---|---|
| 웹 접근성 및 포용적 설계 (a11y) | Software Architecture |
|
2026-04-20 |
Accessibility_Inclusivity (포용적 설계와 접근성)
📌 한 줄 통찰 (The Karpathy Summary)
웹은 '모두'를 위한 공간이어야 한다. 신체적 제약이 시스템 이용의 제약이 되지 않게 하는 것은 '매너'가 아니라 전문 개발자의 '책임'이다.
📖 구조화된 지식 (Synthesized Content)
- Semantic HTML (의미론적 태그):
<div>로만 도배하지 마라.<main>,<article>,<section>,<nav>등 의미가 담긴 태그를 써야 기계(스크린 리더)와 검색 엔진이 내 콘텐츠의 중요도를 파악한다.
- ARIA & States:
- 표준 HTML로 설명이 불가능한 인터랙션(예: 커스텀 탭 메뉴)은
aria-label,aria-hidden등을 통해 기계에게 보조 설명을 전한다.
- 표준 HTML로 설명이 불가능한 인터랙션(예: 커스텀 탭 메뉴)은
- Keyboard Navigation:
- 마우스 없이
Tab키와Enter키만으로 내 앱의 모든 핵심 기능을 수행할 수 있는지 검증하라. 포커스링을 숨기지 마라. 누군가에게는 유일한 가이드라인이다.
- 마우스 없이
⚠️ 모순 및 업데이트 (RL Update)
- 접근성을 챙기는 것은 단순히 윤리적인 문제를 넘어, SEO(검색 노출) 성적과 직결된다. 구글 검색 로봇은 눈이 없기에, 스크린 리더와 유사한 방식으로 우리 사이트를 평가하기 때문이다.
🔗 지식 연결 (Graph)
- Related: Styling_Governance , React_Clean_Code_Best_Practices
- Ethic: Collaboration_Governance