freeeアクセシビリティー・ガイドラインVer. 202010.0を公開しました

こんにちは、freeeのアクセシビリティーおじさん、中根です。某大手通販サイトを名乗る何者かから、そこに登録してあるのとは違う電話番号に「アカウント違反を検出しました」なるSMSが届いた今日この頃、皆さんもどうぞご注意ください。

さて、今回もfreeeアクセシビリティー・ガイドラインの更新情報をお届けします。なお、本稿で触れていない変更もありますので、リリース・ノートも合わせてご覧ください。

freeeアクセシビリティー・ガイドラインVer. 202010.0リリース・ノート

そのチェックってどうやるの？に答えるべく

各ガイドラインを満たしているかどうかを確認するために示している「チェック内容」について、具体的にどのようにチェックを自死すれば良いのか分かりづらいという声が社内でありました。たしかに、何らかのチェック・ツールやスクリーン・リーダーを使った経験が豊富な人ならともかく、「それってどうやってチェックするの？」という疑問を感じるチェック内容は少なくないように思います。

そこで、10月27日に公開したfreeeアクセシビリティー・ガイドラインVer. 202010.0では、いくつかのチェック内容について、NVDAやaxeを使ってどのようにチェックすれば良いのかという情報を追加しました。

axeって？

NVDAは、freeeのアクセシビリティー・チェックで標準環境としているスクリーン・リーダーで、既にスクリーン・リーダーを用いたチェックの実施方法という参考情報で紹介していますのでご存じの方も多いと思います。

一方axeについてはこれまで触れたことがなかったと思いますが、こちらは世界的にも広く使われているアクセシビリティーのチェック・ツールです。

今回の更新では、まずこのaxeのインストール方法や使い方を紹介する参考情報を追加しました：

axeを使用したアクセシビリティー・チェック

具体的なチェック方法を例として紹介

さて、話を戻してチェックの方法についてです。

例えば、テキスト・カテゴリーの以下のガイドライン：

[SHOULD]段落単位など、比較的長いテキストの言語がhtml要素のlang属性で指定したものと異なる場合は、その部分に対して適切にlang属性を指定する。

のチェック内容として、チェックID 0921は以下のようになっています：

複数の言語が含まれているテキストについて、多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

NVDAを用いてこのチェックを実施する方法の例として、以下を示しています：

NVDAの音声設定で、「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」がチェックされている状態にする。

ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、使用されている言語に応じて読み上げに用いられる音声が切り替わることを確認する。

まだ数は少ないですが、このようなチェック実施方法の例を、以下のページにまとめました：

そしてチェック・リストにも、同じ内容を掲載しています。

今後、チェック方法について分かりづらいという指摘があったものについては、随時これらのページに掲載していく予定です。

なお、上記のページに示したのは、タイトルにもあるようにあくまでも「例」です。ですから、ここにある方法でなければチェックができないというわけでもありませんし、このようにすれば100パーセントチェックができるというわけでもありませんので、その点にはご注意ください。

ご注意 URLの変更について

このチェック実施方法の例を追加するに当たって、ファイル構成などを一部見直した結果、全チェック内容を掲載しているチェック・リストのURLを変えることになってしまいました。もしリンクやブックマークなどしてくださっている方がいらっしゃいましたらご注意ください。

旧URL: https://a11y-guidelines.freee.co.jp/checks/index.html
新URL: https://a11y-guidelines.freee.co.jp/checks/checklist.html

参考情報を少し加筆

今回、いくつかの参考情報に加筆しています。特に以下の2件については、コードのサンプルを追加してみました：

実はこれまで、コードのサンプルの掲載は以下のような理由でなるべく避けてきました。

ページ中にコードを表示すると見通しが悪くなって読みづらくなりそう
読んですぐ試せるようにする方法をどうしよう（考えるのが面倒だった）
コードをダウンロードできるようにしたいけど、ダウンロード用のコードとページ掲載用のコードの二重の管理が発生するのは嫌だ（いつか必ず一方だけを更新するという事故を起こす自信がある）

この中でも、特に3が一番大きな問題でした。もちろん、ダウンロード用に用意したファイルをreStructuredTextのincludeディレクティブで読み込んでやれば、二重管理の問題は解消できるのですが、説明の中で使うために必ずしもそのファイル全体を掲載したいわけではないこともあるでしょうから、この方法は使えないだろうと思っていました。（上記2件では、コードがあまり長くないのと、内容的に全体が必要なので、ファイル全体を掲載していますが。）

ところが、今回チェック実施方法の例の管理をいかに効率的にできるようにするかということを考える過程で、改めてreStructuredTextのincludeディレクティブについて調べてみたところ、僕が知らなかっただけで実はファイルを部分的にincludeしたり、includeしたファイルの内容に行番号を付けて表示したりする機能があったことが分かりました。早速チェック実施方法の例からチェック・リストの内容を引用したり、チェック・リストにチェック実施方法の例を埋め込んだりするために使ってみたところ、これが思いの外うまくいきました。

ということで、このincludeディレクティブを大いに活用しつつ、HTMLファイルの生成時だけiframe要素を追加してそのサンプルを表示するようにしてみました。

今後は、コードがあった方が分かりやすいものについては積極的にコードを掲載していくことができそうです。