[Web] Web Accessibility

조수현·2025년 6월 15일

서론

웹 접근성을 배운 뒤로 웹 접근성에 관련된 아티클이 많이 보이는 것 같다
아는 만큼 보이는 건지 아니면 몇 년 전보다 사람들이 많이 관심을 갖게 되는 건지 모르겠다
뭐가 됐든 좋은 것 같다~
(우리 블터디 사람들은 잘 아는 내용이라 도움이 안되겠지만 쓰고 싶어서 써 봤습니당 ㅋ)

참고

W3C 웹 접근성

웹 접근성이란

웹 사이트를 장애를 가진 사람들도 편리하게 사용할 수 있도록 설계 및 개발된 것

시각 장애를 가진 사람도 차별 없이 사이트를 이용할 수 있어야 함
마우스를 사용할 수 없는 환경에서 키보드로 접근이 가능해야 함

💡장애를 가진 사람들을 위한 설계는 장애를 가지지 않은 사람에게도 편리함을 제공할 수 있음

화면을 볼 수 없는 상황 (강한 햇빛, 액정 파손 등)
일시적인 장애 상황 (부상, 안경 분실 등)
느린 네트워크 환경

접근성을 확인하는 방법

개발자 도구의 lighthouse 검사를 통해 접근성 수치를 확인할 수 있음

접근성 트리 확인

접근성 >

접근성을 높이는 방법

시맨틱 태그(semantic tag)

div와 같이 의미 없는 태그의 남발은XXX
header, footer, main, p, heading (h1, h2...)와 같이 의미있는 태그를 사용해서 마크업
이렇게 의미있는 태그를 사용하면 스크린 리더에서 읽기 용이해 짐

의미 없는 태그


<div>
  <span>접근성 높이기!<span>
</div>

시맨틱 태그

<section>
  <h1>접근성 높이기!<h1>
</section>

role 속성

div는 container로 의미가 없음 따라서 role이라는 속성을 사용해 의미를 부여해 주면 접근성을 높일 수 있음
이미 의미가 있는 태그의 role은 기본적으로 부여 되어있으니 원래의 의미를 변경시는 것은 권장하지 않음

<div role="button">⭐️</div>

ARIA 속성

ARIA란 Accessible Rich Internet Applications의 약자로 접근성에 필요한 기술을 제공

aria 접두사로 시작하는 속성들을 활용해 마크업
aria 제단에서 생성한 속성으로 접근성 관련된 속성
aria 태그는 html 기본 속성 외에 더 필요할 경우 사용

<button aria-label="메뉴">🍔</button>

WAI-ARIA

대체 텍스트

img 태그의 alt, input의 label과 같이 스크린 리더에게 콘텐츠를 설명해 줄 수 있는 콘텐츠 삽입
sr-only 클래스를 사용해 설명글을 숨길 수 있음

sr-only

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	clip: rect(0 0 0 0);
}