SVG 아이콘 접근성

Icons - Material Design

Google 머터리얼 디자인 아이콘을 사용할 경우, 접근성을 준수하는 방법에 대해 학습합니다. 안타깝게도 공식 머터리얼 디자인 아이콘 가이에 접근성 관련된 주제는 소개되고 있지 않습니다. 향후 추가 되길 기대해봅니다.

Icons - Material Design

사용법

Google Web Fonts 에서 서비스되는 머터리얼 디자인 아이콘 폰트를 HTML 문서에 로드 하도록 설정합니다.

<link 
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

아이콘 폰트를 적용하는 방법은 Fontawesome 과 유사합니다. 차이점이 있다면 클래스 속성이 아닌, 텍스트 콘텐츠에 따라 아이콘 폰트가 변경된다는 점입니다.

<i class="material-icons">face</i>

사용 가능한 아이콘 텍스트 콘텐츠는 Icons 페이지에서 확인하세요.

Material Design Icons

사용자 정의 클래스

사용자 정의 클래스를 정의할 때는 머터리얼 디자인 가이드에 따라 아이콘 클래스를 설계해야 합니다.

/* 아이콘 크기 변경 클래스 */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* 아이콘 Light 테마에 설정하는 명도 대비 클래스 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 아이콘 Dark 테마에 설정하는 명도 대비 클래스 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

접근성

머터리얼 디자인 아이콘 <i> 요소에 포함된 텍스트 콘텐츠에 따라 아이콘 모양이 변경 되므로 적용 가능한 텍스트 콘텐츠는 반드시 필요합니다. 문제는 불필요한 해당 내용을 스크린리더에 정보를 제공한다는 것입니다.

머터리얼 디자인 아이콘의 텍스트 콘텐츠

표현 아이콘

아이콘이 의미를 가지고 있지 않은 UI 디자인에서는 다음과 같이 aria-hidden 속성 값을 true로 설정해 스크린리더에서 읽지 않도록 처리 합니다.

<a href="#">
  <i class="material-icons" aria-hidden="true">face</i> 
  회원 등록
</a>

의미 아이콘

아이콘이 의미를 가지는 UI 디자인에서는 다음과 같이 aria-label 속성 값으로 적절한 텍스트 콘텐츠를 설정해 스크린리더에서 읽히도록 처리 합니다.

<a href="#">
  <i class="material-icons" aria-label="회원 등록" title="회원 등록">face</i>
</a>