はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > アクセシビリティ > Webサイトにおけるアクセシビリティについてのメモ

Webサイトにおけるアクセシビリティについてのメモ

アクセシビリティ Webサイト

Webサイトにおけるアクセシビリティについてのメモ

Webサイトにおけるアクセシビリティ関連の情報をまとめておきます。

アクセシビリティ・ツール

先にツールから紹介しておきます。

miChecker

みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) ダウンロードページ

総務省が作って公開しているアクセシビリティチェックツールです。引用を以下に。

総務省では平成22年8月のJIS X 8341-3:2010の改正に合わせて、 平成22年度に「みんなの公共サイト運用モデル」を改定するとともに国、地方公共団体等におけるウェブアクセシビリティ評価の取組を促進することを目的として、 「みんなのアクセシビリティ評価ツール（miChecker（エムアイチェッカー））を開発しました。 miCheckerは、ウェブアクセシビリティ対応の取組みを支援するために、総務省が開発し、無償公開しているアクセシビリティのチェックツールです。[引用]

残念ながらHTML5 に対応していないので、アップデートがないかぎり、今後使う機会はないと思います。 しかし、Javaで作られおり、ソースコードも公開されているようなので、改良して使うこともできそうです。

HTML_CodeSniffer

HTML_CodeSniffer

こちらは、現在使用できるWeb サービスです。 WCAG2.0[後述] とアメリカ合衆国リハビリテーション法第508条 のチェックができます。

使い方は2種類あります。チェックして問題があると、「エラー」、「警告」、「要確認」の3つの項目が出るようです。

  1. html コードをコピペしてチェック
    WCAG2.0 A, AA, AAA, リハビリテーション法第508条の4つの中から選択して、チェックできる。
  2. Webページのままチェック
    「アクセシビリティ監査Bookmarkletをゲット」の部分(リンク)をチェックしたいページのリンクへドラッグして使用。 WCAG2.0 A, AA, AAA, の3つの中から選択して、チェックできる。こちらは、なかなか面白かったので別の記事にでも。

色についてのチェックはなさそう？

colorsafe

アクセシビリティカラーツール。背景色を決めると、WCAG に基づいたテキストの色を決めてくれるそうです。

colorsafe.co

おそらくですが、WCGAでは、コントラスト比を 4.5:1 以上にしたほうがいいとあるので、そこから逆算しているのだと思います。 計算式などはこちら→G18: テキスト（及び画像化された文字）とその背景の間に、少なくとも4.5:1以上のコントラスト比をもたせる｜WCAG 2.0 実装方法集

WCAG2.0 とは？

「WCAG 2.0」とは、インターネットに関する技術開発と標準化を行っている国際的団体であるWorld Wide Web Consortium（以下、W3C）が、 Webアクセシビリティを確立することを目的として、 WCAG1.0の改定版として公表した12項目のガイドラインと達成基準等で構成されるドキュメントのことです。

[引用]

電子行政：キーワード - WCAG 2.0：ITpro

詳細は、ウェブアクセシビリティ基盤委員会 が日本語訳を作っているので、こちらを見ればいいと思います。

WCAG 2.0 解説書

4原則と12項目のガイドラインがあり、以下のようになっています。

  1. Perceivable 知覚可能

    1. [代替テキスト] を理解する（あらゆる非テキストコンテンツには代替テキストを提供する）

    2. [時間の経過に伴って変化するメディア] を理解する（時間に伴って変化するメディアには代替コンテンツを提供する）

    3. [適応可能] を理解する（情報や構造を損なうことなく、様々な方法で提供できるようにコンテンツを製作する）

    4. [識別可能] を理解する（ユーザーがコンテンツを見やすくしたり、聞きやすくしたりする）

  2. Operable 操作可能

    1. [キーボード操作可能] を理解する（すべての機能をキーボードから利用できるようにする）

    2. [十分な時間] を理解する（ユーザーがコンテンツを読んだり使用したりするのに十分な時間を提供する）

    3. [発作の防止] を理解する（てんかん発作を引き起こす可能性のあるコンテンツは設計しない）

    4. [ナビゲーション可能] を理解する（ユーザーがコンテンツを探し、現在位置を確認し、コンテンツ内を移動するのを手助けする手段を提供する）

  3. Understandable 理解可能

    1. [読みやすさ] を理解する（テキストコンテンツを読みやすく理解できるものにする）

    2. [予測可能] を理解する（ユーザーがウェブページの表示や動作を予測できるようにする）

    3. [入力支援] を理解する（ユーザーが間違えないようにしたり、間違いを修正するのを手助けする）

  4. Robust 堅牢性

    1. [互換性] を理解する（現在および将来の支援技術を含むユーザーエージェントとの互換性をサポートする）

また、実装方法についてもあります。WCAG 2.0 実装方法集（Techniques for WCAG 2.0 日本語訳）｜WCAG 2.0 実装方法集