# SVG 아이콘 접근성

## Icons - Material Design

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

![Icons - Material Design](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESr7zi-rfuCqjScc4q%2Fimage.png?alt=media\&token=f8c00597-68e2-498c-96fb-fd63ea9027ed)

### 사용법

[Google Web Fonts](https://developers.google.com/fonts/) 에서 서비스되는 머터리얼 디자인 아이콘 폰트를 HTML 문서에 로드 하도록 설정합니다.

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

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

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LEStUfBrTEgVr6uIJaX%2Fimage.png?alt=media\&token=9d1b5ad9-6458-4449-83b9-eb548662f265)

사용 가능한 아이콘 텍스트 콘텐츠는 [Icons](https://material.io/tools/icons/?icon=hearing\&style=baseline) 페이지에서 확인하세요.

![Material Design Icons](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESvG7RufZfWTRYG9Pu%2Fimage.png?alt=media\&token=e57b08fb-8957-4be1-be67-58a7e4339417)

### 사용자 정의 클래스

사용자 정의 클래스를 정의할 때는 [머터리얼 디자인 가이드](https://material.io/design/iconography/#design-principles)에 따라 아이콘 클래스를 설계해야 합니다.

```css
/* 아이콘 크기 변경 클래스 */
.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>` 요소에 포함된 텍스트 콘텐츠에 따라 아이콘 모양이 변경 되므로 적용 가능한 텍스트 콘텐츠는 반드시 필요합니다. 문제는 불필요한 해당 내용을 스크린리더에 정보를 제공한다는 것입니다.

![머터리얼 디자인 아이콘의 텍스트 콘텐츠](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESvZkeiBw26bq7pvTk%2Fimage.png?alt=media\&token=aece69fa-2154-4fa7-88b6-22acdb775e90)

**표현 아이콘**

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

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESwJutCQf2FD3tRbYU%2Fimage.png?alt=media\&token=5df676e6-b934-4869-b1aa-9c9993dba959)

**의미 아이콘**

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

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESyn0mH2jaSOfJUhdi%2Fimage.png?alt=media\&token=ef99193e-330e-4e88-bb1d-61f3b013a1de)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-icon-a11y.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.