アクセシビリティ改善に便利なツール、ANDIの使い方と便利な機能

## これは何

アクセシビリティ改善をする中で、便利なChrome拡張などを調べていたところ、全部まとめていい感じにしてくれるツールがあったのでその紹介です。

詳細は公式ページに詳しく纏まっているので、この記事ではどういうことができるかざっと把握できるように便利な機能をいくつかピックアップしてまとめています。

## ANDIでできること

公式のガイドはこちらです。

https://www.ssa.gov/accessibility/andi/help/howtouse.html

### ページ上のアクセシビリティの課題を検出する 

ANDIをオンにすると、ページ上のアクセシビリティの問題を検出してアラートを表示してくれます。
画像にaltがない場合やARIA属性のスペルミスがある場合などに警告してくれます。

アラートがある場合は、「Accessibility Alerts: アラートの数」と表示され、その下にリストで内容が表示されます。

![ANDIの使用中のスクリーンショット。「Accessibility Alerts: 15」と表示され、その下にリストで「Elements with No Accessible Name: (3)」「dangerCanvas has no accessible name. dangerElement has no accessible name, innerText, or [title]. dangerLink has no accessible name, innerText, or [title].」と表示されている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/598867b2-c1a4-9bdf-eaab-7f2150141ab3.png)

詳細は[ANDI - アラート](https://www.ssa.gov/accessibility/andi/help/alerts.html)をご覧ください。

:::note warn
飽くまで自動チェックなので、ここで問題が検出されなかった場合、アクセシビリティ上の問題がないとは限りません。逆に、ここで検出された場合も必ずしも問題があるわけではありません。
:::

### フォーカス可能な要素とフォーカス順序を確認する

ANDIをオンにすると、フォーカスできる要素がオレンジ色の破線で囲まれます。
また、要素にアクセシビリティ上の課題があると、赤色の太い破線で囲まれ、要素にフォーカスするとアラート内容が表示されます。

さらに、「Tab order」をオンにすると、ページ上のフォーカスできる要素にフォーカス順序が振られます。

![ANDIをオンにした状態の、Chromeの検索結果のスクリーンショット。フォーカスできる要素は破線で囲まれてフォーカス順序の数字が振られています。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/7ed0f0fc-583f-ddc7-9b68-cf26cfe268c3.png)

#### Tab-a11y

[Tab-a11y](https://chrome.google.com/webstore/detail/taba11y/aocppmckdocdjkphmofnklcjhdidgmga/related)というChrome拡張機能を使うと、似た感じでフォーカスができる要素とフォーカス順序を一覧で確認できます。

こちらだと、オーバーレイの表示が強いので表示をオンにしたまたページを閲覧するのには少し邪魔ですが、フォーカス順序に合わせて線も引かれるのでより順番がわかりやすくなります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/12dbf722-a333-4180-7363-65b617004902.png)


### 要素の情報を確認する

ANDIをオンにした状態で任意の要素にフォーカスすると、その要素のアクセシビリティに関連する情報が表示されます。

表示される情報は以下の要素です。

- Element
    - HTMLタグ
    - ARIAロール
- Accessibility Components
    - aria-labelledby, aria-label, alt, label, value, legend, title, tabindex など
    - 詳細は[ANDI - Accessible Web Development Guide](https://www.ssa.gov/accessibility/andi/help/developerguide.html#NamingAndDescribing)をご確認ください
- ANDI Output
    - スクリーンリーダーで読み上げられるAccessible Name（aria-labelledby, aria-label, label, altなど）とAccessible Description（aria-describedby, title）
    - 詳細は[ANDI - Accessible Web Development Guide](https://www.ssa.gov/accessibility/andi/help/developerguide.html#NamingAndDescribing)をご確認ください

![ANDIをオンにした状態の、Chromeのトップページのスクリーンショット。検索フォームにフォーカスしており、画面上部に検索フォームのアクセシビリティ情報が表示されています。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/1ae99ea5-047c-dc50-8e96-a2f701db7819.png)

### 構造を確認する

「Select Module:」で「structures」を選択すると、ページ内の見出し・リスト・ランドマークを確認できます。

「〇〇 heading」・「〇〇 lists」・「〇〇 landmarks」とそれぞれの要素の数が表示され、それぞれクリックするとモードを切り替えられます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/350e467e-f129-305c-755a-3babd5ab8d56.png)

また、「reading order」をオンにすると、読み上げ順序を表示し、「more details」で「〇〇 role attributes」を選択すると、role要素をページ上にオーバーレイで表示します。

![reading orderをとrole attributesオンにした状態の、Chromeの検索結果のスクリーンショット。要素の読み上げの順番とroleがオーバーレイで表示されています。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/8874f758-1cf1-27c2-68fa-984a1e01e303.png)

#### 見出し構造

「Select Module:」で「structures」を選択した状態で、「〇〇 headings」を選択すると、見出しモードになります。
「view headings list」をクリックすると見出しのリストが表示され、ページ内の見出しの構造を確認できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/72e702af-ba82-81c3-f473-9717cbe7199f.png)

[構造に関する公式のガイドはこちら](https://www.ssa.gov/accessibility/andi/help/modules.html#sANDI)

#### HeadingsMap

[HeadingsMap](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related?hl=ja)というChrome拡張でも見出し構造を確認できます。

ページの左側にナビゲーションが表示され、ページ内の見出し構造が表示されます、

見出し構造だけサッと把握したいときはこちらの方がすぐアクセスできる&縦長に表示できて見やすいので便利です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/2d94ee02-0e30-5457-c466-b48497bb14ac.png)

### コントラストを確認する

「Select Module:」で「color contrast」を選択すると、テキストと背景色のコントラストをチェックできるモードになります。

また、「grayscale」をクリックするとページがグレースケール表示になります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/0c4dbc03-2221-341d-7667-97c650fc1b93.png)

[カラーコントラストに関する公式のガイドはこちら](https://www.ssa.gov/accessibility/andi/help/modules.html#cANDI)

### ANDIでできることのまとめ

他にもできることがいろいろあるので、[公式のチュートリアル](https://www.ssa.gov/accessibility/andi/help/howtouse.html)と[モジュールについての解説](https://www.ssa.gov/accessibility/andi/help/modules.html)を見つつ実際にいろいろ触ってみるのがおすすめです！

## 最後に：インストール方法

ブラウザにブックマークを追加すると、ブックマークレットとして使用できます。
詳細は以下の公式ページをご覧ください。

https://www.ssa.gov/accessibility/andi/help/install.html