웹 접근성? 🤔
텍스트웹 접근성은 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념
개선방법
1. 단순 명확한 HTML 구조, 시맨틱 태그
시맨틱 태그란? 웹 페이지의 구조와 의미를 명확하게 전달해서 스크린 리더가 콘텐츠를 쉽게 이해하도록 도와준다.
ex) <header>, <nav>, <main>, <article>, <footer>2. ARIA 속성 활용
스크린 리더가 동적 콘텐츠나 복잡한 UI 요소를 올바르게 인식할 수 있도록 도와준다.
<div role="button" tabindex="0" aria-label="메뉴 열기">☰</div>role="button" → 이건 버튼
tabindex="0" → 키보드로 접근 가능
aria-label="메뉴 열기" → 시각적 힌트 없이도, 보조기기는 "메뉴 열기"
3. 키보드로도 페이지를 탐색할 수 있도록 포커스 지정
키보드 사용자가 필요한 정보에 접근하기 쉽도록 도와준다.
ex) 마우스 없이도 Tab 키만으로 웹페이지를 사용
스크린 리더란? 👀
시각 장애인이나 저시력자가 웹 페이지를 음성이나 점자로 이해할 수 있도록 하는 프로그램
