---
title: 웹 접근성 및 포용적 설계 (a11y)
category: Art
tags: [Accessibility, a11y, Semantic HTML, Inclusivity]
created: 2026-04-20
---

# [[Accessibility_Inclusivity|Accessibility_Inclusivity]] (포용적 설계와 접근성)

## 📌 한 줄 통찰 (The Karpathy Summary)
> 웹은 '모두'를 위한 공간이어야 한다. 신체적 제약이 시스템 이용의 제약이 되지 않게 하는 것은 '매너'가 아니라 전문 개발자의 '책임'이다.

## 📖 구조화된 지식 (Synthesized Content)
- **Semantic HTML (의미론적 태그)**:
    - `<div>`로만 도배하지 마라. `<main>`, `<article>`, `<section>`, `<nav>` 등 의미가 담긴 태그를 써야 기계(스크린 리더)와 검색 엔진이 내 콘텐츠의 중요도를 파악한다.
- **ARIA & States**:
    - 표준 HTML로 설명이 불가능한 인터랙션(예: 커스텀 탭 메뉴)은 `aria-label`, `aria-hidden` 등을 통해 기계에게 보조 설명을 전한다.
- **Keyboard Navigation**:
    - 마우스 없이 `Tab` 키와 `Enter` 키만으로 내 앱의 모든 핵심 기능을 수행할 수 있는지 검증하라. 포커스링을 숨기지 마라. 누군가에게는 유일한 가이드라인이다.

## ⚠️ 모순 및 업데이트 (RL Update)
- 접근성을 챙기는 것은 단순히 윤리적인 문제를 넘어, **SEO(검색 노출)** 성적과 직결된다. 구글 검색 로봇은 눈이 없기에, 스크린 리더와 유사한 방식으로 우리 사이트를 평가하기 때문이다.

## 🔗 지식 연결 (Graph)
- Related: [[Styling_Governance|Styling_Governance]] , [[React_Clean_Code_Best_Practices|React_Clean_Code_Best_Practices]]
- Ethic: [[Collaboration_Governance|Collaboration_Governance]]