運用中のCMSでWebアクセシビティを適合させるまで #HTML

過去一度、勤め先が運営しているCMSを使用し、WebアクセシビリティのAAレベル「適合(※１)」を目指し、CMSの改変を行いました。
結果、提供するお客様でもAAレベル「準拠(※2)」を目指せるまでにCMSを改変させました

その時行った内容について記録します

適合と準拠の違いは以下の通りです

適合(※1)
検査機関に検査を依頼して「検査証（適合証明書）」を発行してもらい公表

準拠(※2)
検査個人のレベルでガイドラインにそって検査を実施した結果を公表

Webアクセシビティ

アクセシビティとは、様々な人が、環境や身体問題などに影響されず利用できることをいいます。
webアクセシビリティとは、目が見づらい方や、身体的にキーボードなどうまく使えないなど様々な方でも、Webで情報を仕入れられるようにホームページなどをアクセシビリティ化した状態のことをいいます
https://waic.jp/knowledge/accessibility/

W3Cが作成したWCAG(ウェブアクセシビリティ基盤委員会)のガイドラインを参考にアクセシビリティ化して行きます

達成基準

Webアクセシビリティを達成するには、ウェブアクセシビリティ基盤委員会という組織が提示しているこちらのページの内容の達成する必要があります
https://waic.jp/docs/jis2016/test-guidelines/201604/gcl_example.html
https://waic.jp/resource/jis-x-8341-3-2016/ [PDF版]

項目ごとに

Aレベル
AAレベル
AAAレベル

がありAAAが一番上のレベルになります
こちらを達成し、適合書を発行している検査機関などに検査依頼をし、認定書が発行され適合になります。（有料）

また、準拠や配慮など適合までいかなくとも、Webアクセシビリティ適合を目指しているとしてサイト上に表示することも可能です。（無料）
https://waic.jp/docs/jis2016/accessibility-plan-guidelines/201604/

Webアクセシビティ関連ソフト

アクセシビリティの支援のため押さえていた方がいいソフトや機能などがあります。
画面を読み上げてくれるスクリーンリーダーや、ズーム機能、コントラストの調整機能などがが挙げられます。
基本的開発するときには、主にスクリーンリーダーをいれ、調整、及び、確認をおこなっておりました。

また、開発するにおいて入れたアドオンなどがあります

※ズーム機能や、コントラストについては、winやmacOS、iOS、Androidに既存のものが備わっていることが多いので、そちらを使って問題ないです

スクリーンリーダー

NVDA (windows)

Win機にダウンロードして使う代表的なもの、これに画面の読み上げを行います
https://www.nvda.jp/

VoiceOver

macOSやiOSに既存で入っている機能

Talkback

Androidに既存で入っている機能

アドオン

CSS無効化くん

Chromeのアドオン。CSSを無効化し、機械で読める部分を判別するために使用

Accessibility Evaluation Toolbar

実地内容

実際に適用させるために実地した内容の一部を紹介します

フォーカスインジゲーター対応

フォーカスが当たっている時に、点線がついている状態をフォーカスインジゲーターをいい、これを確実に当たるように、以下のようなCSSを追加しました

*:focus {
    outline-color: #000000;
}
*:focus {
    outline: dotted 1px #000000;
}

また、divなど基本フォーカスを当たらないものに関しては、tabindexという属性を使用しフォーカスを当たるようにしました
( https://www.tagindex.com/html5/attribute/tabindex.html )

<div tabindex='0'>

またホバー動作で実行していたサブメニューの動きをフォーカスが当たっていた時も実行されるようにjavascript調整したりしました

role属性

要素が何なのか（ポップアップなのか、リストなのか）、こちらを使って記載します。
構成上HTML構成に合わなかった時など、こちらを使いしていきました

WAI-ARIAの活用

アクセシビリティ対応時、こちらに大変助けれれていた気がします。こちらも特に使ったものを記載
WAI-ARIAはこちらのURLのものを引用。

WAI-ARIA は、ブラウザーや支援技術が認識できるさらなる意味論を追加すること
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

aria-labelledby (or aria-label)

要素に対して読み上げ内容を指定していく際に追加していきました

また、その他、代替テキストの追加や、アイコン表示している箇所に文言追加、コントラスト比の調整など細々した内容を実地していきました

テストと審査

チェックツール

W3C HTMLチェッカー

https://validator.w3.org/
HTML構成上間違いがないか確認します。
構成がおかしい場合、検査で指摘される場合があるため、こちらで確認し調整していきます

miChecker

https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html
公式に出されているチェックツールです。
こちら使用すると、達成基準や方法など確認しながらチェックできます。

審査

検査機関に、審査を申込み、無事通ると証明書が発行されます。
こちらを掲載すれば、アクセシビリティに適合されたことになります。
今回は、こちらの会社に審査申込、適合証明書を発行していただきました

株式会社インフォ・クリエイツ
https://www.infocreate.co.jp/service/s2

最後に

既存のサイト等をWebアクセシビリティ対応されていくのは結構骨の折れる作業だなと思いました。

実際行った内容自体はまだまだあるのですが、今回はこのくらいで
時間ある時に、再度編集か、また新たにまとめたやつ投稿できたらと思います。

かなり前にやった内容なので、、間違いあるかもなので、、気付きしだい直していきます、、
よろしくお願いします

運用中のCMSでWebアクセシビティを適合させるまで