다들 개발할 때 웹 접근성을 챙기시나요?

안녕하세요! META SEO inspector라는 크롬 익스텐션 추천드립니다. 현재 보고있는 사이트를 기반으로 SEO관련 분석해주는 익스텐션인데요, 메타 태그가 빠져있는 부분을 체크해주거나, SEO 점수 향상에 도움되는 Tip을 제안 해줍니다. 빠져있는 메타 태그는 next-seo 컴포넌트를 사용해서 채워 넣으시고, 평소에 마크업 작성할 때 시멘틱하게 작성하는 습관을 들이시면 도움이 될 것 같습니다! https://www.w3schools.com/html/html5_semantic_elements.asp

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