Webが広くあまねく使われるようになったことで、アクセシビリティが重要視されるようになっています。スクリーンリーダー的なものにきっちりと対応するのも大事ですが、altやtitle要素を追加すると言った簡易的な対応もできます。 今回はJavaScriptでできるアクセシビリティチェック、accessibilityjsを紹介します。

accessibilityjsの使い方

accessibilityjsの実行です。以下の場合はbody以下をすべてチェックし、エラーのエレメントは赤い枠線を表示します。

accessibilityjs.scanForProblems(document.body, function (error) {
  error.element.style.outline = '5px solid red'
  error.element.addEventListener('click', function () {
    alert([error.name, error.message].join('\n'))
  })
}, {
  ariaPairs: {
    '.js-menu-target': ['aria-haspopup']
  }
})

実行前。

実行後。

赤い枠の表示された要素はクリックするとアクセシビリティチェックのエラー内容が表示されます。多くはラベルタグやalt要素の欠如だったりなので簡易的かも知れませんが、accessibilityjsで一度チェックするだけでアクセシビリティは大幅に向上するでしょう。

accessibilityjsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

github/accessibilityjs: Client side accessibility error scanner.