アイコンボタンをアクセシビリティ対応するには、どう作るのがいいと思いますか？

## はじめに
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/98f5c837-c0f6-c3f8-c5fd-b46621c18ea4.png)
みなさんは、ちゃんとアクセシビリティを意識して開発できていますか？
アクセシビリティの中には、どれが正解か分かりにくいものもいくつかあります。

その中で、僕がいつも実装方法に迷ってしまうのが↑画像のようなアイコンフォントを使ったアイコンボタンです。
そのため、アイコンフォントを使ったアイコンボタンアクセシビリティ対応について色々調べてみました。

この記事では、アイコンフォントを使ったアイコンボタンのアクセシビリティ対応についてまとめました。

## アイコンボタンのアクセシビリティ対応の手段
![鉛筆のアイコンに青い背景色がついたボタン。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/72ebd8dd-d56d-5680-d11c-197928507ac3.png)
上記のようなDOM構造のアイコンボタンのアクセシビリティ対応するには、主に以下の3つあります。

1. `<button>`タグに`aria-label`をつける方法
1. `<span>`タグに`aria-label`をつける方法
1. 読み上げ用のラベルをつける方法

これらの方法について、調査したことをまとめます。

### ① `<button>`タグに`aria-label`をつける方法
**○ DOM**
`<button>`タグに`aria-label`をつける方法は、以下のようなコードで実現できます。
```sample.html
<button class="button" aria-label="編集する">
    <span class="icon">edit</span>
</button>
```

<br />

**○ スクリーンリーダー**(VoiceOver)
`<button>`タグに`aria-label`をつける方法で、スクリーンリーダーで読むと以下のように「**編集する、ボタン**」と読み上げられます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5f329b3c-7174-9c2c-f20f-3ef8f8aa03c5.png)

<br />

**○ アクセシビリティ評価**(Lighthouse)
Lighthouseでのアクセシビリティチェックでは100点で問題なさそうです。
![Lighthouseのスクリーンショット。100点と表示されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/76f6a9d2-c0d2-4191-0773-7277458112a2.png)



### ② `<span>`タグに`aria-label`をつける方法
**○ DOM**
`<span>`タグに`aria-label`をつける方法は、以下のようなコードで実現できます。
```sample.html
<button class="button">
    <span class="icon" aria-label="編集する">edit</span>
</button>
```

<br />

**○ スクリーンリーダー**(VoiceOver)
`<span>`タグに`aria-label`をつける方法で、スクリーンリーダーで読むと以下のように「**編集する、ボタン、グループ**」と読み上げられます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/07e25fdb-788a-ba96-cb52-fd21507f7dd2.png)

<br />

**○ アクセシビリティ評価**(Lighthouse)
Lighthouseでのアクセシビリティチェックでは100点で問題なさそうです。
![Lighthouseのスクリーンショット。100点と表示されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/76f6a9d2-c0d2-4191-0773-7277458112a2.png)



### ③ 読み上げ用のラベルをつける方法
**○ DOM**
読み上げ用のラベルをつける方法は、以下のようなコードで実現できます。
```sample.html
<button class="button">
    <span class="hidden">編集する</span>
    <span class="icon">edit</span>
</button>
```

<br />

**○ スクリーンリーダー**(VoiceOver)
読み上げ用のラベルをつける方法で、スクリーンリーダーで読むと以下のように「**編集する edit、ボタン、グループ**」と読み上げられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/184ea4d1-643d-23b2-660b-07d55f35df93.png)

<br />

**○ アクセシビリティ評価**(Lighthouse)
Lighthouseでのアクセシビリティチェックでは100点で問題なさそうです。
![Lighthouseのスクリーンショット。100点と表示されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/76f6a9d2-c0d2-4191-0773-7277458112a2.png)

## アイコンボタンの各企業の実装方法
### Material Design 3 
M3の場合は、`<button>`タグに`aria-label`をつける方法を採用していそうです。

```html
<md-fab aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>
```
ref: https://github.com/material-components/material-web/blob/main/docs/components/fab.md#fab


### Github
Githubの場合は、`<button>`タグに`aria-label`をつける方法を採用していそうです。

```html
<button data-component="IconButton" type="button" aria-label="Default" data-no-visuals="true" class="types__StyledButton-sc-ws60qy-0 jxjiQw">
  <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-heart" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;">...</svg>
</button>
```
ref: https://primer.style/react/storybook/?path=/story/components-iconbutton--default


### salesforce
salesforceの場合は、読み上げ用のラベルをつける方法を採用していそうです。

```html
<button class="slds-button slds-button_icon" title="Settings">
   <svg class="slds-button__icon" aria-hidden="true">...</svg>
   <span class="slds-assistive-text">Settings</span>
</button>
```
ref: https://www.lightningdesignsystem.com/components/button-icons/


### Adobe
Adobeの場合は、`<button>`タグに`aria-label`をつける方法を採用していそうです。

```html
<Button variant="accent" aria-label="Ring for service"><Bell /></Button>
```
ref: https://react-spectrum.adobe.com/react-spectrum/Button.html#icon-only


### SmartHR Design System
SmartHRの場合は、読み上げ用のラベルをつける方法を採用していそうです。

```html
<button type="button" class="sc-eldPxv dBLund default  smarthr-ui-Button square">
    <span class="sc-eDPEul kfa-dHv">
        <span class="sc-aXZVg hTOZgh">プラスボタン</span>
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" width="1em" height="1em" class=" smarthr-ui-Icon" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">...</svg>
    </span>
</button>
```
ref: https://story.smarthr-ui.dev/?path=/docs/buttons%EF%BC%88%E3%83%9C%E3%82%BF%E3%83%B3%EF%BC%89-button--docs

## まとめ
アクセシビリティの検証結果と各企業の実装方法から以下の２点が良さそうです。

+ `<button>`タグに`aria-label`をつける方法
+ 読み上げ用のラベルをつける方法

あとは、好みかもしれないですが、コンポーネントの設計や利用技術なども参考に開発チームで決めるのがベターだと思います。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510