発注者にとってのウェブアクセシビリティとはKDDIウェブコミュニケーションズ
デザイン部

神森 勉

本日の内容• 自己紹介• 企業にとってのウェブサイトとは？
• 企業ウェブサイトの理想と現実• 弊社事例• 制作時におけるアクセシビリティ実装の効率化
• まとめ

- 略歴

自己紹介

‣ パーカーコーポレーション：営業部‣ 大同：デザイナー‣ グローバルデザイン：アクセシビリティエバンジェリスト‣ アンカーテクノロジー：制作部マネージャー‣ KDDIウェブコミュニケーションズ：デザイン部GM- その他‣ テクニカルライター、テクニカルトレーナー‣ 若年者ものづくり競技大会・技能五輪全国大会競技委員‣ 自称 Dreamweaver マスターでした- ソーシャルアカウント‣ Twitter：@tstudio‣ Facebook：facebook.com/tstudio発注者にとってのウェブアクセシビリティとは？

“なんだかよくわからないもの”

“それってお金になるの？”

“見積もり上がっちゃうよね？”

これが現実ではないでしょうか？

発注者がウェブサイトに求めるものってなんだろうここからは

発注者＝企業

として話を進めていきます企業にとってウェブサイトとは

企業にとってウェブサイトとは物流

人事企画

事業

価格

その他サポート

営業

Web

事業活動のひとつ

企業にとってのウェブサイト
• 事業活動の一つ• 人を管理することは出来ない• 勝手に企画が出来るわけでもない• 事業の収益全てを担っているわけではないしかしウェブサイトにはウェブサイトの役割があります企業にとってのサイトの目的
商品やサービスを売りたい
事業内容を伝えるたい
商品やサービスを知らせたい
自社に対しての意見を聞きたい
自社に興味を持ってもらいたい企業にとってのウェブサイトとは

事業活動において

お客さまと自社とのコミュニケーションを支える重要なもの

こうしたことを前提にこんなことありませんか？

たとえば、外出先でビジュアルによる情報入手の制限

たとえば、オフィスで音声による情報入手の制限

たとえば、スマートフォンで操作による情報入手の制限

たとえば、どこかの国で

文章による情報入手の制限

日常においてサイトから情報入手が出来ないこんなことありませんでしたか？

Webの情報入手に関わる制限例
情報入手時の制限事項（一例）

制限のある例ビジュアルによる情報入手の制限

回線による画像非表示

音声による情報入手の制限

音の出せない環境

操作による情報入手の制限

マウス以外のデバイス使用

文章による情報入手の制限

言語・難解な内容

コミュニケーションができない！

物流

人事

事業あ！

価格

その他

サポート

企画

営業

事業活動が！

どうしたら...

サイトから情報入手が出来ないなにかしらの理由でアクセスできない情報へアクセスできないのであれば

アクセスできるようにすればいいウェブアクセシビリティ

ウェブアクセシビリティといえば䈗૶↪⠪䇭␹᫪䇭ീ㪡㪪㪘㩷㪮㪼㪹㩷㪪㫋㫆㫉㪼㩷㫆㫉㪻㪼㫉㩷㪥㫆㪅㪐㪈㪇㪇㪈㪎㪏㪊㪊㩷㪆㩷㪛㫆㫎㫅㫃㫆㪸㪻㪼㪻㪑㪉㪇㪈㪇㪄㪈㪇㪄㪉㪇䇸䊡䊷䉱䊷䊤䉟䉶䊮䉴ᄾ⚂䇹䈮ᓥ䈦䈩䈗૶↪䈒䈣䈘䈇䇯ᯚᳮᐐˁ᪩޼ᐐኄᥓਁᜫ᜛઩ᦉᴪ
ষ‫ڨ‬ᣮαȾȝȤɞൡ‫ب‬ᴩʇʟʒɰɱɬՒɆ
ɿ˂ʝʃᴪቼ 3 ᥂ᴷɰɱʠɽʽʐʽʎ
JIS X 8341-3ᴷ2010

ࢲ ਽ 22 ࢳ 8 ఌ 20 ஓ୎ඩஓటࡾഈൈໄᝩ౼͢ߜឰ
ᴥஓట᛼ಐԦ͢ᄉᚐᴦ

ᕻͽ൏ศȾɛɝི୽ȺɁᛓᛏᴩᢆᢐኄɂᇣඨȨɟȹȝɝɑȬǿ

ウェブアクセシビリティの仕様は

高齢者や障がい者でもアクセス可能なコンテンツを提供

Webの情報入手に関わる制限例
情報入手時の制限事項（一例）
ビジュアルによる情報入手の制限
音声による情報入手の制限
操作による情報入手の制限
文章による情報入手の制限

制限のある例
回線による画像非表示や視覚障害など音の出せない環境や聴覚障害などマウス以外のデバイス使用や肢体障害など言語・難解な内容や知的障害など

これを守れば

Are you happy?

でしょうか？

企業ウェブサイトの理想と現実

“お疲れ様です、◎◎です”

“規約が更新されたのでサイトに反映をお願いしますっ！”

“規約が更新されたのでサイトに反映をお願いしますっ！”↑「っ」と「！」付き

“お手隙の時にお願いしますっ！”

“お手隙の時にお願いしますっ！”↑「っ」と「！」付き

お手はすかないのですが・・・やるしかありません“お疲れ様です、△△です”

“XYZが不具合を起こしたので”

“急遽お知らせを掲載します”

“以下の文面で30分後に公開で”

は、はいっ ＞＜日常的に行われているやりとり

企業のサイト運営
PR

通常運用
新サービス

Facebook

ヘルプ

企業のサイト運営
PR

通常運用
新サービス
もりもりてんこ盛りですFacebook

ヘルプ

企業のウェブ担当者って大変なんです...

さらに...

2012年5月26日

突然の通達“7月1日に新サービスをリリースすることになります”

“スケジュール的にムリが無いか調整をしてください”

“今期の売上にも影響するサービスです”

みなさんならどうしますか？

そんな無茶なスケジュールだったら...

期日をずらせばいいじゃんとはいきません

企業にとっては売上と利益

計画の達成売上計画達成のためにさまざまなプロジェクトが走りますマーケティングなどによるリリースのタイミングは重要ですこうした中でウェブサイトが作られて運営されていきますウェブへアクセスできるようにすること

どこまで考えられているのでしょうか？

弊社事例

CloudCoreプロジェクト• 期間：2011年10月15日～12月15日• プロジェクトメンバー• ディレクション• 設計担当• デザイン担当（外注）、ロゴデザイン担当（社内）• コーディング担当（外注）画面設計

デザインコンペ

デザイン案

決定稿

これらを経てできあがったサイト

あれ？

ん？

アクセスできない？

なぜこうなったのか

制作要件にアクセシビリティが盛り込まれていない

そもそもサイトの設計段階でアクセシビリティが抜けている？

その結果が・・・大切なことなのでもう一回

ALT属性はきちっと書いてあるのでALT属性を介して伝わるところには伝わります実装方法についての是非はここでは問いませんが...

残念なのは

アクセシビリティ要件を伝えないと

細かいところで実装に不備が出てくるところ

つまりウェブアクセシビリティのオプション化

例えばこんなところも...

せめて文書構造上意味が通じるようにしてよ...

でもアクセシビリティを実現しようとすると

制作会社にとってはコストとして返ってくることもあります例えば「適合試験」

「試験=確認」
ではありません

めざす所に適合しているのかを試験をする

適合しているかチェックをし記録する

項目が多ければ多いほど

稼働コストが発生しますつまり要件に組み込まなければ工数オーバーとなりますコストを抑えてお客さまがアクセスできるサイトを良いサイトつくりたいけど、赤字には...

限られたリソース

どうしたら...

全部まとめてやらなくてよくね？

できるところから始めればいいんじゃないの？

WCAGやJISは䈗૶↪⠪䇭␹᫪䇭ീ㪡㪪㪘㩷㪮㪼㪹㩷㪪㫋㫆㫉㪼㩷㫆㫉㪻㪼㫉㩷㪥㫆㪅㪐㪈㪇㪇㪈㪎㪏㪊㪊㩷㪆㩷㪛㫆㫎㫅㫃㫆㪸㪻㪼㪻㪑㪉㪇㪈㪇㪄㪈㪇㪄㪉㪇䇸䊡䊷䉱䊷䊤䉟䉶䊮䉴ᄾ⚂䇹䈮ᓥ䈦䈩䈗૶↪䈒䈣䈘䈇䇯ᯚᳮᐐˁ᪩޼ᐐኄᥓਁᜫ᜛઩ᦉᴪষ‫ڨ‬ᣮαȾȝȤɞൡ‫ب‬ᴩʇʟʒɰɱɬՒɆ
ɿ˂ʝʃᴪቼ 3 ᥂ᴷɰɱʠɽʽʐʽʎ
JIS X 8341-3ᴷ2010

ࢲ ਽ 22 ࢳ 8 ఌ 20 ஓ୎ඩஓటࡾഈൈໄᝩ౼͢ߜឰ
ᴥஓట᛼ಐԦ͢ᄉᚐᴦ

ᕻͽ൏ศȾɛɝི୽ȺɁᛓᛏᴩᢆᢐኄɂᇣඨȨɟȹȝɝɑȬǿ

ウェブサイトをアクセシブルにするための仕様ですできるところから始めれば良いのです企業のWeb担当者は

ウェブアクセシビリティを理解し実現できるように予算を確保

ウェブサイト制作者は

より効率の良い実装を考えるどこから始めれば良いのかを考える

双方が歩み寄ることでAre you happy?

誰もがHappyになるためにアクセシビリティ実装の効率化

アクセシビリティ実装の効率化• まずは作って、そこから試験では、試験に時間がかかってしまう• 確認をしながら制作を行うことも必要では？
適合試験の前にできること

紹介するツール色周りのチェック

内蔵機能やプラグインなどで簡易チェック

Photoshopの校正機能

Photoshopの校正機能

Photoshopの校正機能

モノクロ変換してみる

Fujitsu ColorSelector

テキストの距離コンテンツのチェック

様々なツールを組み合わせてチェック

Dreamweaverのチェック• HTMLチェックはツール内で可能• ALT属性の有無のチェックは検索置換で• 代替要素の有無• Flashや動画の代替イメージ• 画像挿入時のALT属性パネルはONに• CSSをOFFにしてきちんと構造化されているか再チェック

制作時に少し気にするだけでアクセシブルになります適合試験ができなくても必要最低限の実装は標準にしてもらいたいと思いますでも...

「適合試験」をしアクセシビリティ宣言をすること

自社が多くのお客様とコミュニケーションを取る宣言アクセシビリティへの対応が当たり前のことになるそうなることでWe are happy!

まとめ

まとめ

• 対応レベル、対応範囲をまずは確認• 試験期間の確保と効率化• 確保を優先して、実装時に可能な限り回収する• 「出来るところから」ではなく、「どこからはじめるか」を考える• お客様がアクセシビリティが...と言ったら• チャンスと思いましょう• そこからできることを一緒に考えてあげることが大切です発注者にとってウェブアクセシビリティ• 自社のウェブサイトをアクセシブルにすることは• 多くのお客さまとのコミュニケーションがとれるようになること• 事業を活性化させること• 投資であるウェブサイトが収益をもたらすこと• 適合試験を行い、サイトに掲げるということは、企業がお客さまと「コミュニケーションを積極的におこなう」ということの証明

企業とエンドユーザーがコミュニケーションできるためにアクセシブルなサイトがもっと増えるように...

ありがとうございました