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

はじめに

みなさんは、ちゃんとアクセシビリティを意識して開発できていますか？
アクセシビリティの中には、どれが正解か分かりにくいものもいくつかあります。

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

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

アイコンボタンのアクセシビリティ対応の手段

上記のようなDOM構造のアイコンボタンのアクセシビリティ対応するには、主に以下の3つあります。

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

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

① `<button>`タグに`aria-label`をつける方法

○ DOM
<button>タグにaria-labelをつける方法は、以下のようなコードで実現できます。

sample.html

<button class="button" aria-label="編集する">
    <span class="icon">edit</span>
</button>

○ スクリーンリーダー(VoiceOver)
<button>タグにaria-labelをつける方法で、スクリーンリーダーで読むと以下のように「編集する、ボタン」と読み上げられます。

○ アクセシビリティ評価(Lighthouse)
Lighthouseでのアクセシビリティチェックでは100点で問題なさそうです。

② `<span>`タグに`aria-label`をつける方法

○ DOM
<span>タグにaria-labelをつける方法は、以下のようなコードで実現できます。

sample.html

<button class="button">
    <span class="icon" aria-label="編集する">edit</span>
</button>

○ スクリーンリーダー(VoiceOver)
<span>タグにaria-labelをつける方法で、スクリーンリーダーで読むと以下のように「編集する、ボタン、グループ」と読み上げられます。

○ アクセシビリティ評価(Lighthouse)
Lighthouseでのアクセシビリティチェックでは100点で問題なさそうです。

③ 読み上げ用のラベルをつける方法

○ DOM
読み上げ用のラベルをつける方法は、以下のようなコードで実現できます。

sample.html

<button class="button">
    <span class="hidden">編集する</span>
    <span class="icon">edit</span>
</button>

○ スクリーンリーダー(VoiceOver)
読み上げ用のラベルをつける方法で、スクリーンリーダーで読むと以下のように「編集する edit、ボタン、グループ」と読み上げられます。

○ アクセシビリティ評価(Lighthouse)
Lighthouseでのアクセシビリティチェックでは100点で問題なさそうです。

アイコンボタンの各企業の実装方法

Material Design 3

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

<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をつける方法を採用していそうです。

<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の場合は、読み上げ用のラベルをつける方法を採用していそうです。

<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をつける方法を採用していそうです。

<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の場合は、読み上げ用のラベルをつける方法を採用していそうです。

<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)のフォローをお願いします。

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

はじめに

アイコンボタンのアクセシビリティ対応の手段

① <button>タグにaria-labelをつける方法

② <span>タグにaria-labelをつける方法

③ 読み上げ用のラベルをつける方法

アイコンボタンの各企業の実装方法

Material Design 3

Github

salesforce

Adobe

SmartHR Design System

まとめ

① `<button>`タグに`aria-label`をつける方法

② `<span>`タグに`aria-label`をつける方法