最近PowerCMS Xでアクセシビリティに関連した実装を行いましたので2点ご紹介します。
axe-coreによるアクセシビリティ検証機能
axe-coreを活用したウェブページの一括検証ツール「axe-runner」を私が作成していることがきっかけで、axe-coreをPowerCMS Xから利用することはできないだろうか？という話がありました。「axe Monitor」という製品があることは承知しているのですが、Drupalに「Accessibility Scanner」というモジュールがあることも知り、試してみました。
axe-coreを実行するNode.jsのプログラムは、axe-runnerのコードを流用しつつコマンドラインでURLやaxe-coreの設定を渡すことができるように改変しました。PowerCMS Xでは公開サイトの全URLをURLモデルに保存しているので、MIMEタイプがtext/htmlであるURLを抽出しNode.jsのプログラムへ渡すようになっています。
検証結果を表示する画面を作成する中で、axe-runnerの「問題の説明」欄には問題のタイトルと問題の詳細・対処法がまとめて収まっていることに気付きました。以下のように文章中に--が現れています。
要素にalt属性が存在していません--aria-label属性が存在しない、または空です--aria-labelledby属性が存在しない、存在しない要素を参照している、または空の要素を参照しています--要素にtitle属性が指定されていません--要素のデフォルトのセマンティクスはrole="none"またはrole="presentation"で上書きされませんでした
そこで、axe-coreの検証結果データやaxe-coreの検証結果をCSVに成形しているaxe-reportsを確認し、問題のタイトルと問題の詳細・対処法を分離して表示するように工夫しました。その他、「axe-coreを利用したアクセシビリティチェックのレポートCSVに達成基準などの情報を加えてみた」で紹介しているタグは達成基準に絞って表示するようにしてみました。（axe-reportsを使用せず、axe-coreからJSONを受け取りPowerCMS X側で加工すれば良いのかもしれませんが、PowerCMS 6で利用する際にPerlで書かないといけない辛さが…。）
現在引き続き開発中ですが、以下のような画面が出来上がっています。
この機能によりアクセシブルな状態を維持するためのサポートができればと考えています。なお、axe-coreによる検証をパスすれば完璧、と勘違いされぬよう「※axe-coreがカバーしない達成基準や達成方法は人の手による確認が必要です。」と画面に記載しています。
PDF内にある画像の代替テキスト表示機能
スクリーンリーダーが読み上げる順序でPDF内のテキストを抽出する方法を調べる中で、JavaScript製のPDFビューワ「PDF.js」を利用するとPDF内にある画像と代替テキストも抽出できそうなことが分かりました。AdobeのサイトにあるPDF 1.7の仕様書」やQpdfを参照し調査を進めた結果、PDF内の画像をcanvasに描画すると共に代替テキストを示すことができるようになりました。代替テキストがない場合・装飾的な画像としてマークされている場合はその旨を表示します。
Illustratorで作成した印刷物のPDFをそのまま公開しているケースもあるかと思いますが、この場合はテキストや代替テキストが抽出できない旨が表示されアクセシブルでないことが分かります。
この機能を利用することでウェブアクセシビリティ基盤委員会のサイトで公開されている「PDFの達成方法」の「PDF1: PDF 文書の Alt エントリによって画像にテキストによる代替を適用する」の確認等に利用できるかと考えています。
個人的には可能な限りHTMLで情報を提供して欲しい気持ちがありますが現実にはPDFで文書が公開されることは多々あるので、テキストが正しく読み上げられること・画像に代替テキストがあることを確認できればPDFのアクセシビリティ向上に役立つのかなと期待しています。PDFをアクセシブルにするカルチャーとプロセスも大事だろう、と開発をしながら思いました。