GitHub にアップロードされた画像のアクセシビリティを自動チェックできる “Accessibility alt text bot” アクションを試してみた

こんにちは、CX事業本部 Delivery部の若槻です。

GitHub にアップロードされた画像のアクセシビリティ対応をサポートするための GitHub Actions Accessibility alt text bot が公開されました。

このアクションを使用することにより、次の場所にアップロードされた画像に代替テキスト（Alt text）が設定されていない場合に、Bot がコメントで通知をしてくれるようになります。

• Issue コメント
• Issue 説明
• Pull Request コメント
• Pull Request 説明
• Discussion コメント
• Discussion 説明

試してみた

ワークフローの実装

Accessibility alt text bot を使用した GitHub Actions のワークフローの実装です。（サンプルほぼそのままです。）

.github/workflows/accessibility-alt-text-bot.yml

name: Accessibility-alt-text-bot
on: 
  issues:
    types: [opened, edited]
  pull_request:
    types: [opened, edited]
  issue_comment:
    types: [created, edited]
  discussion:
    types: [created, edited]
  discussion_comment:
    types: [created, edited]

permissions:
  issues: write
  pull-requests: write
  discussions: write
  
jobs:
  accessibility_alt_text_bot:
    name: Check alt text is set on issue or pull requests
    runs-on: ubuntu-latest
    if: ${{ github.event.issue || github.event.pull_request || github.event.discussion }}
    steps:
      - name: Get action 'github/accessibility-alt-text-bot'
        uses: github/accessibility-alt-text-bot@v1.3.0

• github/accessibility-alt-text-bot により、アクションを実行しています。
• トリガーおよびジョブの実行条件で、Issue、Pull Request、Discussion の作成または編集時に実行するように設定しています。
• デフォルトでは不足している権限を permissions で設定しています。

動作確認

マークダウン形式の場合

まずはマークダウン形式で、代替テキストなしで画像をコメントにアップロードした場合を試してみます。

![](<Image URL>)

すると、代替テキストが未設定であると Bot からコメントが行われます。

次のようにカッコ内に代替テキストを設定して画像をアップロードします。

![<Alt Text>](<Image URL>)

すると、アクションは実行されますが、Bot からのコメントは行われませんでした。

アクションの実行ログを確認すると、Detected bad alt text: false とあり、代替テキストの不正が検出されなかったことが分かります。

HTML 形式の場合

続いて HTML 形式で、代替テキストなしで画像をコメントにアップロードした場合を試してみます。

<img src="<Image URL>">

すると、代替テキストが未設定であると Bot からコメントが行われます。コメント内容はマークダウン形式の場合と同じです。

次のように alt タグで代替テキストを設定します。

<img alt="<Alt Text>" src="<Image URL>">

すると、先程と同様にアクションは実行されますが、Bot からのコメントは行われませんでした。

おわりに

GitHub にアップロードされた画像のアクセシビリティを自動チェックできる "Accessibility alt text bot" アクションを試してみました。

このアクションは開発者向けのアクセシビリティ向上はもちろんですが、すべての開発者にアクセシビリティを考慮した開発を意識してもらうことを可能にするのではないでしょうか。

そして、GitHub はアクセシビリティを考慮した開発やデザインを定めたガイドラインを提供しているので、興味のある方はこちらもチェックしてみてください。

以上