[refactor] 웹 접근성 개선 - ARIA 속성 및 시맨틱 마크업 적용

[skyblue1232]

🛠️ 만들고자 한 기능 설명

• 웹 접근성(Accessibility) 강화를 위한 전체 컴포넌트 리팩토링
• 시맨틱 마크업 및 ARIA 속성 적용으로 스크린리더 호환성 개선
• sr-only 활용으로 시각적으로 숨기되 스크린리더용 텍스트 제공
• 주요 인터랙션 요소(button, input, video, map, board 등)에 접근성 속성 보완

✅ TODO LIST (Task, 버그 수정 등등)

• 주요 페이지(MainPage, Board, VideoPlayPage)에 role, aria-label 구조 적용
• 공통 컴포넌트(BottomNav, CourseInputSection, CourseSelectSection)에 시맨틱 보완
• sr-only 적용: 스크린리더 안내 텍스트 추가 (별도 스타일 불필요)
• 상위 레이아웃 단에서 role="main" 및 영역 구분 처리
• 접근성 관련 불필요한 중복 속성 정리 및 구조 단순화

⏰ 예상 작업 시간

약 5h ~ 6h

📝 참고 링크(선택)

• W3C WAI-ARIA 표준 가이드
• MDN - ARIA: Accessible Rich Internet Applications
• TailwindCSS sr-only Docs

🗣️ ETC(선택)

• aria-* 속성 적용 후 시각적 UI 영향 없음 (디자인 그대로 유지)
• 공통 컴포넌트의 role은 상위 문맥에서 처리하도록 구조화 완료

📸 피그마 스크린샷 (선택)