저는 접근성 마크를 취득해 본 경험이 있는데요. 작년에 FE Conf 2021에서 토스에서 근무하시는 김도한 님이 발표한 '접근성을 준수해서 스크린리더 UX 개선하기' 세미나 영상을 추천드립니다.

저는 접근성 마크를 취득해 본 경험이 있는데요. 작년에 FE Conf 2021에서 토스에서 근무하시는 김도한 님이 발표한 '접근성을 준수해서 스크린리더 UX 개선하기' 세미나 영상을 추천드립니다. 이 영상은 토스 모바일 앱이 접근성 인증 마크를 취득하는 과정에서 알게 된 점과 인사이트를 공유해 주는데요. 생각보다도 적은 노력으로 접근성과 UX를 개선할 수 있는 사례를 다룹니다. 1. 큰 의미 없는 img 태그의 alt는 어떻게 처리해야 하는지 2. 토스트 팝업 시에는 태그에 role 을 할당해 줌으로써, 토스트 팝업이 뜰 때 해당 메시지를 자동으로 읽어준다든지 3. dialog 가 실행됐을 때의 해당 dialog 요소 외에 요소를 focus 할 수 없게 만들려면 dialog 외의 요소에 aria-hidden="true"로 준다든지 등등 스크린리더가 어떻게 동작하고 어떻게 처리해야 하는지 원리와 함께 구체적인 예시가 소개됩니다. 그리고 Next.js를 사용하시고 계신다면, custom document로 전역 meta tag를 지정하는 방법을 추가로 고려해 보시면 될 것 같습니다.