아이콘 글꼴과 접근성 문제

아이콘 글꼴은 문자를 글리프에 매핑하므로 글자 하나가 하트나 화살표로 표시됩니다. 크기 조절에는 편리하지만 스크린 리더에는 위험 요소가 많습니다.

많은 아이콘 글꼴은 유니코드의 개인 사용 영역에 글리프를 숨깁니다. 글꼴이 적용되지 않으면 스크린 리더가 무작위 상자나 이상한 글자를 읽을 수 있습니다.

글꼴 파일이 차단되거나 로드에 실패하면 아이콘 대신 대체 글리프가 표시됩니다. 그러면 명확한 아이콘이 있어야 할 자리에 엉뚱한 문자가 나타납니다.

아이콘 글꼴은 CSS 의사 요소를 통해 글리프를 삽입하는 경우가 많습니다. 이렇게 생성된 콘텐츠는 불안정하며 보조 기술이 잘못 읽기 쉽습니다.

아이콘 글꼴의 글리프가 장식용이라면 이를 감싸고 aria-hidden="true"를 추가하여 의미 없는 문자가 접근성 트리에 도달하지 않게 하십시오.

글리프가 의미를 전달한다면 숨겨진 아이콘을 실제 시각적으로 숨겨진 텍스트와 함께 사용하여 글꼴이 실패해도 의미가 유지되게 하십시오.

일부 사용자는 난독증이나 저시력을 이유로 글꼴을 덮어씁니다. 그러면 사용자의 글꼴이 기존 글꼴을 대체하여 모든 아이콘 글리프가 일반 문자로 바뀝니다.

브라우저 번역은 글리프 문자를 다른 텍스트로 바꿀 수 있습니다. 아이콘 글꼴은 기술적으로 이미지가 아니라 문자이기 때문에 아이콘이 뒤섞입니다.

인라인 SVG는 이 모든 문제를 피합니다. 실제 이미지이므로 글꼴 변경과 번역에도 영향을 받지 않고 role과 레이블도 깔끔하게 적용할 수 있습니다.

요즘은 아이콘 글꼴을 퇴출하고 인라인 SVG나 SVG 스프라이트를 사용하는 것이 좋습니다. 선명한 렌더링을 얻고 접근성 문제도 크게 줄일 수 있습니다.

개발자 도구에서 글꼴을 차단한 뒤 새로 고침하십시오. 아이콘 대신 엉뚱한 문자가 보인다면 대체 처리와 레이블을 개선해야 합니다.

아이콘 글꼴의 글리프는 취약한 텍스트입니다. 장식용 글리프는 aria-hidden으로 숨기고, 의미 있는 글리프는 실제 텍스트로 보완하며, SVG를 우선 사용하십시오. 🎯