lighthouse 접근성

링크에 인식 가능한 이름이 포함되어 있지 않음

문재 발생 이유 : 로고 SVG를 감싸는 용도로 i태그 안에 svg로 로고를 집어 넣었으나, img 태그가 아니라서 alt가 없음, 웹에서 a태그의 의도를 파악하지 못해 접근성(A11Y) 측면에서 좋지 못함.

해결방법 > span태그에 텍스트 써놓고 label_hidden class 적용

label을 숨길때와 마찬가지로 리더기 인식을 위해 텍스트 추가 후 디자인에는 영향 없게 처리함.

이로 인해서

• 시각적으로는 보이지 않지만, "CLAYN 홈"이라는 텍스트를 제공하여 링크의 의미를 명확히 전달할 수 있음.
• i태그 안의 svg는 로고 역할을 그대로 수행하면서도, 추가적인 alt 없이 텍스트를 따로 제공 가능.
• 이로 인해 접근성(A11Y) 측면에서 적절한 해결책을 제공함.

터치 영역의 크기 또는 간격이 충분하지 않음

문제 이유

저기 있는 a태그들의 간격이 충분하지 않아서 발생한 이유임.

해결방안 -> a태그에게 충분한 간격을 제공

이로 인해서

• 사용자의 실수(터치 오작동) 방지
• 접근성(모두를 위한 웹)
• Google 및 SEO 최적화

를 챙김 **SEO란?=>웹사이트가 검색 결과에서 더 높은 순위에 오르게 만드는 방법

제목 요소가 내림차순으로 표시되지 않음

문제 이유

• HTML 문서에서 제목 태그가 논리적인 계층 구조를 따르지 않기 때문에 발생하는 접근성(A11Y) 문제.

  해결 방안 -> 헤드라인을 내림차순으로 사용

  

anytime_section의 h2 태그와 형제요소인 sec4article 속에서 h3태그를 스킵하고 h4가 쓰여져 있어 이를 h3로 수정함.

"video 요소에 [kind="captions"] 지원 track 요소가 포함되지 않음"

문제 발생 이유:
비디오에 캡션(자막)이 포함되지 않아서 발생하는 접근성(A11Y) 문제입니다.

그러나 **CLAYN에서 사용한 모든 비디오는 배경으로 깔아 놓는 형식임.

따라서 스크린 리더기에서 읽혀지면 애초에 안됨.

이를 타파하기 위해

해결 방안 -> role="presentation"와 aria-hidden="true" 속성 추가.

• role="presentation"을 사용하면 스크린 리더가 이 비디오를 무시하게 됨
• 배경 비디오에 자막이 필요하지 않다는 것을 명확하게 전달
• Google Lighthouse 및 웹 접근성 검사에서 오류 발생 가능성 낮아짐
• aria-hidden="true"도 같이 적용하면 더 확실하게 스크린 리더가 무시하게 됨

---

접근성 100점을 챙김.