Intro
이전 프로젝트에서는 MUI와 같은 CSS라이브러리를 쓰면서 웹접근성은 크게 생각도 해보지 않았으며, 라이브러리가 알아서 해주리라 생각을 해왔다.
물론, 지금 리뉴얼하고 있는 프로젝트에서도 headlessui를 쓰면서 기본적인건 처리해주고 있겠지만, 직접 만들고 있는 버튼, 인풋 등의 기본 태그와 더불어 framer-motion을 활용하여 만든 바텀시트, 컨펌창 등은 스크린리더를 사용해보니 사용이 불가능할듯 하여
조금씩이나마 웹접근성에 대해서 공부해서 프로젝트에 적용해보려 한다.
스크린 리더 사용법
- 크롬 웹스토어
- screen reader 검색
- Screen Reader 확장 추가
- 크롬에서 만든 확장 프로그램
- Screen Reader 확장 링크
- 확장 설치 후 자동 적용
- 비활성화 필요 시, 확장 관리에서 비활성화처리
배경지식
스크린 리더가 앱을 읽는 방법
요소(HTML Element)기준으로 이동하며, 요소, 역할 등에 따라서 읽는 방식이 달라짐
스크린 리더가 요소를 포커스 했을 때 읽는 우선순위
- author(accessible name): 특정 속성을 사용해서 정하는 값
- aria-label, aria-labeledby, img태그의 alt속성 등...
- contents: 요소의 내용
ex)
<div aria-label="author 입니다.">
contents 입니다.
</div>-> 스크린리더는 'author 입니다'를 읽는다.
Role 속성
- 스크린리더가 요소를 어떤 방식으로 다룰지 결정하는 속성
-> 속성에 따라서 읽는 방식의 차이가 있음 - 시맨틱 태그는 암시적으로 Role을 가지고 있음
ex)
<button>버튼</button>
<button role="button">버튼</button>
<!-- 두개의 버튼은 역할이 같음 -->Children Presentational
- 부모요소의 역할(Role)에 따라서 자식요소를 읽는 방식이 달라 질 수 있음
ex)
<!-- 1. role이 없는 div -->
<!-- "span / span2" 이런식으로 끊어서 읽음 -->
<div>
<span>span1</span>
<span>span2</span>
</div>
<!-- 2. role이 button인 div -->
<!-- "span1 span2 버튼" 이어서 읽으며, 맨뒤에 부모의 역할까지 읽음 -->
<div role="button">
<span>span1</span>
<span>span2</span>
</div>- 자식요소의 accessible name이 있을 경우, 모아서 content로 사용
읽을 필요 없는 이미지 처리
- 이미지태그에 alt속성이 없을 경우, 스크린리더에서는 이미지 태그의 src속성의 이미지 경로를 읽으므로, 안읽고 넘어가게 하기 위해선
alt=""를 처리
ex)
<img src="#" alt="" />탭버튼과 같은 선택된 속성 구분법
<button role="tab" aria-selected="true">
탭 1
</button>
<button role="tab" aria-selected="false">
탭 2
</button>-> 탭 1이 선택됨 (aria-selected로 구분)
role="checkbox"인 경우aria-checked="true" | "false"로 쓸 수 있음
바텀시트, 모달 등의 컴포넌트
role="dialog"로 역할 설정aria-modal="true"로role="dialog"역할 밖의 요소들에 포커스가 되지 않도록 처리- backdrop(모달 뒤에 깔리는 어두운배경)등과 같이 스크린리더에서 읽을 필요 없는 요소에는
aria-hidden="true"처리
- 이외, 토스트/컨펌 등의 요소는
role="alert"로 처리
위 내용들외에도 접근성을 고려해야 할 곳이 너무도 많기에 나머지 내용들은 적용해보면서 공부해야 할 것 같다.
r이 열한개!