ホーム / HTML /

フロントエンド技術を学ぼう 2-15.アクセシビリティについて学ぶ

2020年7月25日土曜日

Design Front-end Developer Handbook HTML

t f B! P L

image source : Dos and don'ts on designing for accessibility

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第25回はPart II: Learning Front-End Devから、15項のLearn Accessibilityを紹介します。

アクセシビリティについて学ぶの説明です。


アクセシビリティについて学ぶ

アクセシビリティとは、障害のある人々のための製品、デバイス、サービス、または環境のデザインを指します。アクセシブルなデザインの概念は、ダイレクトアクセス(支援なし)と「支援技術(コンピュータスクリーンリーダーなど)との互換性を保証します。

アクセシビリティは、アクセス性として見られ、一部のシステムやエンティティから得られる効果です。この概念は、障害のある人や特別なニーズからのアクセスを可能にすること、または支援技術を使用してアクセスを可能にすることに焦点を当てています。しかし、アクセシビリティの研究開発は誰にとっても利益をもたらします。

アクセシビリティは、特定のユーザーが特定の使用状況での有効性、効率性、満足度で特定の目標を達成するために使用する製品（デバイス、サービス、環境など）のユーザビリティと混同してはなりません。アクセシビリティは、予想しうる様々なシチュエーションで、様々な能力を持った人々が使用できる製品を作るプロセスであるユニバーサルデザインと密接に関係しています。これは障害を持っているかどうかに関係なく、すべての人々が物事にアクセスできるようにすることです。

参照元：英語版Wikipedia


アクセシビリティに配慮したデザイン

イギリスのブログがDos and don'ts on designing for accessibility(アクセシビリティのための設計についての注意事項)という記事を投稿しています。ここで紹介されているGithubリポジトリにアクセシビリティに配慮したデザインをテーマにした6種類のポスターがアップロードされています。


autistic-spectrum(自閉症スペクトラム)


screenreader(スクリーンリーダー)


low-vision(低視力)


dyslexia(失読症)


motor-disabilities(運動障害)


deaf(聴覚障害者)


WCAG

Web Content Accessibitility Guidelinesの略称でWCAGというものがあります。これはWebアクセシビリティの基本となるガイドラインとして、W3Cが公開しています。WCAG2.0が最新で、以下の要点においてガイドラインが設けられています。

参照元：ウェブ制作に関わる人に役立つウェブアクセシビリティの基本


WAI-ARIA

WAI-ARIAとは、W3CのWeb Accessibility Initiativeが策定した、Accessible Rich Internet Applicationsに関する仕様です。つまり、この仕様で定められた記述をソースコードに加えることによって、動的なウェブアプリケーションに対してもアクセシビリティを適用できる事になります。

WAI-ARIAを使用方法は、HTMLの各要素にRoles、States、Propertiesを持たせるARIAのコードを追記することに依ります。ただ、HTML5のみでセマンティックな状態である場合はWAI-ARIAを使用しないといったルールがあるので、あくまでJavaScript等を使用した結果HTML5では補えない場合に使用する、補完的なものです。


参照元：


一般的な学習リソース


書籍

ウェブアプリケーションのためのユニバーサルデザイン


コーディングWebアクセシビリティ: WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション



標準仕様


QooQ