Accessibility確認のブラウザー拡張機能

らら
らら

はじめに

今回は、Chrome Edgeのブラウザー拡張機能のA11ygatorの紹介です。

あと、A11ygatorのチェック結果が、英語なのでそちらの変更方法を紹介していきます。

A11ygatorとは

ウェブ制作者がWCAG準拠をチェックするための無料ツールです。拡張機能が開始されると、HTMLドキュメントのコンテンツの変更を監視し、エラー、警告、通知を含むレポートを生成します。

DevTools との統合により、WCAG準拠に一致するように、要素を簡単に検査し、CSS、HTMLの修正をちょっと楽にしてくれます。

この手の拡張機能は有料版が多いので無料は助かりますね。

同様のソフトにmiCheckerもありますが、こちらは都度miCheckerを起動しないといけないので、開発時はこちらで参照して、最終miCheckerをする感じが。。

下記のサンプル画像は、私が日本語化したものです。

chrome ウェブストアでダウンロードできるものは英語です。

A11ygator

A11ygator

miChecker (エムアイチェッカー)のインストール方法

記事
https://www.omakase.net/blog/2023/07/michecker.html

インストール

英語版は、chrome ウェブストアからダウンロードできます。Edgeも同様です。

日本語化してみる・・・

git hubにソースがあるので下記

https://github.com/chialab/a11ygator-extension

ページを読んでみると内部はHTML Code Sniffer を使用しているようです。

こちらは、JavaScript で作成されたもので昔からかなり有名ですね。PowerCMSにプラグインでありますね。

a11ygator-extensionのソースを見ると

lib\js\HTMLCS.jsがあるのでこちらを差し替えてみるか・・

HTML Code Sniffer

https://github.com/squizlabs/HTML_CodeSniffer

Translationsに<html lang="en">とあるので

ルートのファイルにHTMLCS.jsがあって

下記の部分をjaに置き換えでよい感じです。


    // The current language to use.
    this.lang = 'en';

変更するにはビルトが必要ですね。

ビルトしてみる・・

はじめての向けに

Windows下記をインストールします。

node.js

https://nodejs.org/en

git

https://git-scm.com/

ひさびさにGithubを使う。

記事
https://www.omakase.net/blog/2022/07/github.html

ますは開発用のディレクトリを作成します。

Windows PowerShellを起動して開発用のディレクトリへ移動します。

開発用のディレクトリから

ソースをダウンロードします。


git clone https://github.com/squizlabs/HTML_CodeSniffer.git

完了後ディレクトリHTML_CodeSnifferへ移ります。


cd HTML_CodeSniffer

gruntインストールします。


npm install -g grunt-cli

ビルトします。


grunt build

エラーがでたら


\HTML_CodeSniffer> grunt build
grunt : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\xxxxx\AppData\Roaming\npm\grun
t.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=
135170) を参照してください。
発生場所 行:1 文字:1
+ grunt build
+ ~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

下記コマンドで確かめます


\HTML_CodeSniffer> Get-ExecutionPolicy
Restricted

Restrictedとでたら下記を実行します


\HTML_CodeSniffer> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Proces

再度


grunt build

これで、

HTML_CodeSniffer\buildフォルダーにHTMLCS.jsができています。

注意）

筆者がこのままやったところ、エラーで動作しませんでした。

原因は、HTML_CodeSniffer\Translations\ja.jsが不足している原因でした。

ja.jsはWCAG 2.0のみの対応になっている感じでした。

Translations内のen.jsと見比べて差分をja.jsに追加します。

別途下記を追加


    ,"4_1_2_attribute" : 'attribute'

翻訳はご自由に・・

追加後再度　buildします。

A11ygatorブラウザー拡張機能のソースを変更します。

下記からソースをダウンロードします。

https://github.com/chialab/a11ygator-extension


│  .gitignore
│  LICENSE
│  logo.svg
│  Makefile
│  manifest.json
│  README.md
├─background
│      background.js
├─devtools
│      devtools.html
│      devtools.js
│      report.css
│      report.html　〇
│      report.js
├─lib
│  ├─css
│  │      loader.css
│  │      
│  └─js
│          helpers.js
│          HTMLCS.js　　◎
│          runner.js
├─popup
│      popup.css
│      popup.html　〇
│      popup.js
├─resources
│      icon.png
├─settings
│      settings.css
│      settings.html　〇
│      settings.js
└─store
        banner-440.ai
        banner-440.png
        banner-920.ai
        banner-920.png
        icon.ai
        icon.png
        inspect.gif
        popup.jpg

◎はHTML_CodeSnifferをビルトしたものに上書きします。

〇htmlを日本語化します。

<html lang="en">とか、英文を英語にします。

ディレクトリ毎　削除しない場所へ移動します。自作ブラウザー拡張機能になりますので

指定したディレクトリが動作ディレクトリとなります。

Chromeは、拡張機能へ行ってからデベロッパー モードをオンにして、パッケージかされていない拡張機能を読み込む

を選択して該当のフォルダーを選択して自作拡張機能を有効にします。

下記から拡張機能管理を選択します。

A11ygator

展開して読み込みを選択して作成したディレクトリを選択します。

A11ygator

上記で自作拡張機能がインストールされます。

エラーが表示されますが動作します。

どうも拡張機能V2からV3にしてねって感じですが、筆者には、拡張機能の開発経験がないので・・・

Edge,Chromeで文字のカラーコントラストを確認方法

開発ツールで選択ボタンを押して、指定のとこを選択すれば。。

A11ygator

緑のチェックマークが付いてればOKです。

あとはCSS概要(CSS Overview )からも確認できます。Lighthouseからと同じです。

A11ygator

その他ツール

Colour Contrast Analyser

Windows、Macアプリケーションのツールで、WCAG2.1基準に基づいたカラーコントラストの合否判定できます。

背景と文字色なりを選択して評価になります

https://www.tpgi.com/color-contrast-checker/

WCAG Contrast checker

こちらはブラウザーで閲覧しているページでチェックをしてくれます。

どこでエラーになっているか判断できます。

chrome ウェブストアは下記から

https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf

A11ygator

Landmark Navigation via Keyboard or Pop-up

ランドマークってなに？

これは、スクリーンリーダーの機能となります。

キーボード操作によってランドマーク間をジャンプ移動できる機能になります。

HTML5の場合、<header>、<nav>、<aside>、<footer>...といった要素がランドマーク対象になります。また

WAI-ARIAでもrole="navigation"、role="main"の要素を追加することでランドマークとして認識されます。

スクリーンリーダーでは、見出し間の移動(<h1>、<h2>、<h3>・・・)という機能もあり、こちらは、ナビゲーションタグは反映されないための

この2つの併用で使用するようです。

現在の一般的なブラウザーでのキーボード操作では、タブ移動（リンク箇所、入力エリア）の移動のみなので、スキップするの大変ってことです。

見出しの移動でも正しく、見出しタグを順番に使用してコーディングしていないと、こちらの機能も使用しずらいってことになります。

下記プラグインでは、スクリーンリーダーをインストールしなくてもランドマークの確認ができます。

chrome ウェブストアは下記から

https://chrome.google.com/webstore/detail/landmark-navigation-via-k/ddpokpbjopmeeiiolheejjpkonlkklgp

アクション キーボードショートカット
ポップアップを表示 Alt+Shift+L
メインランドマークに移動して強調表示する Alt+Shift+M
次のランドマークに移動してハイライト表示する Alt+Shift+N
前のランドマークに移動して強調表示する Alt+Shift+P

関連記事