fix(a11y): P2 접근성 이슈 개선 (Landmark, Skip-to-Content, ARIA Labels)

[choihooo]

🎯 Summary

Web Interface Accessibility Audit P2 이슈 수정

docs/26-03-11-web-accessibility-audit.md 문서의 P2 이슈를 수정하여 웹 접근성을 개선합니다.

---

🔴 AS-IS

기존 상태 또는 문제점

• Skip-to-Content Link 없음: 키보드/스크린 리더 사용자가 상단 내비게이션을 건너뛰고 본문으로 바로 이동할 수 없음
• Landmark Region 부족: 시맨틱 구조가 명확하지 않아 스크린 리더가 문서 구조를 파악하기 어려움
• ARIA Label 부족: 활성 링크, 페이지네이션 등 현재 상태를 나타내는 label이 부족
• Decorative 요소 노출: 장식용 요소가 스크린 리더에 불필요하게 읽힘

---

🟢 TO-BE

변경 후 상태 또는 개선점

1. Skip-to-Content Link 추가

• globals.css에 .skip-to-content 스타일 추가 (탭 포커스 시에만 표시)
• MainLayout과 랜딩 페이지에 "본문으로 바로가기" 링크 추가
• main 요소에 id="main-content"와 tabIndex={-1} 추가

2. Landmark Region 개선

• 게시판 필터 섹션: <section aria-label="게시판 필터 및 글쓰기">
• 공지사항 섹션: <section aria-labelledby="pinned-notice-title">
• 게시글 목록: <section aria-labelledby="posts-title">
• 페이지네이션: <nav aria-label="게시글 페이지네이션">

3. 구체적인 ARIA Label 추가

• 내비게이션: 활성 링크에 aria-current="page" 추가
• 페이지네이션: 1 페이지, 2 페이지 (현재 페이지) 등 구체적 label
• 외부 링크: GitHub 링크에 (새 탭에서 열림) 표시
• 아이콘: 모든 decorative 아이콘에 aria-hidden="true" 추가

4. Decorative 요소 처리

• 랜딩 페이지: glow background, grid pattern, 아바타 이미지에 aria-hidden="true" 추가
• 게시판: Pin, PenSquare 등 아이콘에 aria-hidden="true" 추가

---

💬 참고사항

리뷰어가 알아야 할 내용, 논의 포인트, 주의사항 등

• 적용 범위: P2 이슈 중 공통 레이아웃과 자주 사용하는 페이지 위주로 수정
• P0/P1 이슈: 해당 PR에는 포함되지 않음 (별도 작업 필요)
• 테스트 방법:
  • Tab 키로 탐색 시 "본문으로 바로가기" 링크가 첫 번째로 포커스되는지 확인
  • 스크린 리더(NVDA/VoiceOver)로 landmark 탐색 시 섹션이 제대로 인식되는지 확인
• 관련 문서: docs/26-03-11-web-accessibility-audit.md

---

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
study-admin-web	Ready	Preview, Comment	Mar 11, 2026 4:16am