自治体サイトから聞こえてくるもの、見えてくること

有限会社ユニバーサルワークス
代表取締役 清家順

本⽇、お話しすること
 ⾃治体サイトWebアクセシビリティ調査って？
 アクセシビリティ実装事例
 調査された⾃治体や巷の反応
 無料で調査することに意味があるの？
 ⾃治体サイトのこれから

自治体サイト
Webアクセシビリティ調査って？

有限会社ユニバーサルワークス
 ウェブアクセシビリティに関する業務
ウェブサイトの評価・診断講演・執筆 清家⾃⾝は、もともとウェブ制作者でしたtableレイアウト全盛
<font size="4">⾒出し</font>alt属性？ あのピロッて出るやつでしょ転機。

私のパートナーはWeb制作者で、私の失明前もWeb制作者であったのだが、 私はパートナーの作品をほとんど見たことがなかった。興味がなかったのである。ところが、失明するとその作品が無性に見たくなった。
（中略）

そんな私に朗報が届いた。スクリーンリーダーとか、音声ブラウザとかいうヤツがあるらしい。見えない人も音声でコンピュータを操作できるのだという。
私は、「ねぇ、あんたの作品を見せてよ。」とパートナーに懇願した。「あいよ。」と開いてくれたはいいものの、さっぱり意味がわからなかった。

有限会社ユニバーサルワークス
 ⾃⾝の「ウェブ制作者像」再定義
 障害のある⽅でも、というか、パートナーが情報を得られるようにしたい！

⾃治体サイトWebアクセシビリティ調査
 ユニバーサルワークスがやりたいことを⽰す ⾃治体は、ウェブアクセシビリティの確保に真っ先に取り組むべき 時間もあるし、全部⾒てみよう 経験不⾜の不安⇒ ⼀利⽤者に徹する

⾃治体サイトWebアクセシビリティ調査
 2003年から、毎年、9⽉1⽇に発表
 2003〜2006年 都道府県、政令市、県内
 2007〜2009年 都道府県、政令市、23区
 2010〜2011年 都道府県、政令市

2003年ごろの⾃治体サイト
 島根県以外はすべてテーブルレイアウト
 ⾒出し要素は、ほとんど使⽤されず
 3県では、トップページからフレーム
 font、b、marquee…
 町村レベルでは「どこでも配置モード」すら 「閲覧⽀援機能」をすでに導⼊している県

2004年ごろの⾃治体サイト
 JIS X8341-3:2004の発効後初の調査
 宮城県、福井県、島根県、⾹川県がテーブルレスに フレーム採⽤は、2県に減少
 ナビゲーションの整備が進む

Ａ6-2
フレームの使用はできるだけ控え、使用する場合はサポートされていないブラウザでも意味が通じるようにする（優先度Ａ）「いしかわWebデザインガイド」より

2005年以降の⾃治体サイト
 (X)HTML + CSS が増加
当初「テキスト＝アクセシブル」の⾵潮
その後、⼤きなビジュアル増える

 フレーム採⽤サイトなくなる トップページのalt属性問題ない⽔準へ 「アクセシビリティについて」ページの増加

2003

2006

2008

2009

2011

2006

アクセシビリティ実装事例

事例1.ブロックスキップ
 7.2.4.1
ブロックスキップに関する達成基準
複数のウェブページ上で繰り返されているコンテンツのブロックをスキップできるメカニズムが利⽤可能でなければならない。

注記 この達成基準は，等級A の達成基準である。

スキップできるメカニズム？
 ブロックをグループ化

⾒出し要素スクリーンリーダーの機能でスキップさせるビジュアルブラウザでは限定的（IEで意味なし）

 ブロックをスキップするリンクを作成
「本⽂へ」のようなリンク
⾒えていないとダメ• ビジュアルブラウザをキーボードで操作• JIS2004では、不可視の事例が掲載

<!-- 不可視リンク設定ここから --><div class="nocssread">

このページは、共通のメニューを読み飛ばすことができます。直接本文をご覧になるかたは「このページの情報へ」というリンクをクリックしてください。
<br /><a href="#header_002">

くらしの情報へ</a><br /></div><!-- 不可視リンク設定ここまで -->事例1.ブロックスキップ まとめ
 等級Aなので、基本と⾔えば基本 正しく構造化 でほぼＯＫ
 Internet Explorer 6 どうするの？
 「本⽂へ」をつけるなら
⾒える意味が通じる
サイト全体で同じ動き

事例2.⽂字サイズ変更
 7.1.4.4
テキストのサイズ変更に関する達成基準
コンテンツ⼜は機能を損なうことなく，テキストを⽀援技術なしで200%までサイズ変更できなければならない。ただし，キャプション及び画像化された⽂字は除く。
 注記1 サイズ変更は，ユーザエージェントの初期設定を基準とする。200 %は，幅及び⾼さを2 倍にすることである。
 注記2 この達成基準は，等級AA の達成基準である。

ブラウザの機能 で変更する
 JIS準拠ならこれだけで（IE6を除く）
 ⾒つけられないかも どのサイトに⾏っても設定はそのまま

ウェブサイトの機能 で変更する
 「やった感」がでやすい ⾒つけやすい 同じサイト内のみ有効
 動作環境が限られる場合も

事例2.⽂字サイズ変更 まとめ
 等級AAなので、準拠を⽬指したい ウェブブラウザに依存 でほぼＯＫ
 Internet Explorer どうするの？
 ウェブサイトにその機能をつけるなら
多くのブラウザで使えるように
200％まで変更可能
ほかの部分への⼲渉、⽂字の重なりなど注意JIS X8341-3:2010への対応
 達成等級×対応度

 達成等級A、AA、AAA

 対応度
適合、準拠、⼀部準拠、配慮、配慮し試験

試験結果を公開している⾃治体
自治体

達成等級

達成度

静岡県浜松市

A

配慮し試験

長野県塩尻市AA準拠

大阪府茨木市A準拠

愛媛県松山市

AA準拠

達成等級AAに準拠
 7.1.4.5
画像化された⽂字に関する達成基準
使⽤しているウェブコンテンツ技術で意図した視覚的な表現が可能である場合は，画像化された⽂字ではなくテキストを⽤いて情報を伝えなければならない。ただし，次に挙げる場合を除く。
 a) カスタマイズ可能
画像化された⽂字が利⽤者の要求に応じて視覚的にカスタマイズできる。
 b) 必要不可⽋⽂字の特定の表現が，伝えようとする情報にとって必要不可⽋である。

 注記1 ロゴタイプ（ロゴ⼜はブランド名の⼀部である⽂字）は必要不可⽋なものであるとみなす。
 注記2 画像化された⽂字とは，特定の視覚的効果を得るために⾮テキスト形式（例えば画像）でレンダリングされたテキストである。これには，重要なその他の視覚的なコンテンツを含む画像の⼀部であるテキストは含まれない。例えば，写真に写っている⼈の名札にある⼈名は含まれないこともある。
 注記3 この達成基準は，等級AA の達成基準である。

必要不可⽋？ 松⼭市：AAに準拠

JIS X8341-3:2010に対応するために
 他サイトの試験結果を疑え
試験可能とはいえ、解釈の余地も 要件の「意図」を読み解く アクセシビリティサポーテッド情報をチェック JISへの準拠 ≠ ⽬的

JIS準拠 ＜ アクセシビリティ
「ここまでやった」。結構⼤事。

JIS X8341-3:2010に対応するために
 他サイトの試験結果を疑え
試験可能とはいえ、解釈の余地も 要件の「意図」を読み解く アクセシビリティサポーテッド情報をチェック取り組んだだけ立派！

良き見本となれるように、
 JISへの準拠≠ ⽬的
JIS準拠 誠実な実装・試験を！
＜ アクセシビリティ
「ここまでやった」。結構⼤事。

調査された自治体や巷の反応
無料で調査することの意味

無名、無実績、無顧客からのスタート
 前述のようなスタートなので 私とパートナー（全盲）の2名のみ
 調査してから考えよう
これが売れるのか
どう売るのかだれに売るのか 発表すれば誰か⾒てくれるかもニュースサイト、新聞、雑誌

調査結果の発表で⼼がけたこと 「⼈」の存在を⽰すコンテンツに⾔及する
感想・主観を⼊れる

 そのものズバリな名称
 ⼀⽬でざっくりとわかる2003年当時の調査結果ページ

調査してみて何が起きたか 植⽊さんと出会えた（はーと） それなりのお仕事コンサル会社・制作会社
⾃治体は、既知の業者に相談して終わり それなりのアクセス数
 ⾃治体からの苦情電話やメール多数
 障害のある⽅からの連絡2007年に起きたこと
 2007年、東京23区を追加
 いつものように調査 いつものように発表 いつものようにプレスリリースこれまで続けてみて…
 カテゴリを絞れば「その道の⼈」になれるかも「ウェブアクセシビリティ」だと無理
「⾃治体の」は少し減る「静岡県で活動している」はもっと減る

 仕事につなげる・つながる
毒⾆はダメみたい• ⼀時の興味にはいいみたいほめるストーリー
客観的・定量的な評価 ＋ 主観・意⾒これからの自治体サイト

JIS準拠が、具体的な結果として⾒えてくる JIS X8341-3:2010 ＆みんなの公共サイト

2013年度末 ： 「A」準拠
2014年度末 ： 「AA」準拠

 先⾏事例への追随

良き実装・良き事例の蓄積に期待 各種外部評価

某区 要求水準等説明書

まとめ今⽇のまとめ アクセシビリティスイッチをONに！
 悪い例からも、良い例からも学ぼう！
 「特別な配慮」の前にできることは？

ありがとうございました
ご質問は、

info@u-works.co.jp
までどうぞ