접근성 기본 세팅 스타터팩｜대체텍스트·키보드 포커스·ARIA 힌트
요약: 접근성은 선택이 아니라 기본 세팅입니다. 본문 이미지는 ALT 템플릿으로, 링크·폼·토글 등 상호작용 요소는 키보드 포커스 스타일로, 보조 안내는 ARIA-label 패턴으로 표준화합니다. 이 글은 즉시 복붙 가능한 코드와 점검표를 함께 제공합니다.
ALT(대체텍스트) 템플릿
ALT는 이미지가 전달하는 의미를 텍스트로 요약해 화면낭독기 사용자에게 정보를 제공합니다. 또한 이미지 검색·콘텐츠 이해의 단서로 활용됩니다. 핵심은 “무엇 + 맥락 + 핵심 수치/행동” 1문장 규칙입니다. 장식용 이미지는 alt=""로 비워 보조기기의 방해를 줄입니다(역할이 없음을 명시).
| 상황 | ALT 템플릿 | 예시 |
|---|---|---|
| 정보 전달(그래프/표) | 무엇 + 핵심 수치/추세 + 맥락 |
“모바일 LCP 2.6→2.0초 개선 추세(4주 평균)” |
| 절차 안내(튜토리얼) | 무엇 + 현재 단계 + 목표 행동 |
“스킨 내보내기 화면, 백업 파일 저장 단계” |
| 컴포넌트 예시(UI) | 무엇 + 변별 포인트 |
“방문 링크 보라색·외부 링크 ↗ 아이콘 예시” |
| 장식/배경 | alt="" |
장식용 파도 배경 |
팁: ALT는 “이미지를 보지 못해도 글을 이해할 수 있는가?”를 기준으로 씁니다. 중복 내용(바로 옆 캡션/본문에 이미 있으면) 축약해도 됩니다.
<!-- 좋은 예 -->
<img src="..." alt="목차 점프 링크 구조: H2 앵커와 scroll-margin-top 적용" width="1200" height="675">
<!-- 장식/아이콘 -->
<img src="..." alt="" aria-hidden="true">
주의: “이미지”, “사진”처럼 무의미한 단어만 쓰거나, 파일명을 ALT로 복사하는 실수는 피하세요.
키보드 포커스 스타일
모든 링크·버튼·폼 요소는 키보드만으로도 탐색 가능해야 합니다. Tab으로 이동하면 포커스가 명확한 테두리로 보이고(:focus-visible), Enter/Space로 조작이 일어나야 합니다. 스킨 제작 시 브라우저 기본 포커스를 제거했다면 반드시 대체 스타일을 넣어야 합니다.
- 포커스 테두리는 최소 3px, 배경과 충분히 대비되는 색 사용.
- 링크·버튼·토글·라디오/체크박스·셀렉트·검색창 모두 동일 규칙 적용.
- 포커스 순서(TabIndex)는 문서 시각 순서와 일치. 불필요한
tabindex사용 지양.
/* 전역 포커스 스타일 */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
outline:3px solid #22c55e; outline-offset:2px; border-radius:8px;
}
/* 스킵 링크: 키보드로 바로 본문으로 이동 */
<a class="skip" href="#main">본문 바로가기</a>
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;display:inline-block;background:#111827;color:#fff;padding:6px 10px;border-radius:8px}
고정 헤더가 있는 블로그는 앵커 점프 시 상단이 가려지지 않도록 :target{scroll-margin-top:72px}을 사용합니다. 이 값은 실제 헤더 높이에 맞춰 조정하세요.
/* 앵커 점프 가림 방지 */
:target{ scroll-margin-top: 72px; }
팁: 미리보기에서 Tab 키만으로 이동해 보고, 포커스 흔적이 끊기지 않는지 확인하세요.
ARIA-label/role 힌트 패턴
ARIA는 시멘틱이 부족한 요소에 보조 정보를 제공합니다. 남용은 금물이며, 먼저 HTML의 **의미 있는 태그**를 선택한 후 꼭 필요한 경우에만 보강합니다. 네비게이션/탭/토글/알림 등에서 aria-label, role, aria-expanded, aria-current, aria-controls 등을 사용합니다.
| 컴포넌트 | 권장 패턴 | 설명 |
|---|---|---|
| 상단 내비 | <nav aria-label="주 내비게이션"> |
역할·맥락을 보조기기에 명확히 전달 |
| 현재 페이지 | <a aria-current="page"> |
목록 중 현재 위치 표시 |
| 탭 UI | role="tablist|tab|tabpanel" |
포커스 이동과 관계 명세 |
| 아코디언/토글 | aria-expanded="true/false", aria-controls |
열림 상태·제어 대상 연결 |
| 아이콘 버튼 | aria-label="검색 열기" |
시각 텍스트가 없을 때 대체 레이블 |
<!-- 상단 내비 예시 -->
<nav aria-label="주 내비게이션">
<a href="/" aria-current="page">홈</a>
<a href="/series">시리즈</a>
<a href="/search">검색</a>
</nav>
<!-- 아이콘 버튼(시각 텍스트 없음) -->
<button type="button" aria-label="검색 열기">
<svg aria-hidden="true" focusable="false">...</svg>
</button>
<!-- 아코디언(요약/세부) -->
<button aria-expanded="false" aria-controls="sec-faq-1" id="btn-faq-1">자주 묻는 질문</button>
<div id="sec-faq-1" role="region" aria-labelledby="btn-faq-1" hidden>...답변...</div>
주의: 시멘틱 태그가 가능한데도 모든 곳에 role을 덧씌우거나, 텍스트가 있는데 aria-label을 중복 지정하는 과용은 오히려 혼란을 줍니다.
팁: “시멘틱 먼저, ARIA는 최소 보강” 원칙을 지키면 유지보수와 호환성이 좋아집니다.
실무 스니펫 모음(복붙용)
ALT 빠른 작성 규칙
정보형: "무엇 + 핵심 수치/추세 + 맥락"
절차형: "무엇 + 현재 단계 + 목표 행동"
UI 예시형: "무엇 + 변별 포인트"
장식형: alt="" aria-hidden="true"전역 포커스·스킵·앵커
:where(a,button,[role="button"],input,select,textarea):focus-visible{
outline:3px solid #22c55e; outline-offset:2px; border-radius:8px;
}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;display:inline-block;background:#111827;color:#fff;padding:6px 10px;border-radius:8px}
:target{scroll-margin-top:72px}
ARIA 최소 패턴
<nav aria-label="주 내비게이션">...</nav>
<a href="/page" aria-current="page">현재</a>
<button aria-label="검색 열기"><svg aria-hidden="true">...</svg></button>
<button aria-expanded="false" aria-controls="panel-1" id="btn-1">열기</button>
<div id="panel-1" role="region" aria-labelledby="btn-1" hidden>...</div>
점검표｜합격 기준과 흔한 실수
| 항목 | 권장 규칙 | 합격 기준 |
|---|---|---|
| ALT | 무엇+맥락+핵심 1문장, 장식은 alt="" |
중복/무의미 ALT 0건 |
| 포커스 | :focus-visible 3px 테두리 |
키보드 탐색 100% 가능 |
| 앵커 | scroll-margin-top 적용 |
고정 헤더 가림 0건 |
| ARIA | 시멘틱 우선·최소 보강 | 오남용 0건 |
자주 틀리는 부분: ALT에 파일명 그대로 사용, 포커스 아웃라인 제거, 모든 곳에 ARIA 남발, 내비에 역할/레이블 누락.
베스트 프랙티스: 글을 발행할 때마다 이미지 3장·링크 3개·폼 1개만 샘플링해서 ALT/포커스/레이블을 점검하세요.
실천 요약
- ALT 1문장 규칙으로 정보형·절차형·UI형을 구분하고, 장식은
alt=""처리. - 키보드 포커스를 전역 CSS로 보장하고, 스킵 링크·앵커 가림 방지 적용.
- ARIA는 시멘틱 우선·최소 보강 원칙으로 내비/탭/토글에만 정확히 사용.