✍🏻 접근성 개선 작업을 하며 배운 것들

▪️스크린 리더 사용법 익히기 “접근성 대응을 위한 첫 번째 관문은 장애를 가진 유저가 어떻게 서비스를 사용하고 있는지 아는 것이다.” ▪️접근성을 개선할 서비스를 스크린 리더로 제어해보기 “우리 서비스가 장애를 가진 유저에겐 어떻게 느껴지는지 확인해본다.” ▪️서비스 접근성 개선하기 “중요한 정보를 읽어주지 않는 이유는 지정된 대체 텍스트가 없기 때문이었다.” “보이스오버가 투머치토커가 된 이유는 요소의 그룹화가 잘못되었기 때문이었다.” ▪️컴포넌트별 대응 요령 “상태가 있는 버튼은 aria-label에 상태 정보를 함께 전달해줘야 한다.” “ 담지 않은 이미지는 aria-hidden을 이용하자.” “다이얼로그나 모달의 경우에는 포커스 관리를 해주자.” ▪️웹뷰 접근성 디버깅 “웹뷰 디버깅을 위해 시뮬레이터와 함께 Accessibility Inspector를 사용할 수 있다. 하지만 실제 보이스오버와 다르게 동작하는 경우가 있기 때문에 시뮬레이터 대신 단말기에 직접 빌드해서 보이스오버로 디버깅하길 권한다.” ▪️시맨틱 마크업(Semantic Markup) “접근성을 개선하면서 div를 header, footer, nav로 바꾸고 다이얼로그 컴포넌트의 role 속성을 dialog로 설정했다.” ▪️접근성 개선의 유익 “접근성은 장애가 있는 사람만을 위한 것이라는 오해가 사라졌다. SEO에도 도움이 된다는 말을 하고 싶은 게 아니다. 접근성 대응은 개발자에게 큰 유익을 준다.”