「CSS Nite LP62「Webアクセシビリティの学校」特別授業」

こちらは、CSS Nite LP62のフォローアップページです。

Facebookイベントページ

Twitterやブログなど

ツイートは下記にまとめました。

次のブログなどにて取り上げていただきました。

こちらは出演者のブログ

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

校長挨拶
植木 真（インフォアクシア）

Webアクセシビリティの学校、校長の植木です。長時間の特別授業、おつかれさまでした！

選りすぐりの講師陣による特別授業はいかがでしたか？

今回は、CSS Nite LPの62回目にして初めての「アクセシビリティ」ということで、基本の「キ」をテーマにしました。そして、皆さんにはA4サイズの「Webアクセシビリティ確保　基本の『キ』」をお配りしました。

ここ数年、いろいろな制作会社さんと初めてお仕事をご一緒する機会が増えてきました。そんななか、「アクセシビリティ」に対するステレオタイプな先入観や固定観念をお持ちの方が少なくないと感じます。

それは、「アクセシビリティ」＝「特定のユーザーグループ（つまり、障害者）のためだけに、普通ならやらない特別なことをしなければならない」というものです。特に初回の打ち合わせの場では、これがかなり根強いことに毎回気づかされます。

そんな食わず嫌いをどうにかしようと思って作成したのが、この「Webアクセシビリティ確保　基本の『キ』」でした。こうして10項目をながめてみると、意外とWebデザインやHTMLコーディングの基本的なことばかりなのです。ちゃんと作れば、より多くの利用環境でより多くの人にちゃんと使えるようになると言ってもいいのかもしれません。

そして、実はこの基本の「キ」10項目は、WebサイトやWebサービスなどのアクセシビリティをチェックしているときによく見つかる問題のトップ10でもあります。つまり、この10項目を意識するだけで、あなたのWebコンテンツのアクセシビリティは格段に高まります。

「Webアクセシビリティ確保　基本の『キ』」は、Webサイトで少し詳しく解説しています。また、PDFファイルをダウンロードすることもできます。今回学んだことを周りの皆さんとシェアするために、またより多くの仲間を巻き込んでいくためのツールとして、ぜひご活用ください！

【基調講演】あなたの価値を高めるアクセシビリティ
伊原 力也（freee）

ご参加いただきありがとうございました！またアンケートへのご回答もありがとうございます。すべて拝読しました。

私にとって、調べ物をするうえでGoogle翻訳は欠かせません。横断検索サイトを使うことも多々あります。海外の動画だとYouTubeの字幕を活用します。Kindleはスピーチ機能で読んでいます。いつもイベント申し込みフォームの入力はキーボードで進めますし、このフォローアップはmarkdownで書いています。

みなさまが感想欄に書いてくださったとおり、Webは、その存在そのものが圧倒的にアクセシブルになるように作られたメディアです。そのプラットフォーム上で、適切なUIとしてのテキストを準備してマークアップするだけで、分母へのアプローチとなるだけでなく、ときに想像を超えるほどにコンテンツの価値を増幅させることに繋がります。

つまりWebアクセシビリティとは「Webの仕組みに則り、Webの力を活かす」ことであると私は考えています。Webを作っている私たちがその取り組みを少しずつでもはじめることで、利用者が増え、それが伝搬することでWebの価値は高まり、最終的には自分たちの周りや、ユーザーとしての自分に還ってきます。

冒頭で挙げた私の話は、その一例です。誰かがアクセシブルにしてくれたから、私はアクセスできています。そしてみなさんが今読んでいるこのメッセージもまた、そういったWebの一部なのです。このフォローアップページはやがて、アクセシビリティについて調べているであろう多くの人の目に触れるようになるはずです。それが届くのは、このページがアクセシブルなWebに在り、マークアップされているからです。

このつながりを感じて、これからの取組みに活かして頂ければ幸いです。

なお、7月20日（土）にはJapan Accessibility Conference Vol.2が渋谷アベマタワーズで開催されます。今回も300名規模のお祭りとなる予定です。みなさまのご参加をお待ちしております！

質問と回答

アクセシビリティに関する情報収集はどのように行っていますか？

主にTwitterです。Webアクセシビリティ関連の資料まとめ というドキュメントがあり、ここで出てくるような資料を作っている方々をTwitterでフォローしているため、私のTwitterタイムラインには割とアクセシビリティ情報が流れてくるようになっています。

あとは、このドキュメントの冒頭にも載っているA11YJ Slack Teamに参加してみると、イベントや書籍の情報などがキャッチアップできます。

障害当事者が身近にいないこともあり、どういう使い方をしているか、どこが困るところかなどを知ることができるサイト・動画があれば教えてください。

パソコン操作動画集というページがあり、ここにいくつかYouTubeから抜粋された動画が紹介されています。この他にもYouTubeで、たとえば「視覚障害 iphone」のような形で障害のタイプ＋デバイスで検索したり、「筋電スイッチ」「視線入力」などの支援技術の名前で検索してみたりすると、いろいろ見ることができます。

支援技術の種類については、東京都障害者IT地域支援センターの展示支援機器（ハード）一覧が参考になります（実際に展示も行っています）。

読む習慣のない、または読むことが苦手なユーザーに対してはどう配慮が必要ですかね & リッチ化するコンテンツとアクセシビリティとの両立の具体例があればご教示頂ければ

いくつかのパターンに分かれると考えられます。まず下記2パターンの場合は、やはりテキストをマークアップして提供することが最善手でしょう。

しかし、このどちらでもなく、テキストや文章という表現形態自体が苦手なユーザーもいます（最近の写真や動画をメインとしたSNSの流行は、その兆候を感じさせます）。ここへの回答は、ある題材を多面的なメディアで伝えるということになるかと思います。

たとえば今回のイベントでは、セミナー動画、スライドPDF、UDトークによる発話書き起こしが提供されます。セッション内で紹介したログミーというサービスも、動画に対して書き起こしを提供しています。このようにいくつかの方向から情報が提供されていれば、自分の状況にあったメディアを選択することができます。

こういった提供形態をなるべくかんたんに用意するには、UDトークとYouTube Liveを組み合わせるのがよさそうです。具体的な手順は以下です。

  1. YouTube Liveで動画を撮影します。
  2. UDトークで発話をリアルタイムで字幕化します（具体的な方法）。クオリティを担保するため、複数人でその場で修正を行うのがよいでしょう。
  3. UDトークから取得した発話ログに、発言者や環境音などの情報を追記します。
  4. YouTubeの動画に対し、UDトークの発話ログを「文字起こしと自動同期」という形でアップロードします。

私の同僚の中根さんによる、実際に上記に近い手順を試してみたYouTube動画がありますのでご紹介します。参考になれば幸いです。

売りにつながるという部分がどのサイトでもそうなのだろうかと感じています。ターゲットによっては効果が薄いのではないかと思います。

アクセシビリティとターゲットと効果についてはかなり慎重な議論が必要だと考えています。

まず、どういったコンテンツをどう活用するかは受け手に委ねられています。よく言われる例として「全盲の人がカメラの情報を欲しがるのか」という話があります。これは、以下の観点で「欲しい人にとっては欲しいに決まっている」という話になります。

松森さんのお話にもあったように、私たちには一緒のものを見て楽しみたいという前提があります。そうであればターゲットにしていない人を排除するという考え方はデメリットになるはずですし、企業イメージという観点からも望ましくない振る舞いです。コンテンツが狙っているターゲットと、さまざまな閲覧状況への対応というのは分離し、なるべく多くの状況でアクセシブルに作るよう取り組むのが原則ではあると考えています。

ただ、実際の効果の話とは別に、やりやすい案件とそうでない案件があるのは事実です。現時点では、発注側がアクセシブルにする必要があると考えるものと、そうでないものがあるということです。ユーザーにとっての緊急度や重要度の高い情報、客観的一次情報に近いもののほうが対応が必要だという判断になりやすく、いっぽうプロモーション系は優先度が落ちる、ということが多いでしょう。

ここは、その状況を上手く活かすほうに持っていったほうが、最終的にアクセシブルになるサイトを増やせると私は考えています。そのあたりの考えはツイートにまとめました。

たとえば今回、CM字幕を提供している会社の一覧を見て、私は少なからず好感を持ちましたし、BacklogやKintoneは良い会社が作っている製品であるというイメージも持ちました。現時点では多くの会社がまだ手をつけられていない状況ですから、やはりできるだけ外に言っていくことが相対的に企業価値を上げることに繋がると感じた次第です。効果は作り出すことができます。そういった視点での価値の増大にも、ぜひ目を向けてみていただければ嬉しく思います。

なお、私はこの「アクセシビリティ vs ターゲット」という構造を、最終的には破壊したいと考えています。CMだから字幕がないとか、プロモーション系は後回しとかは、本来はおかしな話です。アクセシビリティを必要とする人がターゲットとして認知されるようになることでこの状況は変わるという仮説のもと、「アクセシビリティで一発当て太郎」としてfreee社にて日々可能性を模索しています。ご興味があるかたはツイートをご覧ください。

音声ブラウザのバージョンアップは誰にお願いすればよいのでしょうか？

ここでのバージョンアップというのは、以下の3通りの解釈ができそうです。

いずれにしても、これはユーザーとコンテンツ提供者とベンダーが互いに発展することが必要だと考えられます。バージョンアップしないのは、現状で満足しているから……というとポジティブですが、以下のような構造により、実際は妥協せざるを得ないケースが多いからだと推定しています。

  1. アクセシブルでない、または使いにくいコンテンツがWebに蔓延している。またそれらのWebサイトの使い方は一貫していない
  2. ゆえにユーザーからするとWebを使うことはモグラ叩きのような探索となってしまい、高度な使い方に取り組むのは合理的でない行動となってしまう
  3. 結果としてタブキー連打＋決定キーといった、どのサイトでも通用するであろう使い方だけを頼りに、それで使い物になるサイトだけを利用する傾向が強まる
  4. この使い方においては高度な機能が必要ないため、スクリーンリーダーをバージョンアップするモチベーションや、スクリーンリーダーの機能を高機能にする理由が出現しない

この状況を改善するには、上記を反転させる必要があります。

  1. ユーザーが、使いたいと思うコンテンツの提供者に対してアクセシブルにすることを求める
  2. コンテンツがアクセシブルになるよう提供者が改修する
  3. アクセシブルになったコンテンツを利用するための閲覧技術をユーザーが身につける
  4. その閲覧技術を発揮できるようなスクリーンリーダーを選定する
  5. より高度な使い方に対応できるようスクリーンリーダーベンダーが製品を改善する

論理的にはこうなるものの、実際のところとして、妥協で済んでいる状態から行動を起こそうとするには非常に大きなパワーが必要になります。ただし前例がないわけではありません。私たちはガラケーからスマートフォンに歩を進めました。それは新しい可能性を手に入れたいという気持ちが、現状維持の気持ちに打ち勝ったからです。私はこれをヒントにして、これはぜひ使いたいと思うようなものを皆が作り、かつそれをアクセシブルにしていくことができれば、状況を変えることもできるかもしれない、と考えています。

ダウンロード

誰もが隣にいる人と一緒に楽しむために
松森 果林（聞こえる世界と聞こえない世界をつなぐユニバーサルデザインアドバイザー）

参加者の皆さま、こんにちは。松森果林です。

拙い話を最後まで楽しんでいただき、誠にありがとうございました。普段あまり意識することのない、聞こえない世界や聞こえにくい世界について、少しでも興味を持っていただけたら嬉しく思います。

そして、ひとつでも多くの動画コンテンツに字幕がつくといいなぁと願っています。字幕付きのとっておきの動画ができたら、教えてくださいね！楽しみにしています。

今回の授業をきっかけに、お仕事や日常の生活の中で「こんなとき聞こえない人だったらどうするんだろう？」「見えない人だったら？」「車いす使用者だったら？」そんなふうに想像する習慣をつけていくと、世界がちがって見えてくると思います。

著書

もっと知りたい！という方は拙著を手に取っていただけると嬉しいです。

ダイアログ・イン・サイレンス

また、「伝える」ことを生業としている皆さんにおススメなのが「ダイアログ・イン・サイレンス」というエンターテインメントです。

音を遮断し、言葉を使用せず、90分間言葉の壁を超えて対話を楽しむエンターテインメントです。日本では2017年初開催にあたり、私は企画監修に関わりました。今年で三年目となり、参加者からは「この体験をすると世界中どこでもだれとでもコミュニケーションがとれる気がする」などの感想があり、企業研修としても活用いただいております。チケットがあっという間になくなってしまうので、興味のある方はぜひお早めにどうぞ！

詳しくは、ダイアログ・イン・サイレンス公式HPをご覧ください。

質問への回答

Q1. 音楽やカラオケはどのように楽しむのですか？

聴覚障害者でも音楽が好きな人、関心を示さない人など様々ですが、楽しみ方は人それぞれです。

音楽は、ヘッドホンや車の中で最大音量にして音楽を楽しむ人から、手話歌や、手話パフォーマー、ダンサーなどもおり、ろう者の太鼓グループなども各地にあります。楽しむ手段も多様で、音を振動に変えるデバイスは、ヘアピン型、ボール型、クッション型、ジャケット型、手に握るタイプなどもあります。

カラオケの楽しみ方は、歌詞が表示され色が変わることから歌うタイミングが分かりやすいですよね。ガッツリ歌う人から、手話で歌う人、手話で表現する人など様々です。聞こえない人同士の場合は、音程やリズムなど関係なく超音痴でも堂々と歌えたりします（笑）

私個人としては、音楽は大好きで昔の歌（昭和の…）なら今でも覚えています。

ライブは、歌っている人の表情、声を出すときの呼吸や動き、そして空気を伝わる響き、お客さんの拍手など臨場感を感じられるので、来日公演なども良く行きます。そしてその時には、必ず前の席を確保するようにします。見えることが大事なんです！

Q2. 手話は世界共通ですか？

よく聞かれる質問です。

手話は言語です。音声言語に英語やフランス語、中国語などがあるのと同様に、手話もちがいます。同じ英語圏でも、アメリカ手話とイギリス手話では大きな違いがあります。

また、国内でも方言があるのと同様に、手話も地域による違いがあります。国際会議や多様な国の聞こえない人が集まる場では「国際手話」が使われます。

手話は、国の文化や歴史を反映した表現も多くあり、例えば「食べる」という表現でもアメリカではパンを食べる表現、日本ではお箸をもって食べる表現など視覚的にイメージしやすい豊かな表現力を持った言語なのです。

Q3. 日本語と手話は違うの？

手話は音声日本語とは異なる独自の文法をもった言語です。

Q4. Web動画に字幕があると視聴率があがる、最後まで見てもらえる根拠は？

Q5. ジェスチャー交じりで話す人のジェスチャーはノイズにならない？

面白い質問ですね！

程度や人にもよりますが、ジェスチャーと手話は別物なので、特に気にならないのではと思います。意味もなく手を動かすことはあまりないと思うので、ジェスチャーがあったほうが会話の助けになることも多くあります。

Q6. 美容で気を付けていることは？

笑うこと、睡眠時間の確保、毎日甘くない甘酒を作って飲むこと。

ダウンロード

辻ちゃん・ウエちゃんのアクセシブル GO GO!!
「スクリーンリーダーで『Backlog』を使ってみる」の巻」
辻 勝利（コンセント）、植木 真（インフォアクシア）

辻 勝利（コンセント）

先日はお忙しい中、Webアクセシビリティの学校特別授業にご参加いただき、本当にありがとうございました。 これを機に、皆様と様々な分野のアクセシビリティを高めていけることを願っております。

僕たちのセッションでは、スクリーン・リーダーを使ってBacklogを操作している様子をご覧いただきましたが、もしかしたらこれをきっかけに、ご自身でもスクリーン・リーダーを触ってみようと感じてくださった方もいらっしゃるかもしれません。

このフォローアップでは、そんな方のお役に立てるよう、スクリーン・リーダーと便利な関連リンクをご紹介したいと思います。 是非アクセスしてみてください。

NVDA

無償でオープンソースのスクリーン・リーダーで、今回デモで使用いたしました。

VoiceOver

Mac OSやiOSに標準搭載されているスクリーン・リーダーです。

植木 真（インフォアクシア）

「辻ちゃん・ウエちゃんのアクセシビリティPodcast」をご存知ですか？

実は、2007年9月～2011年5月まで、辻ちゃん・ウエちゃんは、ポッドキャストをやっていたのでした。その迷コンビが復活してのセッション、アンケートを拝見すると、皆さんに楽しんでいただけたようで嬉しく思っています。

「アクセシビリティ」というと、必ず話題に上がるのがスクリーンリーダー。そして、最も難易度が高いのも、スクリーンリーダーのアクセシビリティ確保ではないかと思います。

でも、必要以上に身構えることはありません。今回「Backlog」を事例として紹介した基本の「キ」を実践してみるだけで、辻ちゃんにとってもより快適に利用できるコンテンツに「高める」ことができます。

スクリーンリーダーの読み上げを初めて聞いたという方もいらっしゃいましたが、辻ちゃんが紹介しているリンクなどを参考に、まずは体験してみてください。Windowsユーザーの方には、「NVDA日本語版　操作ガイド」に沿って試してみることをオススメします。

質問と回答

Q1.ページ遷移するものが、aではなくbuttonだったり、ハンバーガーメニューのような開閉イベントを処理するものがbuttonではなくaだったり、この辺のHTML要素の使い方はあまり気にしなくて大丈夫なのでしょうか？

情報を設計するときにアプリ内でこういうパーツはボタンで、こんなパーツはリンクで、みたいにきちんと一貫性を持たせてもらえれば良いのではないかと思います。スクリーンリーダーの「NVDA」の場合、ボタンはB、リンクはKで拾い読みすることができるのですが、例えば、全てボタンだけで作られていたとしたら、もしかしたらユーザーとしては押したいボタンを探すのが少し大変かもしれません。とはいえ、サイト内やアプリ内で操作に一貫性があることがもっともありがたいこと、のような気がします。

Q2. aとbuttonの違い、使い分けがだんだん分からなくなってきました...。どのように分けるべきですか？

ページ遷移するものはリンク（a要素）、何かの機能を実行するものはボタン（button要素）にしたほうがよいと考えます。例えば、ユーザーがブラウザの新しいタブやウィンドウで開けるなら、それはリンク（a要素）だと考えればよいという考え方もあるようです。

Q3. フォームで氏名を入力する場面で、「氏名：姓［ ］名［　　］」のような場合、labelは姓と名だけにつければいいでしょうか？

「姓」と「名」をlabel要素でマークアップするのに加えて、全体をfieldset要素で囲んで、「氏名」をlegend要素でマークアップすることで、全体をグループ化できます。

Q4. 色を反転していた理由は、見づらいからだったのでしょうか？

スライドの色を反転していた理由は、その通りです。白の背景に黒文字よりも、黒などの濃い背景に白文字のほうが、見えやすく目に負担をかけないといわれています。海外のアクセシビリティのカンファレンスでは、スライドの背景を黒にすることが推奨されていることもあります。

また、ロービジョンなどの視覚障害がある人は、PCの画面を白黒反転していることがあります。伊原さんのセッションでも紹介されていた動画を最初からご覧いただくと参考になるかもしれません。

Q5. 辻さんはセッションの内容を覚えて喋っていたのでしょうか？　点字メモ等があるのか？

点字ディスプレイを演台の上に置いて、点字を指でなぞりながら、スライドの内容にあわせてお話をしていました。ディスプレイはBluetoothで演題下に置いたPCと接続されており、話している間にもTwitterでメンションされた内容も表示されておりました。ちなみに、辻ちゃんが使用しているのは、Focus 40 Blue V 点字ディスプレイという点字ディスプレイです。もちろん、ウエちゃんと入念な打合せとリハーサルを繰り返して、本番に臨みました。

Q6. CSS無効化はどれぐらい使うものなのでしょう？

普段はほとんど使うことはないのですが、想定している操作が行えなくて困ったときなど、ふと思い出してCSSを無効化して試すことがあります。ただ、画面上から隠してあるものまで（エラーメッセージとか）読み上げてしまうので使いづらいことも多いのですが…。

ダウンロード

『代替テキスト決定ツリー』の使い方
澤田 望（SAWADA STANDARD DESIGN）

セッション4「『代替テキスト決定ツリー』の使い方」を担当いたしました澤田です。
岡山の中年講師の話を最後まで聞いていただきまして、本当にありがとうございました！

アンケートでもたくさんの質問を寄せていただきましたが、参加者の皆さんが自分事として真剣に考えていただけた結果かなと、たいへん嬉しく受け取っています。
次回フォローアップにて、すべて回答いたしますので、少々お待ちください。

画像に対する代替テキストは、さまざまなアクセシビリティ向上施策の中でももっとも基本の「キ」でありながら、実に奥が深い（難しいという意味ではなく、様々な解釈や手段のある）トピックです。
そういう意味では、代替テキストに対する考え方にも多様性があることを感じていただけたのではないかと思います。

勉強会「リーダブルな夜」では、セッションやハンズオン終了後に参加者の感想や意見を伺う時間を設けて、なるべく登壇者からの一方通行にならないよう、お互いに知識を深められるように努めています。
今回はそれがSNSであったり、懇親会であったり、別の形でしたが様々なご意見を伺えたことは素直に嬉しかったです。

当方自身は普段、一般企業／公共系サイト等のアクセシビリティ検証作業を担当することが多いのですが、いまだに代替テキストに関する問題は多く、なかなか減らない印象を持っています。
「誰が考えるべきなのか」「本来の担当者に考えてもらうためには、組織や仕組みなど何をどう変えればいいのか」を含めて、皆さんが代替テキストと向き合い、現状より少しでも改善されることを願っております。
その際に「代替テキスト決定ツリー」がお役に立てれば本望です。

勉強会「リーダブルな夜」
URL：https://readable-na.world/

次回は7月8日（月）19:30からの予定です。
詳細が決まりましたらSNSでご案内いたします。
もし岡山にいらっしゃる予定のある方、興味がございましたら是非ご参加ください！

「情報過多なのでは」というご意見について

参加者の皆さん、本当に多くの疑問質問をいただきましてありがとうございました。「情報過多なのでは」と疑問を感じられた方から、次のようなコメントをいただきました。

私の見解は以下の通りです。

まず、小説であれば純粋に文字から想像して楽しむための文学作品ですので、著者が望まない写真や挿絵はそもそもコンテンツとして入れるべきではないだろうと考えます。しかし、著者が納得の上でコンテンツに入れられている写真や挿絵であれば、それは何らかの効果を狙った（もしくは説明が必要だと判断した）画像だと考えられますので、その画像の内容を代替テキストに書くべきだと考えております。ただし、どこまで著者が関与したコンテンツなのかという情報は、実装担当者まで届かないケースも多いでしょうから、そのような状況で実装担当者が自らの判断で代替テキストを創作することは危険だと思います。そのような場合は代替テキストを空にするという判断もあり得るでしょう。

当方は検証する側の立場が多いですので、「代替テキストの内容が足りないのでは」「代替テキストの内容が不適切なのでは」といった指摘をすることがあります。しかし、コンテンツのオーナーや原稿制作者から「そのままで問題ない」と判断されるケースは少なくありません。セッション後半でお話ししたように「適切さ」についてはコンテンツ／原稿制作者側ではないと意図を汲んだ判断ができません。現状では実装担当者が判断しなければならない案件や体制が多いと思いますので、コンテンツ／原稿制作者側に代替テキストも考えてもらえる運用体制づくりの必要性を感じています。

今回、当方がカモメの写真を例にしたページで「小説の挿絵なら？」というタイトルをつけたことは、皆さんに疑問を抱かせる結果となってしまいましたので、説明する題材のタイトルとして良くなかったと反省しております。また、文学作品的ニュアンスのないコンテンツを例にすれば、皆さんがもっと理解しやすい題材になったかもしれません。

また、次のようなコメントもいただきました。

「情報過多かどうか」の判断について、当方は「画像の中から視覚的に読み取れる情報かどうか」「付随的な情報（写真に映り込んだ意味のない看板の文字など）ではないか」の二つを軸に判断をしています。「多い／少ない」ではなく「足りているか／足りていないか」での判断です。

例えば、非常に多くの代替テキストを設定した画像に対して、スクリーンリーダーの利用者は「長くて理解しにくい」という感想を抱くかもしれませんが、ビジュアルブラウザーの利用者も同じ画像から同じ（もしくは近い）情報量を得ているはずです。ただ、一次元的な音声に比べて二次元的な視覚情報の方が全体像を把握しやすいため、重要な事項を認知（取捨選択）するための負荷が少なくて済む（ので苦にならない）のではないかと考えています。代替テキスト全体の情報量は多いまま変わらなくとも、個々の文を短く切ることで音声の認知負荷を下げることはできますので、なるべく長文は避けると良いと考えます。

「リーダブルな夜のテーマ」の例については、たしかに「不安げに」の部分はあの画像からは読み取れませんでしたので、おっしゃる通り情報過多でした。申し訳ございません。

さらに、このようなコメントもいただきました。

（※「ph」の部分が読み解けませんでしたので、「ph」のまま表記しています）
あのユリカモメの写真は当方が撮影したものですが、撮影した際には大きさの違う複数の個体を確認していました。その中からオスだと判断した写真を今回使用しましたが、あの写真の中だけでは確かに比較対象がないためオスだと見分けることは難しいですね。その前提がない状態で考えると、たしかに、おっしゃる通り情報過多といえるかもしれません。

その他のご質問／ご意見と回答

実例では本文と画像の例でしたが、実際には本文、画像、その画像のキャプションで構成される原稿が多いです。こういった場合でのaltに迷うことが多いです。具体的な指針はありますか？

「画像＋キャプション＋本文」も「画像＋本文」と考え方は同じで、「意味がある画像なのかどうか」「隣接するテキスト（この場合は本文＋キャプション）で説明されていない内容がないかどうか」を判断します。
代替テキストとキャプションと、どちらを充実させるかという判断になった場合は、キャプションの方を充実させましょう。見えるテキスト情報の方が、より多くの利用者に恩恵がありますので。

上流の方々に響きやすいaltを設定する意味としては何になりますか？

当方がお話ししたのは、「代替テキストの内容が適切なのかどうか、を判断できるのは上流の担当者であることが多い」という内容でした。ですので、「上流の担当者に納得してもらいやすい代替テキストを書きましょう」という意味ではありませんでした。当方の言葉が聞き取りづらかったり、スライドが理解しにくかったかもしれません。その点はお詫びいたします。

なかなか大規模サイトだと全部は難しいなとは思った。／「適切さを判断できる人」に挙げられた職域の人にどう対応してもらうか、について課題だと考えています。

（※2名の方からの質問をまとめさせていただきます）

大規模サイトの隅々まで徹底させることは、代替テキストに限らず難しいことですよね。言葉による啓蒙だけでは難しい壁があります。当方の過去の経験では、ガイドラインの整備と並行して原稿のフォーマットを作成し、代替テキスト入力欄を設けるなどし、原稿制作者に入力してもらう仕組み作りを進めていました。とはいえ、一方的に押し付けるのではなく「ここはこんな感じの説明を入れるといいですよ」的なフォローは必要ですし、原稿制作者側とコミュニケーションしながら進めることが重要ですね。

デザイナーが代替テキストを指定する必要はありますでしょうか？

コンテンツに使用されている写真／グラフ／図などは、上流の担当者ではないと判断ができないものが多いですが、ナビゲーションエリアにおけるアイコンや商品画像など、デザイナーでも判断できる画像はあります。
特にサイト全体で使用される共通画像については、実装担当者と調整しておく必要があると思います。

誰が代替テキストを書くことになるのかの話がもう少し詳しくお聞きしたかったです。

今回は「代替テキスト決定ツリーの使い方」がテーマのセッションでしたので、誰が担当するのかというテーマについてはあまり時間が割けませんでした。ただ、決定ツリーを使って様々な判断基準を知っていただいても「実際の業務では自分たちの負荷が増えるだけ」と捉えられないよう、担当の件についても少しだけ触れました。より理想的な制作フローに改善できるよう、少しでもヒントになっていれば幸いです。

辻ちゃん植ちゃんの時間にもでてきたが「アーリエリア？ウェルアリア」と聞こえた単語は何ですか？

聞き取りづらかったようで申し訳ございません。「WAI-ARIA（ウェイ・アリア）」という、アクセシブルなリンチ・インターネット・アプリケーションを制作するための（属性を追加する）仕様になります。

組織図のaltは「組織図」にしていました。さっそく見直します。

実際のコンテンツの構成を見ないと判断は難しいです。組織図を描いた画像とは別に、組織の内容がリストなどテキスト情報として十分に実装されているような場合でしたら、「組織図」で問題ない可能性もございます。ただし厳密には組織図の制作者ではないと「テキスト情報として十分」かどうかの判断はできませんので確認は必要です。もしテキストで説明しきれていない部分がある場合は、補足していただけたらと思います。

idで紐づける方法で読み上げた場合、内容が被ったりしないのでしょうか？

読み上げ時の操作方法と、スクリーンリーダーの仕様によって違いはありますが、Mac版VoiceOverなどは一つ一つのオブジェクトを指定して読む場合、aria-describedby属性に関係付けられた対象を読み上げますが、ページ全体を自動で読む場合はaria-describedby属性に関係付けられた対象を読み上げません。ですので、関係付けられてはいますが、読み上げ時に重複しているという印象は受けにくいのではないかと感じています。

「イラスト：◯◯」の「：」コロンですが、つけたほうがよいでしょうか。読み上げた時うざったいのかなと思って... 半角スペースにしてもよいものでしょうか。

うざったいかどうかの判断はできませんが... 当方は「：」の後に続く文面の中で半角スペースを使う可能性が高いと感じており、区別がつきにくいため、「：」を使うことが多いです。また、スクリーンリーダーによっては「：」などの記号を読み上げないものもありますので完璧ではないです。

アクセシビリティ的にはnullとすべき場合に、SEO的要請からはどのように対応すべきでしょうか？当該画像に特段の意味がなければ問題ないでしょうか？

意味のない装飾画像に代替テキストは設定すべきではありません。力強く空（""）にいたしましょう。

スライダーのimgが複数枚ある場合、altには何を入れますか？

（キービジュアルエリアなどのカルーセル表示する）スライダーには、複数のimg要素を使用することが多いのではないかと思いますので、それぞれのimg要素にそれぞれの代替テキストを設定します。最新の制作事情をキャッチアップできていませんので、時流に乗っていない回答でしたら申し訳ございません。もし、1つのimg要素の内容を動的に書き換えて画像を切り替えるような仕組みの場合は、alt属性値も画像に合わせて切り替える必要があります。

レスポンシブデザインでPC用スマホ用で同じ意味を持つ画像をそれぞれ別の画像で表示する場合、altはどのようにいれれば良いでしょう？（片方は空にしていたのですが、iPhoneのVoiceOverでは表示されるスマホ用しか読み上げないらしく）

回答になっているかどうか自信がありませんが、レスポンシブWebデザインで表示する画像を切り替えるのでしたら、img要素+alt属性値を複数用意するのではなく、srcset属性+sizes属性などを利用して画像を切り分ける方法ですと、alt属性値は一つで済みますのでシンプルで良いのではないかと感じています。

今回のスライドのような実際の良い例をたくさん見れるところがあれば教えてください。

業務で関わりのある企業サイトを直接ご紹介することはできませんので、なかなか難しいのですが、米国内の空港に乗り入れる日本の航空会社（米国航空アクセス法の対象）のサイトは充実している印象を持っています。

代替テキストの適・不適を判断してくれるソフトとかないでしょうか？

残念ながら「内容が適切かどうか」を判断してくれるソフトウェアは存じ上げません。自動ではありませんが、 Web Developer などの機能拡張を使って画像と代替テキストを並べて表示することができますので、「内容が適切かどうか」の判断がし易くなると思います。また、 A11yc のような、画像と代替テキストの一覧表を作成してくれるツールは効率的にチェックができて便利です。

ダウンロード

サイボウズの組織的な取り組みとビジュアルデザイン
小林 大輔、樋田 勇也（サイボウズ）

コメント

ご参加頂いたみなさま、本当にありがとうございました。登壇者の小林です。アクセシビリティをいかにチームで取り組んでいくか、私自身も試行錯誤の日々です。
発表した内容がそのまますべての組織に当てはまるとは限らないかもしれません。それでも、理想を大切にするマインドや、みんなを巻き込むプロセスの考え方は、きっと多くの組織で必要になると思います。
参考になることが一つでもあれば嬉しいです。

同じく登壇者の樋田です。当日は多くの方に、都心だけでなく全国からお集まりいただき大変感謝しております。アンケートを全て拝見させていただきました。アクセシビリティが特別な対応ではなく普段のデザインの延長にあることをお伝えたしたのですが、それがちゃんと伝わっていることが感じられてとても嬉しいです。
懇親会でも話題になりましたが、どうかアクセシビリティ 対応は「できる/できない」という考え方をしないでほしいなと思います。ハードルを感じた時は「実はすでに出来ていること」を探してみるのもオススメです。

質問と回答

小林/樋田それぞれにいくつかご質問をいただいているので下記で回答いたします。

ガイドラインはどんな内容ですか？実際に見てみたいです

（小林）現在、kintone チームにはデザインガイドラインと実装ガイドラインがありますが、
例えば実装ガイドラインの場合だと、以下の項目があります。それぞれに数行の説明があるという構成です。今回の「アクセシビリティ確保の基本のキ 10 項目」に近い内容になっています。

発表でもお伝えしましたが、ガイドラインそのものではなく、ガイドラインをもとにチームを支援したり、議論していくことがとても重要だと感じています。

ガイドラインで困ったことはありますか？

（小林）ガイドラインを作成すること自体はそこまで難しく感じたことはなかったです。
どちらかというと、ガイドラインから外れた実装等が見つかったとき、どんな風に交渉して修正してもらうかが難しかったです。
後から指摘するのは辛い交渉になりがちですし、修正できないことも多いので、できるだけ早いタイミングで一緒に相談しながら実装する、といった対応がおすすめです。

アクセシビリティ検証会にはデザイナーやディレクターは参加しましたか？どう巻き込んだらよいか、コツがあればききたいです。

（小林）サイボウズの場合、週 1 の検証会にはディレクターは参加していませんが、デザイナーは積極的に参加しています。
ディレクターを巻き込めた事例もいくつかあります：

社外の講師や社外の当事者の方が話すと、説得力が強まりますし
普段、勉強会等に参加しないメンバーにも参加してもらえたりしました。

ユーザのことを考えると、時間がかかったりコストがかさんだり･･･な印象があります。決定権のある人との交渉はどのように行なっていますか？

（小林）まずはコストをかけずにできるところからやってみてはどうでしょう。例えば HTML は、ほとんど工数に変化を与えずに、アクセシブルにすることができる場合があります。

コストがかかる場合は難しいですね。サイボウズでも試行錯誤していますし、うまくいかないことも少なからずありますが、例えば、決定権のある人にユーザビリティテストに参加してもらい、その直後に問題をまとめて、優先度の交渉をして、改善したことがあります。問題を体感してもらった直後に交渉をしていくのがいいと思っています。

業務が多くて、なかなかアクセシビリティの話をチームに共有できません。どうしたらよいですか？

（小林）今回紹介した、社内のグループウェアでの共有は、最初の活動として比較的やりやすいと思います。今回の CSSNite の感想や、アクセシビリティのニュースなどを、少しずつ共有してみてはどうでしょう。

輪講形式の勉強会は、最初の 1 回目～ 2 回目くらいは発案者が発表をする必要がありましたが、そのあとは、担当者を決めて持ち回りで発表していくことにしたので、忙しくても継続することができました。

アプリという言葉はアプリケーションをイメージしてややこしいと思ったのですが、そのような意見は出なかったのでしょうか？

（樋田）デスクトップ版、モバイル版に限らず、議論になるところです。今回は kintone において「アプリ」という言葉がすでにプロダクト内外問わず広く使われており、変えてしまうことの方の混乱が大きいだろうということでそのままになっています。

やわらかいデザイン、やさしい感じのデザインなどを求められたとき、コントラスト比の確保が難しいように思うことがあるのですが、難しくないですか、そんなことありませんか。どう対応されてますか。

（樋田）同じ疑問を持っているデザイナーの方も多いと思います。確かに難しいように感じてしまいますよね。
WCAG や JIS のコントラスト基準は「あらゆる要素」に対してコントラスト比をつけるよう求めているわけではないので、やわらかいテイストのデザインの中でもコントラスト比を確保することは可能だと思います（例えばロゴはコントラスト比を確保する必要がないです）
デザインの中で「すべての人に伝えなければいけない情報」が何かを整理した上で、柔らかい雰囲気を出すための要素と、ちゃんと情報を伝えなければいけない要素を分けてみることをオススメします。分けることが難しい場合は、代替の要素を置いてみるなど工夫をしてみてください（ヘッダーイメージ上のテキストはコントラストを確保できないけど、その下のテキストを読むことで理解できるようにする、など）。

ダウンロード

【クロージング・トーク】インクルーシブネスを超えて
木達 一仁（ミツエーリンクス）

コメント

クロージング・トーク「インクルーシブネスを超えて」を担当しました木達です。

CSS Niteでの登壇は今回が通算で5回目、昨年9月に開催されたLP58「Coder’s High 2018」以来だったのですが、終始、早口かつ声が上ずり気味で、聞き取りにくいところが多々あったと思います（アンケートでもご指摘をいただきました）。まずはその点をお詫びいたします、申し訳ありませんでした。

講演内容につきましては、他の登壇者の皆さんがお話しされた内容にほんの少しずつ触れながらも、締めのセッションとして私が特に強調したかったのは以下の2点です：

特に2点目については、「小さく産んで大きく育てる」という言葉を用いてお願いをしました。ともすると、いきなりWCAGやらJIS X 8341-3やら、小難しいガイドラインを読み始めがちなのですが、当日の配布資料にあった植木校長の「基本のキ」から小さく始めていただければと思いますし、澤田さんが解説された「ちゃんと画像の代替テキストをつける」、最初はそれだけでも十分かと思います。

ただし、一度始めた取り組みは、途中でやめたり縮小させないでいただきたいと思います。そうしていただくことで、確実にWebはよりアクセシブルなメディア/プラットフォームへ進化し続けるでしょうし、それが回り回って社会全体に、あるいは異なるニーズをもつ私たち一人一人にきっと良い影響をもたらすと、私は信じます。

アンケートにご記入いただいた感想はすべて、拝読させていただきました。「勇気づけられました」「心が軽くなりました」「小さく始めていこうと思います」「モチベーションが上がりました」「もっとやる気が出ました」など、大変ありがたい感想もあって、嬉しく思います。またいずれ、ご縁がありましたらCSS Niteの場でお目にかかりたいと思います。改めて参加された皆様、そして鷹野さん・植木さんはじめ運営側で尽力くださった皆様に、感謝申し上げます。ありがとうございました。

質問と回答

品質の先に何があるんですか！

哲学的な問いをありがとうございます。深いですね……脊髄反射的には「幸福」という言葉が思い浮かんだのですけど、自分もその答えが知りたくて、さまざまな品質向上の旗振り役を担ってきた気がします。あくまで一意見として、ご納得いただければ幸いです。

Tシャツ欲しいです

本当（本気）ですか？ありがとうございます！！実は、私が着ていた「アクセシビリティ チョットワカル」とプリントされたTシャツは、SUZURIというサービスで作ったもので、同じものをどなたでもご購入いただけます。ちなみに何枚お買い求めいただいても、私に儲けなどは発生しませんので、ご安心ください。

アクセシビリティっていう呼び名、アクセシブルじゃなくないですか？日本語で適切な呼び名あると思いますか？

逆に気になったのは、なぜ「アクセシビリティ」という呼び名がアクセシブルではないとお感じになったか、です。発話しにくいでしょうか、それとも意味が類推しにくいとお考えだからでしょうか。私自身は、もう何年もこの言葉と向かい合ってきたせいで麻痺してしまったのか、特にアクセシブルでないと感じたことはありません。そのいっぽうで、障害者対応や高齢者対応という色がついてしまっている印象から、別の言葉に置き換えられないか……などと考えたことはあります。

あらゆる製品やサービスの基本要件、基本品質としてアクセシビリティの認知が進めば、いずれ「アクセシビリティ」という言葉を使わなくてもよくなるかもしれません。

「アクセシビリティおじさん」自称するのは良いですが「1社に1人」のように役割として呼称するのは疎外感があります。年齢や性別で固定されるものではないはずなので

おっしゃる通りだと思いますし、自分が言葉足らずで失礼しました。年齢や性別関係なく、アクセシビリティ向上の旗振り役という意味合いで「アクセシビリティおじさん」という言葉を捉え直していただければ、ありがたく思います。言い直させていただけるなら、私が申し上げたかったのは、「1社に1人」くらいにまで旗振り役の数が増え、自分がその中に埋没してもむしろそれで本望、ということです。

インクルーシブとユニバーサルは同じものと捉えてよろしいのでしょうか？

異なる言葉である以上、辞書的かつ厳密には同じ意味ではないわけですけど、Webデザインという文脈において実務上は同じものと捉えていただいて支障はないと思います。ユニバーサルデザインとは何か、については障害者の権利に関する条約の「第二条　定義」に、以下のようにあります。

「ユニバーサルデザイン」とは、調整又は特別な設計を必要とすることなく、最大限可能な範囲で全ての人が使用することのできる製品、環境、計画及びサービスの設計をいう。

まさにその、「最大限可能な範囲で全ての人が使用することのできる」ようにするためのアプローチとして、より上流の工程から多様なユーザーを想定し、あるいは実際に多様なユーザーと一緒になって（巻き込んで）デザインに取り組む手法が、近年呼ばれているところの「インクルーシブデザイン」と自分は理解しています。

ダウンロード

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る