アクセシビリティチェック機能

自治体サイトでは公開側ページにて、 一定のWEBアクセシビリティを求められることがあります。

参考：
Web Content Accessibility Guidelines 2.0
JIS X 8341-3:2016
miChecker (エムアイチェッカー)Ver.2.0

アクセシビリティ評価の向上には目視、手動でのチェックは欠かせませんが、シラサギにはこれらを補助する機能があります。

本文アクセシビリティチェック

ページ作成時にCKEditor本文内のHTMLを精査し、以下項目のチェックを行うことができます。

動作

実装

以下のJavaScriptに記述しています。
app/assets/javascripts/cms/lib/form.coffee.erb

各項目の詳細

各チェック項目の詳細を記載します。
これらのチェック項目はベースとして、とある自治体サイトの要件を元に作成されました。
WCAG 2.0 達成方法集 に関連する項目がある場合、リンクを記載しています。

画像の代替テキストが適切でない

img 要素の alt 属性が空、もしくは日本語で設定されていない場合、警告が表示されます。

チェック @checkImgAlt
自動修正 無し
エラーメッセージ 画像の代替テキストを確認してください。
WCAG 2.0 H37:img 要素の alt 属性を使用する

画像のURLがdataURL形式となっている

img 要素の src 属性のURLが Data URI Scheme である場合、警告が表示されます。

チェック @checkImgDataUriScheme
自動修正 無し
エラーメッセージ 画像のURIにバイナリー文字列が含まれています。
WCAG 2.0 -

表にキャプションが設定されていない

table 要素の中に caption 要素が設定されていない場合、警告が表示されます。
自動修正を実行すると <caption>キャプション</caption> を table 要素に挿入します。

チェック @checkTable
自動修正 @correctTableCaption
エラーメッセージ 表にキャプションが設定されていません。
WCAG 2.0 H39:データテーブルの表題とデータテーブルを関連付けるために、caption 要素を使用する

表のヘッダーにスコープ属性が設定されていない

th 要素に scope 属性が存在しない場合、警告が表示されます。
自動修正を実行すると scope="row" または scope="col" を th 要素に挿入します。

チェック @checkTable
自動修正 @correctTableScope
エラーメッセージ 表のヘッダーにスコープ属性が設定されていません。
WCAG 2.0 H63:データテーブルの見出しセルとデータセルを関連付けるために、scope 属性を使用する

見出し要素の順番が不正

h 要素の順番が適切でない場合、警告が表示されます。
h1 ~ h6 の要素を次のパターンでチェックし、パターンに合わない場合に警告が表示されます。

  1. 先頭の見出しは h1,h2
  2. h3 の前の見出しは h2 ~ h6
  3. h4 の前の見出しは h3 ~ h6
  4. h5 の前の見出しは h4 ~ h6
  5. h6 の前の見出しは h5 ~ h6
チェック @checkOrderOfH
自動修正 @correctOrderOf
エラーメッセージ 見出しの順番が不正です
WCAG 2.0 G141:見出しを用いてウェブページを構造化する

英数字が全角文字となっている

HTML内のテキストに全角英数(Ａ-Ｚａ-ｚ０-９)が含まれている場合、警告が表示されます。
自動修正により半角に修正可能です。

チェック @checkMultibyteCharacter
自動修正 @correctMultibyteCharacter
エラーメッセージ 英数字は半角文字を入力してください
WCAG 2.0 -

半角カナ文字が含まれている

HTML内のテキストに半角カナが含まれている場合、警告が表示されます。
自動修正を実行すると全角カナに置換します。

チェック @checkKanaCharacter
自動修正 @correctKanaCharacter
エラーメッセージ 半角カナ文字が含まれています。
WCAG 2.0 -

機種依存文字が文字が含まれている

HTML内のテキストに機種依存文字が含まれている場合、警告が表示されます。
自動修正を実行すると ① のような機種依存文字を [機種依存文字] という文字列に置換します。

チェック @checkDependentCharacter
自動修正 @correctDependentCharacter
エラーメッセージ 機種依存文字が含まれています。
WCAG 2.0 -

日付の表記が適切でない

次のようなパターンの日付表記がある場合、○年○月○日形式に修正を促す警告が表示されます。

自動修正を実行すると○年○月○日形式に置換します。

チェック @checkDateFormat
自動修正 @correctDateFormat
エラーメッセージ 日付の表記は○年○月○日としてください。
WCAG 2.0 -

リンクのテキストの確認が必要

a 要素内のテキストが3文字以内の場合、リンクのテキストが適切か、確認を促す警告が表示されます。

チェック @checkLinkText
自動修正 無し
エラーメッセージ リンクのテキストを確認してください。
WCAG 2.0 G53:リンクテキストとそれが含まれている文章中のテキストとを組み合わせて、リンクの目的を特定する

同じページへのリンクが隣接して存在する

ある a 要素の次に a 要素が存在し、同じ href 属性を持つ場合、警告が表示されます。
自動修正を実行すると単純に a 要素内のテキストを繋げて一つの a 要素とします。

チェック @checkAdjacentA
自動修正 @correctAdjacentA
エラーメッセージ 隣接する同じリンクを一つのリンクにまとめてください
WCAG 2.0 隣り合った画像とテキストリンクを同じリンクの中に入れる

単語の文字間のスペースが適切でない

テキストに全角スペースが含まれる場合、スペースの確認を促す警告が表示されます。

チェック @checkInterwordSpace
自動修正 無し
エラーメッセージ 単語の文字間のスペースを確認してください。
WCAG 2.0 -

動画や音声を含む場合、説明が適切か確認が必要

動画や音声を埋め込み時に、適切な説明が存在するか、確認を促す警告が表示されます。
現状は以下のパターンをチェックします。

  1. embed 要素または video 要素が存在する
  2. iframe 要素の src 属性または a 要素の href 属性に www.youtube.com を含む
チェック @checkEmbeddedMedia
自動修正 無し
エラーメッセージ 動画や音声を含む場合、説明があるか確認してください
WCAG 2.0 G68:ライブの音声しか含まないコンテンツ及びライブの映像しか含まないコンテンツの目的を説明するために、簡潔な代替テキストを提供する

使用が好ましくない単語(単語辞書機能で登録)が含まれている

テキストに単語置換辞書機能に登録した文字列が存在する場合警告が表示されます。
また、置換後の文字列を辞書に登録することで自動修正できます。

チェック @checkReplaceWords
自動修正 @correctReplaceWords
エラーメッセージ 使用が好ましくない単語が含まれています。
WCAG 2.0 -

課題