개발자

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

2022년 11월 02일조회 449

회사에서 SEO를 향상시키려고 하는데 혹시 좋은 실천 방안이 있을까요? 현업에서 웹 접근성을 어떻게 고려하는지 궁금합니다. next.js로 개발하고 있습니다!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

성원님의 프로필 사진

안녕하세요! 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를 지정하는 방법을 추가로 고려해 보시면 될 것 같습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!