PowerCMS ブログ

仙台、高松、大阪に続いて9月11日に東京で開催された「Webアクセシビリティの学校 in 東京」にOgu、Miyazaki、Penの3名(以下O、M、P)で参加してきました。

Webコンテンツにおけるアクセシビリティとは？

Webコンテンツにアクセスすることとは、「画面を見る」「読む」「音声を聞く」「理解する」「操作する」「入力する」など様々な方法があります。
その中で障害があることによってアクセスが困難になることがあります。そのような場合はスクリーンリーダー、点字ディスプレイ、拡大機能の使用、ハイコントラスト表示などの支援技術を利用してWebコンテンツにアクセスできるようにします。

ロービジョンの人が実際にフォームを使用するときの疑似体験をしました。
かなり視野が狭まり、「はい」「いいえ」のチェックボタンも設問から離れたところに設置すると、どこの列を見ているか理解しにくい、というものでした。

O: 実際に体験することでユーザビリティを意識することができますね。
M: ほんと、一行読むのも大変ですね。

またコンテンツにアクセスするためにユーザーをアシストしてくれる支援技術を使う方も多くいます。四肢障害のある方が使う音声入力ソフトがいくつか紹介されました。
また、特に支援技術がない認知、⾔語、学習障害ユーザーにとっては、コンテンツ側で見えやすい文章と図解を使ってわかりやすくする配慮も必要です。

P: いろんなツールがあって驚きました。Webコンテンツの形が多様化している、というのが印象的でした。
M: 画面の色を反転すると見えにくくなってしまうもののデザイン処理について今後も注意していきます。

高齢化社会に加えてユーザーの多様化が進んでいます。また健常者が一時的に障害のある状態になることもあります。障害者や高齢者という枠ではなく、より多くのユーザーが、より多くの場⾯で、より多くの⽅法で利⽤できるようにすることにより多くの利⽤環境をサポートして、より多くのユーザーにリーチできるようにすることが大事です。

O: 利用者全般のユーザビリティを向上、ですね。
P: 若くてもいつケガをするかもわからないし、老化は誰にもやってきますしね。

アクセシビリティ確保の基本。キーワードは "Machine Readable"

アクセシビリティを確保するには？スクリーンリーダー対応するにはどうしたら？
なるべくテキストにすることと適切なマークアップをすることで人間が読みやすくなっているだけではなく、コンピューターにも処理しやすくなります。
ソースコードからコンテンツを読み取れるよう「マシーンリーダブル」にすることで、スクリーンリーダーが情報にアクセスすることができるようになります。
また、スクリーンリーダー対応とSEOには共通点が多いので、結果SEO対策にも繋がります。

O: テキストが最もアクセシブル、とおっしゃっていましたね。
M: HTMLのマークアップが命、とも。
P: これまでマシーンリーダブルにすることとSEO対策は別物と考えがちだったことを反省します。

アクセシビリティ確保の基本テクニック︓HTML初級編

アクセシビリティ確保のために具体的には、まず以下のポイントが重要だと言われていました。

• コーディングは適切か
• マークアップは適切か
• ページタイトルは内容が分かるように記述する
• 画像には代替テキストを提供しているか
• 色の使いかたは適切か
• キーボードで問題なく操作できるか
• 動画にはキャプションを提供しているか

O: コーディングで意外とよくある事例が、終了タグが無いというもの。うっかりミスをしないように気をつけたいですね。
P: 装飾だけが目的の画像にはalt属性を空（alt=""）にすると良いそうです。これは今日からでも実行できますね。

M: 文字色と背景色とのコントラスト比チェックには、弊社サイトから無料のツールがダウンロードできますから是非ご利用ください(笑)
ColorTesterのダウンロードはこちらから

P: フォームのエラーメッセージにも注意が必要ですね。該当箇所に修正方法などを分かりやすく記述することがユーザビリティ向上につながるそうです。

O: マウスで操作できることはキーボードでも操作可能にする、というのが基本ですね。意味や操作性を損なわない順序でキーボード・フォーカスが移動するか、実際にテストすれば確認できますよね。

M: YouTubeなどの動画にキャプションをつけただけで、閲覧率がアップするというのも興味深かったです。

まとめ

今回のセミナーは初心者向けのものだったのですが、ポイントは一貫して"Machine Readable"。

Webサイトのアクセシビリティを確保することは難しいと思われがちだったけれど、適切なテキストとマークアップによってある程度確保ができるということがわかりました。
また、100%対応を目指すのではなく、できる範囲で対応していくことで、より多くのユーザーが、より多くの場⾯で、より多くの使いかたができるようにしていくことが大事ということも。
何をどこまでやればよいか？の⽬安になるのが、JISやWCAGなどのアクセシビリティガイドラインなので随時チェックしていきたいと思います。

アルファサードの取り組み

弊社ではWebアクセシビリティ向上への取り組みとして、無償ツールの提供の他、Movable TypeやPowerCMSのプラグインとしてJIS X 8341-3への適合を支援する PowerCMS 8341 の開発や提供を行なっています。今後もよりよいWeb、誰もが利用できるWebの普及に微力ながら貢献していきたいと思います。

参考URL

• UDトーク（音声入力ソフト）
• ドラゴンスピーチ（音声認識・音声入力ソフト）
• W3C Markup Validation Service
• ColorTester(2色のコントラスト比を計算し評価するツール)