共同ログ (stypi_)

以下は、2012年2月18日（土） に開催された 「福岡アクセシビリティセミナー Vol.1」 のイベント中に出席者達数人で取られた共同ログです。

イベント中に立ち上げていただいた、 @shikajiro さん、ありがとうございました。

※共同ログなのでみんな自由に書いてくださいね。みんなでほぼ同じ文章を残すのは無駄だよねっ。

福岡アクセシビリティセミナー vol.1 http://fww-a11y.in/
#福岡a11y

植木さんのお話

web vs 雑誌・新聞
web vs テレビ・ラジオ
についてグループディスカッション

情報としてのweb
リアルタイムの情報発信
リアルタイムの情報共有

webアクセシビリティとは

• 障害のある人がwebを使えること
  +高齢者 +一時的な障害のある人
• JIS X 8341-3:2010

会場でiPhone持ってる人多い。4割くらい？

【弱視】

弱視者向け、画面拡大ソフト。参考の動画を紹介。

• 視力0.03。レンズが効かない。
  
• サイズは7倍
• 黒背景、白文字(反転させる)
• 総務省の画面を見てみる。すごく画面に近づいてる。ズームするの閲で覧できない。
  http://www.soumu.go.jp/main_sosiki/joho_tsusin/w_access/kanren02_video.html

【色弱】

• 色弱の人が見分けやすい配色について
  
• 男性の20人に1人の割合
  （僕の友人も色弱で警察の試験落ちてたなぁ・・・ しか）
  
• テレビ局で津波警報の色がバラバラだった。
  
• 色＋点滅してたような。
  
• パターンによって標準化が進んでいる

【聴覚】

特に支援技術はない。

• 動画とかにコンテンツ作成者の考慮が必要(キャプション(字幕)を提供するなど)
• 操作しづらい人が利用する支援技術
  
  • ジョイスティック，トラックボール，キーボードガード

【認知・言語・学習障害】

• 文章の理解が苦手
• レイアウト・構造の理解が苦手胃

まだまだ研究が足りてない。個人差があるので難しい。

【高齢者】

五感に経度の障害を抱えている状態
日本は超高齢化社会 10年後は人口の半分が50歳以上
インターネット人口の高齢化
高齢者＝65歳以上とか年齢だけにとらわれるのはアクセシビリティには無意味

W3C WAI-AGE ヨーロッパ中心
http://www.w3.org/WAI/WAI-AGE/

【一時的の障害のある人】

• 視覚
  • メガネを忘れる
  • モノクロでプリントアウトしてしまう
• 聴覚
  • 音声を出せない所でイヤホンがない
  • 周りの騒音
• 操作

【まとめ】

いろんな人が利用する事を考える必要がある
WCAG-2.0の定義について

代替テキストに関するガイドライン
非テキストコンテンツに関する達成基準
例：imgタグのalt属性による代替えテキスト
（w3cちゃんと読めってことかな・・・）
http://www.w3.org/TR/html-alt-techniques/

テキストが最もアクセシブル！
-いろんな形に変換できる
-拡大しても画像文字程荒れずに読みやすい
-例：自動で字幕をつける技術
YouTube「Automatic Captions in YouTube Demo」
http://www.youtube.com/watch?v=kTvHIDKLFqc
英語音声 -> 英語字幕 -> 日本語字幕 言語のアクセシブル

「アクセシビリティはテキストが命(ウルトラマン級)」（３つある笑いの１つ目）

【見た目しか考えていないソースコードの例】

-検索エンジンに引っかからないなどg
-例：img要素によるヘッダ表示
--alt属性でテキストを付与する
--h1などでヘッダであることを主張する

Human Redable/Understandable から Machine Readable/Understandable へ

「HTMLではマークアップも命」（だっけ？）←合ってますー
http://instagr.am/p/HIp5xNRRYR/ <- 証拠発見

【アプリ化するWebコンテンツ】

• Aーjaxの普及でわかった問題点
  
  • ダイナミックに変化するページに音声読み上げソフトなどが対応してない。
  • マウス操作を前提としている。キーボードで操作出来ない。
• W3C「WAI-ARIA」の定義
  http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/index.html
  
• jQuary
  Dojo
  http://dojotoolkit.org/reference-guide/quickstart/writingWidgets/a11y.html
  
• htmlのrole属性が標準化されつつある
  • 例：ツリーの表示
    • role属性でtreeとかtreeitemなどを示す
    • treeだと右カーソル操作でツリーが開くなど

「アクセシビリティはキーボード操作も命」（3回目、あれ、2回目なんだっけ…）（会場大爆笑）

コンテンツ・製作者・ユーザー
w3cとブラウザ実装の違い
（htmlやw3cはちゃんと学ばないといけないね　しかじろう）

webアクセシビリティ = 高齢者・障害者対応　と思われている。

ユーザー全般のユーザービリティ向上
↓
ユニバーサイルデザイン
-全ての人が使いやすいデザイン

代替テキストがコピペできるブラウザもある

デバイスを選ばないwebコンテンツ
障害者とモバイル端末ユーザーに共通するバリア

アクセシビリティを考えることで得られるメリット

• 機械的な検索サービス(Siriなど)に対応できる
• 企業ブランディングにつながる（耐震対策などと同じで地味だが）<- この表現重要っすね。

"Access by everone regardless of disability"

「Webはアクセシビリティが猪木 命」

miChecker
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/miChecker_download.html

井上さん

Web制作者への注文

• 代替テキストは必ずつけて欲しい
  • ないと非常に苦労（行ったり戻ったりが発生する）
  • ボタンとかは忘れがちだが非常に大事

「（我々の）生活を変えたWebが、今後バリアとならないことを願う」

ピクトグラムで伝えよう
講演者：吉川伸彦

[PICTOGRAMとアイコンの違い]

アイコン：娯楽性をもとめられる
-記号としての伝達性は必要としない
-自由度が高い

PICTGRAM：人の保護や防御なども求められる
-記号であることがわかる
-画像自体が情報より前に出ていないこと
-文化などに依存しない

[ピクトグラムの生い立ち]

甲骨文字、ヒエログリフ、紋章
-どれもピクトグラムには成りきれていない

産業革命以降ようやく
-標識など

ISOType：絵文字で情報を伝えようとする試み？

オリンピックでピクトグラムが進化
その後、車椅子や非常口などのマークが作られた

[実際の製作過程]

よくあること

• 他のアプリを参考に作成
• オリジナリティをだすために色々アレンジ
• 結局良くわからない、使えないものに

やるべき工程

1. 伝える情報の定義
• 指示、警告（情報を伝えるが行為は受け取り側の自由まかせ）
• 指令（行為を限定する）
• 禁止（感情に影響をおよぼして無意識にある行為に向けさせる）
  などなど
  
2. 意味からモチーフに変えていく
   
• 例1：「その他」という意味を「省略」と解釈し、「...」というモチーフで表す
  
• 例2：浸透しているなら本来の意味と間違っていてもそれを使う
  
3. 絵にする

• アイコン（そのものの姿をモチーフにする）
• シンボル（連想させるものをモチーフにする/ Pで駐車場など）
• インデックス
  
1. 抽象化する
   

• いらない情報をそぎ落とす
  
• 個性をなくす
  
1. 統一させる
• フォルムの統一感をだす
• ラスター（グリッド）上に描くとやりやすい
  
2. フォーマット化

• 例）地のある場所に置くのとそのまま置く場合のルール
• サイズとか反転のさせ方など

ピクトグラムで大事なこと

• 匿名性 - make anonymous
  • ピクトグラムには個性は不要
  • オリジナリティがあると単なるイラストになってしまいがち
  • デザインされていることに気づかれないぐらいが丁度いい
• 組み合わせ
  • ピクトグラム同士を組み合わせる
• コンテキスト
  • そこに置かれる状況とくみあわせる(連想)

限界を考える

• 絵だけでは伝えられないものがある
  • 体験のない概念とか（リツイートとか）
    
• 時代や文化でも変わってしまう
  
  • 保存ボタンがフロッピーのマーク？
    
  • スカート履いてるのが女性？
    
• ある意味ピクトグラムそのものが言語

オープンソース CMS における多言語対応のトライ＆エラー
講演者：三好隆之（世界の三好）

Contact Form 7 の多言語対応
(WordPressのプラグイン）

アラビア語、ペルシャ語、ヘブライ語
右から左へ（昔の日本語みたい）

LTR RTL 双方向性

言語派生のツリー構造

ボランティアで翻訳してもらってる

アラビア語、ペルシャ語、ヘブライ語
右から左へ書く(RTL:Right to Left)
Wikipediaでもサイドバーが右側に来る
ラテン文字とルーツは同じらしい

タグで表現した時にどうなるの？？

• Wikipediaで勉強w
• LTRとの混在(bidi:Bidirectional)は一般的
• -例）数字は左から右に書く（外来文字だから？）

UnicodeのBidirectionalアルゴリズム

• メモリ上の文字の位置(論理的位置)
• 表示上の文字の位置(物理的位置)
• 相互変換の仕様があるが結構複雑…
• RIGHT-TO-LEFT-OVERRIDE(&#x202E)を先頭につけると日本語でもRTLで表示される！
• Wikipediaでも完全ではない(3点リーダーの位置など)
• まだわからないこと
  • フォームに双方向テキストを入力する時にはどうすれば…
  • 独自タグとかはどー書けばいいのか…

「多言語対応の技術は面白い！」

パネルディスカッション
パネラー：植木さん、井上さん、河村さん、鈴木さん
司会：坂本さん

河村さん：DAISYはなぜ国際規格を開発するのか

DAISYとは
http://www.dinf.ne.jp/doc/daisy/about/index.html

災害時に求められるアクセシビリティを考える取り組みなど
-50cmの津波でも人は倒されるといる情報を理解しているかどうかが生死を分ける
--参考:子どもが語る大震災（２）「ぼくらは大津波を生きた」
--http://cgi4.nhk.or.jp/gendai/kiroku/detail.cgi?content_id=3142
DAISYという規格に基づいて情報配信をしている
DAISY化されたコンテンツは著作権的な特例を受けられる?らしい
-これまでは視覚障害者については例外規定があった
-その後聴覚障害も入った
-最近、マルチメディアについても複製、翻案が認められた
--一定の条件を満たした施設（図書館など）
DAYSY4からはEPUB3という他の規格とも提携?
-作成にはオープンスタンダードを採用
-適切なものがなければ作る
-SMIL3など(http://www.w3.org/TR/SMIL3/)

鈴木さん

視覚障害者の数学科学生の入学をきっかけに活動開始

• 理数系の分野（特に数式など）は点訳ボランティアも不足
• 理数系のためのコンテンツのオーサリングツール(InftyReader)などを開発してきた
  

マルチメディアDAISY

• InftyReaderのコンテンツをDAISYに変換できるようにしたり
• 数式の読み上げの特殊性に対応
• 音声合成ではなく、人の声を短く切って組み直すことで自然になっている
• 負の数を「マケノカズ」と読んだりする
• 標準化が必要
  • 特に制御記法の標準化
    
  • 表や図の読み上げ方など

（DAISYって聞いたいこともなかった…）

ディスカッション

[植木さん]
PDFがアクセシブルでないわけではなくAdobeも頑張って規格化している?
http://www.w3.org/WAI/GL/WCAG20-TECHS/pdf.html
リーダー開発者やコンテンツ制作者の対応の方が問題かも

[井上さん]
困るPDF

• スキャンした画像をただ貼っただけ（お役所におおいよねw goking）
• 文字はあるけどタグ付きではない
• PDFは開くまでに時間がかかる（途中経過で読めない）
  • なんでできるだけ開かないw
  • マルチカラムの場合につながって読み上げられたり

[鈴木さん]
あくまでPDFは印刷が前提
レイアウト解析をするのはまだ技術的に難しい

[河村さん]
リフローなどの考え方がPDFは向いていない
SVGの対応など、マルチメディア対応を考えるとDAISYやEPUBが優位
InDesignはEPUBやDAISYへのエクスポートができる