アクセシビリティに関する各種リンク

Published at 2017-10-03

毎回検索している気がするので、自分用のメモ。

macOSのアプリ + Sketchのプラグイン

• Contrast: コントラストをチェックする macOS のアプリ
• stark-contrast/stark-sketch-plugin: 文字と背景のコントラストをチェックしたりや色覚をシミュレートする Sketch のプラグイン
• getflourish/Sketch-Color-Contrast-Analyser: コントラストをチェックする Sketch プラグイン

DevTools + Extension + ブックマークレット

• ChromeLens: Web ページで色覚をシミュレーションする Chrome の拡張機能
• aXe: Web ページのアクセシビリティをチェックする Chrome の拡張機能（DevTools の Audit に取り込まれた）
• Accessibility Developer Tools: Web ページのアクセシビリティをチェックする Chrome の拡張機能（DevTools の Audit に取り込まれた）
• ChromeVox: Web ページの読み上げをする Chrome の拡張機能
• tota11y: Web ページのアクセシビリティをチェックするブックマークレット

Node.js + CLI

• dequelabs/axe-core: a11y チェックツールである aXe のコアエンジン
• dequelabs/axe-cli: 対象 URL のアクセシビリティをチェックできるコマンドラインツール
• addyosmani/a11y: 対象 URL のアクセシビリティをチェックできるコマンドラインツール

ドキュメント + その他

• OATMEAL: アクセシビリティのテスト手法についての本
• A11Y Style Guide: アクセシブルなコンポーネントを作るためのドキュメント
• Accessible design patterns: 各種 UI コンポーネントのアクセシブルな実装パターン集
• Inclusive Components: 各種 UI コンポーネントのアクセシブルな実装パターン集
• Vox Product Accessibility Guidelines: 職域別のアクセシビリティチェックリスト
• enchroma: Web で試せる色覚テスト
• HTML5 Accessibility: ブラウザのアクセシビリティサポート状況
• a11ycasts: Rob Dodson による各種 a11y の解説動画
• Web Accessibility | Udacity: Udacity の a11y コース