音声書き起こし
1. オープニング
@Pittan
こんにちは、Pittanです。
ユーザーインターフェースとテクノロジーを愛する開発者のための、ウィークリポッドキャスト「UIT INSIDE」今週も始めていきたいと思います。
今回は、7月1日に開催された UIT Meetup vol.16 のアフターショーという形でお送りします。
UIT Meetup のアーカイブは、ショーノートに URL を貼っておきますので、このアフターショーと合わせて、お楽しみいただければと思います。。
@Pittan
というわけで、本日のゲストは、UIT Meetup の本編でご登場いただいた皆さんです。皆様、本日はよろしくお願いいたします！
@hiroya_UGA
よろしくお願いします。
2. 自己紹介
@Pittan
まずは、皆様、自己紹介をお願いします。
ミートアップの本編をまだご覧になっていない方もいるかと思うので、簡単な自己紹介と、ご自身のセッションで、どういうことを話したかも合わせてご紹介お願いします。
それでは、登壇順でやっていきたいと思います。まずは、@kubosho_さんからお願いします。
@kubosho_
はい、Kuboshoと申します。 現在、CyberAgentというところで、ABEMAのウェブフロントエンドエンジニア兼、CyberAgentのNext Expertsのアクセシビリティ分野、あとWebアクセシビリティ基盤委員会（WAIC）の作業部会2（実装）の委員をやっております。
@kubosho_
仕事としてはABEMAのウェブフロントエンドエンジニアとして機能開発だったり、ウェブパフォーマンスや、ウェブアクセシビリティの向上に携わったりしています。
アクセシビリティエキスパートの活動を通じて、社内だったり社外へアクセシビリティ向上の旗振り役として活動しています。セッション内容としましては、「個人からチームに広げるセシビリティ向上の輪」という形で個人からチームに
@kubosho_
アクセシビリティ向上をどうやって広げていくかっていうことを話しました。よろしくお願いします。
@Pittan
じゃあ、続いてはTomitaさんお願いします
@a_t
はい、 Tomitaです。LINE社のフロントエンド開発センターUIT室に所属しています。UITの中で、アクセシビリティTFというものを立ち上げて、アクセシビリティのガイドラインを作ったり、 社内への啓蒙活動などを行っています。お願いします。
@a_t
自分のセッションでは、「UITにおけるアクセシビリティの取り組み」ということで、今までどんなことをしてきたのか、っていうようなところをまとめて説明させていただきました、 お願いします。
@Pittan
お願いします！では、最後Ugaさんお願いします
@hiroya_UGA
はい、Uga Hiroyaと申します。web制作受託から始まって、現在はLINE Growth Technology株式会社でフロントエトエンジニアをやっています。
現在は、出前館というサービスのコンシューマー向け画面の開発とか、アクセシビリティの向上を対応しています。
私のセッションでは、 アクセシビリティを初めてやっていくよという方や、アクセシビリティビギナーの方に、トレーナーの立場の方が、どうやってレクチャーしていけばいいかという話をさせていただきました、よろしくお願いします。
@Pittan
お願いします。というわけで、改めまして、皆様よろしくお願いいたします！
@a_t
よろしくお願いします。
3. ミートアップを振り返って
@Pittan
というわけで、登壇から1週間とちょっとが経ちましたけれども、なんか皆さんの周りで反響とかどうでした？いかがでしたか？
@a_t
えっと、大きな反響という感じではないんですが、引き続き、社内にアクセシビリティの啓蒙などを続けていっているような感じになっています。
@Pittan
うん、うん、うん
結構社内でもいっぱい見てくれた方が多くて、いい機会になったなと、社内の人間としてもすごい思います。
@a_t
何より1番インパクトがあったのは、Ugaさんの喋りがとにかく達者だったので、
@hiroya_UGA
ありがとうございます。
@a_t
もう、あのリハーサルとか全く聞いていなかったので、あの、非常に本編でびっくりしたという
@hiroya_UGA
リハーサルのタイミングで、資料出来上がってなかったですからね。直前にやっと完成だったんで、 とにかくなんかあの、前職でもない人達からすごい、Facebookとか、LINEとかで、あの、面白かったっていうコメントをいただけたので、僕としては結構満足だったなと思います。
@Pittan
すごいよかった、いろんな人に見ていただけて、すごい嬉しいですね。
@kubosho_
直前に資料ができて、あの話術ができるのはなかなかすごいですね。
@hiroya_UGA
いや、先に台本だけ頭の中でイメージして作るんですけど、それをどうやって表現するかというところに1番時間がかかってるから、そういう組み立てになるんですよね。話すことだけはもう決まってるんですよ。
@a_t
元々、ああいうYouTuber的な、喋ることやられてた感じだった？
@hiroya_UGA
大学の時の専攻がメディア学っていうもので、何を伝えるにも、その表現技法って重要だよね、みたいな話があって、プレゼンテーションをする時にも、どうやったら、相手が理解しやすいかっていうところから、僕の解釈だと、相手が楽しくなければ、伝わってないっていう理論があって。
@hiroya_UGA
楽しませる発表っていうのを、昔からずっとやってきた結果、あの形になったっていう感じですね。
@a_t
なるほどですね。
@Pittan
スタイルが確立されてるんですね。
@hiroya_UGA
そうですね、割と僕の周りはああいう、あの、聞いてる側をどうにかして笑わせてやろうみたいな、そういう気持ちを持ってる人が多い学生時代だったので、そういうのも理由としてあるのかなと思います。
@a_t
でも、今回みたいな形式だと、相手のリアクションが見れないので、やっていて、こう、不安になってしまいますよね。
@hiroya_UGA
そうですよね、確かに。それはあの、なんていうんですかね。もう信じるというか、 信じるしかない。まず、最初に僕始める前に「コメントたくさんくれると嬉しいです」って言ったのは、あれは不安から来る一言で、リアクションがないと、ちょっと寂しいなと思ってはいるんですけど、 なんか普段よく、あのVTuberさんとか、YouTuberさんとかが、動画いっぱい出してるのをすごく見てるんですね。で、そういうのを見てると、やっぱりリアクションがない中で頑張ってる姿っていうのを目の当たりにしてるので、
@hiroya_UGA
まあ、同じ気持ちで頑張っている人たちを見てるから、同じように頑張らなきゃなっていう気持ちで喋るみたいな。
それで、不安を払拭するみたいな喋り方をしてます、メンタル的には。
@a_t
このメンタルはなかなか、本当に今後Meetupやる方の参考になる話な気がします。
4. 1つめのセッション(個人からチームに広げるアクセシビリティ向上の輪) 振り返り
@Pittan
じゃあ、そうですね、ここからなんか、各セッションの話をちょっと深堀っていきたいな、なんて思ったりするんですけど。 じゃあ、まず1個目のセッション、@kubosho_さんの「個人からチームに広げるアクセシビリティ向上の輪」っていうセッションがあって、結構話聞いてる中で、会社のビジョンと結びつけるみたいなところは、なんかすごいあの上の人を納得させやすいなっていうのを、「すごいわかるな、そうだよな」っていう風に
@Pittan
思ってて、興味深く聞かせていただきました。あれって、上の人に話を通す時ってもう「オッケーです、行きましょう」っていう感じだったのか、それともまだもう少しなんかモヤモヤあったのかってなんかちょっと気になってて
@kubosho_
うーん。それで言うとまだモヤモヤはあるかなというのはあって、というのも、まだそのアクセシビリティの重要性をこう社内に十分に広げられたとはまだ言えなくて、 ただこうなんでしょうね。アクセシビリティの重要性を広げるためのツールとして。
@kubosho_
そうですね。ビジョンだったり、ミッションだったりをこうちょっと利用してるじゃないですけども。利用すると、その上の人たちにも伝わりやすい。なんでしょう、より、自分ごと化しやすいんじゃないかっていうのはあります。ただ、ちょっとまだ完全に広げられてはいないんで、ちょっと果たして、これが正しかったのかはまだわかんないんですよね。
@Pittan
ああ、チームから社にはまだ広がってない？
でも、チームごとのミッションとかもなんかあるじゃないですか、プロダクトごとにも、なんか多分違う話があるかなと思ってて、なんかそうですね、そういうところも絡めていくと、すごいあの、僕はなんかすごい共感できたというか。1番なんかね、あの、言いやすいよねっていうところはあったので、はい、もうなんかいろんなプロダクトでこれやっていきたいなと思っています。
@kubosho_
そうですね。まあ、あのビジョンとかミッションって大体その上の人たちもその策定に関わってると思うんですよね。
こういう方向性でいきたいという感じで。なんで、まあ、そういうビジョンとか、ミッションとかと紐付けた方が、その自分で考えた言葉に対してなんでしょう。こう深掘りしている感を出せるというか。自分で考えたっていうのは、自分っていうのは、上の人達っていう。上の人たちの目線から見てっていうことですけど。
@Pittan
上の人たちが考えたのに実行できてないのもあれだよねみたいな。なんかそういう気持ちにもさせさせられる、まあ圧力をかけるわけではないですけど、うん。
@a_t
なんか、やっぱり全員にこう新しい考え方というか、概念みたいなのを共有していくのって、相当ハードルが高いなっていうのを本当に感じますよね。興味のない人に興味を持ってもらうっていうところは、なんかもう永遠の課題という感じがしますね。
なんか、翻って、自分自身で考えてみれば、自分自身に全然興味のない話を
@a_t
「お前これすげえ大事なんだからやれよ」って言われても、やっぱり自分自身が興味を持ってないと、そうなかなか言われたところで、っていうところがあるんです。
そこのフックをどれだけたくさん用意して、いろんな種類の人に引っかけられるように、っていうところを やっていく必要があるんだなって聞いていて思いました。
@kubosho_
あと、興味がある分野でもなんだろう、その中でも、ちょっと興味が持てないものってあると思うんですよね。
今ぱっと思い浮かんだのは、例えば自分は、アニメとかゲームとか好きなんですけど、周りから「これ見て」って言われてもなかなかこう、動かないというか。
@hiroya_UGA
ああ、そうですね
@a_t
わかります
@kubosho_
「これやってみて」って言っても、うーんっていうのが、
@a_t
なんか人に言われると急に、みたいなのもありますよね。
@hiroya_UGA
自分で発掘するのと違いますもんね、
@kubosho_
興味はあるけど、やるまでには至らないみたいな。
@hiroya_UGA
うん、うん、うん。
@kubosho_
ただ粘り強く、その「いや、1回やってみたらわかるから」とか、なんかそういうなんでしょうね。粘り強く、何回もこう繰り返し言われると、 「そこまで言うなら」っていうので、まあ見てみたらやってみたりして面白いじゃんってなったりするんで
@hiroya_UGA
ううん
@kubosho_
粘り強くやるってのもある程度大事なのかなとは思いますね。
@hiroya_UGA
うん、うん、うん。
@a_t
あと、さっきのUgaさんの話もちょっと通じると思うんですけど、なんか我々別になんか正義感を持って、アクセシビリティをやってるっていうわけではないと思うんですよね。原動力としては、なんか面白えとかすげえとか思うからやってるみたいなとこ、やっぱあると思うんですね。
そういうなんかこう面白さみたいなところがこう、うまいこと共有できると いいんだろうなっていう気がするんですけど、なんかどうしてもそのなんか社会正義みたいなのが前面に立っちゃうと、やっぱりこううまく通じないよなっていうところはありますよね。
@a_t
1つの表現をちょっと変えるだけで、いろんな人に通じるようになるんだとかいう話を聞くと、僕自身は結構すごい面白いなと思うんですけど、それを面白いと思うかどうかはまた人それぞれだし、みたいなところもあって、 なかなかほんとに共有していくのが難しいなっていうのは感じますね。
@kubosho_
どうしても、そのアクセシビリティって割と、その法律的な面とか、その社会に対する責任面とかから語られがちですし、実際まあそういう面もあるので。 まあ、どうしても義務感というか、まあちょっと 面白くはないよねっていう目で見られがちではあるかなと思いますが、
@kubosho_
そういう面だけではないんだよっていうのも、ちょっと今後粘り強く言っていきたいですね。
@hiroya_UGA
そうですね、
5. アクセシビリティを知るタイミング
@hiroya_UGA
なんか、アクセシビリティを知るタイミングも重要なのかなって、ちょっと僕は思ってて。というのも、例えば あの技術者として活躍してる最中にReactとかを触ったことがないよ、TypeScriptやったことがないよって人たちが、 今一生懸命。そのReactとかTypeScriptを学んでる最中に、アクセシビリティが横からバンって来られると
@hiroya_UGA
「今これやってるんだよ、僕は」みたいな。そういう気持ちになるのかなと思ってて、だから、アクセシビリティを知るのは、HTMLとか、そのほんとに基本のところをやってる最中にWebに関わるコンテンツをやるなら、1番最初の根幹にあるものっていうのを、最初に教えといてあげる必要が、できるだけ早い段階で、アクセシビリティを認知させてあげるのが
@hiroya_UGA
大事なのかなと思っていて、だからこそ、なんかこういう技術イベントとかで啓蒙していくっていうのは、ビギナーさんにとって、すごく大事なことなんじゃないかなって思ってるんですよね。
@kubosho_
早い段階で学んだ方がいいのは間違いないとは思うんですが、とはいえ、その早い段階で学んで、実際 興味があるものになるかっていうと、それはわかんなくて。
@kubosho_
ある程度学んで、「あ、やっぱこれも大事だな」っていうので、まあ改めてわかるっていうのもあると思いますしね。
@hiroya_UGA
うん、
@Pittan
うん、うん、うん、うん。まずは動くものを作りたいっていう気持ちはすごいあるので
@kubosho_
まあ、ちょっとフロントエンドとか、アクセシビリティとはちょっと話がずれるかもしれないですけど。いや、自分が今イラストを学んでまして。
実際そのイラストレーションコースっていうので、大学デザイン学科の中のイラストレーションコースっていうところで、行ってるんですけども、通信制度の大学に。
@kubosho_
ま。でも、やっぱそういうところでなんでしょうね。ま、そういうところでというよりか、イラストもやっぱりそのやっぱりその 動くものが書きたいというか、なんだろう。例えば、その全身まず描いてみたいとか、
@kubosho_
可愛い、かっこいいイラスト書いてみたいっていうところから、なんかうまく書けないな、じゃあ、どうしたらいいんだよっていうので基礎というか、 例えばその美術解剖学とか学んで。構図の作り方とか色の塗り方とか、ほんとに色々分野はありますけども。
@hiroya_UGA
うん、うん、うん、うん、
@kubosho_
応用と基礎を行ったり来たりするみたいな。
@hiroya_UGA
ああ、そうですね
@kubosho_
そういうところはあるかなと思って、同じことがフロントエンドのアクセシビリティとかでも言えるのかなとは ちょっと思いました。
@hiroya_UGA
うん、うん、うん、うん
@a_t
こう。最初に大量のインプットを与えられちゃうと、やっぱりちょっとあの全部理解するのは難しいみたいなところもありますよね。いきなりこう、 最初は分かりやすいところから、やっぱりちょっとずつ始めて、ちょっと進んで、それじゃ足りないっていうか、それじゃそれだと実はダメなところがあるみたいなところから、 また応用にちょっと進んで、広めの範囲を見てみたいな。こうなんか、反復しながら進んでいくようなイメージがあるんですよね。なんか、この辺のやっぱ教え方っていうか、伝え方みたいなところも
@a_t
うん
@a_t
ポイントに1個あるのかなっていう感じはあります。
@Pittan
そうですね、せっかくHTML/JS/CSSを書いてきてくれている人がいるので、萎えさせることなく、ちゃんと
@Pittan
「うん、わかる、気持ちはわかるんだけど、div は buttonにしちゃダメなんだよね」みたいな、なんか
@hiroya_UGA
まずはbutton要素からですね。
@Pittan
そうダメだよ、ダメだよって言うんじゃなくて、なんかいい感じにして。
@hiroya_UGA
加点式ですね加点式、前回出てましたけど
@kubosho_
そうですね、自分の発表でもでてましたけども。はい、加点式で
@hiroya_UGA
もっと良くできる、もっと良くできるっていう考え方がいいですよね。
6. 2つめのセッション(UITにおけるアクセシビリティへの取り組み) 振り返り
@Pittan
じゃあ、続いてのセッションは、UITにおけるアクセシビリティの取り組みということで、富田さんに発表してもらいましたけども。UITって最近なんかそのアクセシビリティ周りで、 何かアップデートとかってありましたか。
@a_t
直近だと、今日本語しか作っていなかったガイドラインを、そのチーム内の英語ができる人にお願いして、翻訳を始めるというようなところを今段取りをつけているようなところが、新しく取り組みとしては始めています。特にLINEは比較的日本語以外の母語は英語話者の方が多いので、 それらの方々もわざわざ翻訳とかもせずに、そのまま読めるようにというところを意識して、翻訳
@a_t
を始めたというところがあります。ちなみに、Kuboshoさんのところは、英語ってどの程度意識されてますか。
@kubosho_
そこまで意識してないですね。日本語が母語でない方も、結局日本語喋る人が多くて、 社内公用語は基本日本語っていう感じなので、英語だったり、まあ、その他の言葉が使われる場面っていうのは そこまでないですね。
@a_t
LINEだと、この特に韓国側の方たちもいらっしゃって、 その人たちが見るのはどうしても、やはり日本語よりも英語の方が見やすかったりすることがあるので、
@a_t
はい、
@a_t
英語を使って、より、社内への取り組みを広げようみたいなところが今大きく動き出したところですね。
@kubosho_
なるほど。
@hiroya_UGA
大体3か国語で書いてありますよね、日本語と英語と韓国語で、なんでも書いてある。メールもそのパターンですよね。メールも大体3か国語で送られてくるから、すごいなと思ってました。
@a_t
まあ、意外とこう関わってるプロジェクトとかによっても、その雰囲気が違ったりするところはあるんですが。はい、というぐらいですかね、直近でやっている新しい取り組みは。
@Pittan
いいですね。だんだん、いろんな人に見てもらえる、広がっていくのが大事なので。
@hiroya_UGA
うん、うん、うん、うん、
@Pittan
ありがとうございます。
7. 3つめのセッション(Webアクセシビリティを身近にさせる習慣！３選) 振り返り
@Pittan
じゃあ、続いては、「Webアクセシビリティを身近にさせる習慣3選」ということで、Ugaさんに発表していただきましたけども。さっきは話しぶりがすごいですね、という話をしてましたけど、今回はちょっと内容について、もう少し掘っていきたいかなと思ってます。最初に話されてた、やっぱりHTML大事にしようねっていう話を1番最初にドンって押してたので、
@Pittan
そこのなんか気持ちを…
@hiroya_UGA
やっぱりそうですよね。あの、よく代表例になってるボタンをdivで作ってしまうっていうことって、 割となんだろう。サービス開発とか、アプリ作るよっていう人たちを中心によく見られる傾向があるなって思っていて、 で、ウェブサイトを作るよっていう人たちって、割とそのボタンをちゃんとbuttonで作るっていうのがあるんですけど、なんか、そのウェブサイトって
@hiroya_UGA
多少なりとも パパって作れば、アクセシビリティって、大体担保されるじゃないですか、でも、サービスってアクセシビリティがないと、もう完璧に使えないって状態になっちゃうから、 あの、HTMLを普段からより意識してるって、僕の中で感じてるのは、ウェブ制作をしてる人達、ホームページとか、ウェブサイトを作ってる人たちなので
@hiroya_UGA
その人たちはまあなんでしょう。誤解を招く言い方かもしれないですけど、ほっといても、勝手にアクセシビリティやると思うんですけど。
@hiroya_UGA
あの、
@hiroya_UGA
そのプログラミングとか、その、ものを作るものを作る…なんて言えばいいんですかね。そのアプリとか、サービスを作りたいって思ってる、 あの、JavaScript方面からやってきた人たちには、よりこうHTMLの重要性っていうのをたくさん訴えてあげた方が、みんな幸せになるのかなと思って、ああいうアプローチをしてる感じですね。
@Pittan
意外となんかね、
@Pittan
後手後手になっちゃうというか、なあなあになっちゃう。ありがちですよね。
@hiroya_UGA
で、多分、アクセシビリティを無視した方が、開発者的にはすぐさっくり作れるんですよね。だから、早く作れるものを、そのアクセシビリティっていうよくわからんものが後からやってきて、工数がかかるようになってしまったっていうニュアンスになるくらいだったら、最初からHTMLとかをちゃんと大事にしてもらって、 気が付いた時に、「あれ、なんかアクセシビリティって出てきたけど、今までやってきたことと変わらないな」っていう世界になればいいなって
@hiroya_UGA
思ってるんですね。
@a_t
うんうん、うん。
@hiroya_UGA
あの、アクセシビリティをどのタイミングで伝えていくか、みたいな話の時に、そのいきなり1番最初からアクセシビリティをがっつりやっても、 他のウェブテクノロジーの理解がないと、うまく飲み込めないから、タイミング難しいですよね。って話もあったんですけど、なんか、 アクセシビリティって言わずに、ボタンを作るときには、button要素を使うっていう言い方をするというか、
@hiroya_UGA
アクセシビリティの話をしてるということを気づかれないように
@hiroya_UGA
初学者の人たちになんとかこう、ウェブテクノロジーの基礎には、アクセシビリティがあるっていうのを知っていってもらえるような、 やり方が広がっていけばいいのかなって思ってるんですけど、
@kubosho_
まあ、そうですね、なんか、アクセシビリティという言葉はどうしても なんでしょう。高齢者とか、障害者向けの対応みたいな、誤った認識を持ってしまう人も いるとは考えていて。なんか、アクセシビリティという言葉を
@kubosho_
いかに使わずに、アクセシビリティを説明するかっていうのは重要そうですね。
@a_t
アクセシビリティっていう言葉自体の問題というか、なんか日本語に訳しづらさみたいなのもちょっと感じるんですよね。なんか、こう、日本語でぱっと 通じる適切な言葉がなんか思い当たらなくて、
@hiroya_UGA
大体説明すると文章になりますね、アクセシビリティって。
@kubosho_
そうですね
@a_t
って印象で考えていくと、やっぱりなんかこう 特定の障害のある人向けみたいなとこの印象がもう既に根付いてしまってるみたいなところがあるのが、またちょっと1つ難しさがありますよね。私も、他のチームへアクセシビリティの説明とかする時、1番最初に、まずは障害者
@a_t
っていう風に取られがちですけど、そうじゃなくて、皆全員に関わりのある、恩恵のあることですよ。みたいなのは、1番最初になるべく言うようにはしているんですが、なかなか難しい、浸透するのはちょっと難しそうだなっていう風に感じるところではありますね。
@hiroya_UGA
バリアフリーっていう言葉とかも、ユニバーサルデザインっていう言葉とかも結構あの 流行った時期があると思っていて、なんかそれも影響してるのかなと思うんですよね。みんな、そのアクセシビリティって言葉は、ゲームとかで聞いたことあるけど、よくわからない。でも、 そのユニバーサルデザインとか、バリアフリーという言葉は、結構小学校とかでも聞くから、身近なので。アクセシビリティの説明をしてくださいって言われたアクセシビリティを伝える側の人たちが、「いわゆるバリアフリーです」みたいな、
@hiroya_UGA
「Webの世界のバリアフリーです。」みたいな伝え方をしているのも、 第一に障害を持っている方々への配慮です。みたいなニュアンスになっちゃうのかなって、ちょっと思ってたりはするんですよね。
@hiroya_UGA
あんまり、自分の身の周りでは、そういう説明をしてるシーンって見ないんですけど、 全然関係ないところで、関係ないエンジニアの人たちが、アクセシビリティの話をしてる時に、そういう説明をしてるところをちょうど、まあでも2回ぐらいなんですけど、目の当たりにして、あ、そういう説明の仕方をするから、そういう誤解が生まれるんだなって
@hiroya_UGA
思ったことがあるだけなんですけど
@Pittan
うーん、何かおしゃれさを犠牲にして、みたいな。なんかイメージが僕はなんか昔持ってて、いわゆるそのバリアフリーとか、機能性を重視しすぎるみたいな面を、昔はイメージを持ってたけど、まあ、そのさっきHTMLをちゃんと書くって言った話に立ち戻るとそうではないだよ、みたいなのを正しくちゃんと広められるといいですよね。
@hiroya_UGA
そうですね、
8. WCAGとそれに準拠することについて
@hiroya_UGA
デザイナーさんからも、そういう声よく聞きますよね。AAでっていう用件で、ウェブサイトを作ろうとすると、大体オレンジ色が厳しいみたいな。そういう話も聞いて、シリティを頑張るのと、訴求力のあるウェブデザインをするのと、どっちが大事なんだ。みたいな風に言ってる人もいたりして、 結構頭を悩ませたことがありましたね。
@kubosho_
たしかにそうですね、ちょうど最近、そのオレンジ色のコントラスト比が難しいという話が、あのnoteの記事で上がってましたね。
@hiroya_UGA
そうなんですね、僕はそれを見てなかった
@a_t
部分的にあれですね、新しい名前を忘れてしまった
@kubosho_
APCA
@a_t
あ、そうですね、APCAの概念を使って、判定をするようにするみたいな記事でしたっけ。
@Pittan
APCAですか？
@kubosho_
WCAG 3、まだWCAG 3は、ワーキングドラフトだったかな確か
@a_t
そうですね。
@kubosho_
で、定義されている。そのコントラスト比の新たな計算方法みたいな感じだった気がします。間違ってたらすいません。
@a_t
あの、2系のコントラスト比の計算だと、コントラスト比の計算としては、見えやすい値になってるはずなのに、人間の目から見ると、これなんか見えづらくない？みたいな問題が
@a_t
あって、3からはその計算式を変えようっていう話があって、そっちの新しい方の計算式を使うと、このオレンジとかでも多少、 今までコントラスト比は合ってるのに見えづらかったようなところも、解消されるようになるみたいなのがあり、部分的にこの記事では、noteの記事では、部分的にWCAGの2系のコントラストの計算じゃなくて、APCAを採用したみたいな話をしてました。
@hiroya_UGA
へぇ
@a_t
だからこその説明する時に輪にかけて難しいのがそのWCAGが完全に正しい、これがなんか聖典？聖書、絶対に従わなければいけないもの、っていう風に取られてしまうと、それはそれで 問題があって、問題が今現状すでにある状況ということをまず説明しないといけなくて、
@kubosho_
うん、うん
@a_t
その説明すると、今度じゃあどうすればいいの。みたいなとこになって、話がまたなんかぐるぐる回ってしまってるみたいな感も。難しいですよね。
@Pittan
あくまでガイドラインってことですよね
@kubosho_
そうなんですよね
@a_t
ガイドライン、しかも、あの更新が続いているガイドラインなので、
@hiroya_UGA
うん
@a_t
まだ今は通過点なんですよね、っていうところがありますよね。
@kubosho_
そうですね、うん。WCAG準拠とか、一部準拠とか配慮とかっていう場合に、やっぱりそのWCAGに沿って、 そのアクセシビリティ向上していかないといけない場面があって
@kubosho_
WCAGの言ってることは絶対と思ってしまうっていうのはありそうですね。
@a_t
公表とか、試験みたいな話になってくると、どうしてもWCAG 2系のガイドラインに準拠しなければならないっていうところがどうしても出てくるところなので、そこの判断が難しいですよね。
@kubosho_
アセシビリティに取り組んでますよ、みたいなページを各所で見ると思うんですけど、そこにちゃんと、WCAGに沿いつつも、ここはこういう理由で WCAGには沿ってなくて、独自の
@a_t
うん
@kubosho_
配慮かちょっと言葉はわかんないですけど、そういうなんか独自のことをしていますっていうことを 説明すればいい気はしますね。まあどうしてもやっぱりそのWCAGが絶対だと思ってしまう場面もあるんですけどね。
@Pittan
とはいえ、そうですね、あの、あらかたWCAGに沿っておけば間違いないみたいなところはあって。今で言うと、コントラストの部分だけぐらいですかね？違うっていうのは。
@kubosho_
そうですね
@a_t
あと、A対応でコントラスト比とかって、AAとかAAAの話なので。
そうですね、Aで考えると、コントラスト比が入ってこないみたいな問題もあって、そこもなんか説明するとき、ちょっとめんどくさい。めんどくさいというか、
@a_t
A基準になるとコントラスト気にしなくていいんですね。みたいな話になっちゃうと、それは違うんだよな。っていうのが
@a_t
ありますよね、
@kubosho_
そうなんですね。あと、そのテキストコンテンツと非テキストコンテンツで、そのコントラスト比の満たさないといけないコントラスト比がちょっと違うっていうのはあったり。
@hiroya_UGA
文字のサイズによっても違いますもんね。
@kubosho_
そうですね、
@hiroya_UGA
「大きい文字ってなんだよ」って言われたことあります。
@kubosho_
確かに
@a_t
一応基準としてはありましたけど
@hiroya_UGA
一応あのなんだっけ、Understandingの方に載ってるんでしたっけ。大きい文字って、
@a_t
何ポイントみたいなのがありましたよね。それも結構なんかWebで表示すると、結構でかい文字だなっていう感じが。
@a_t
なんか、実際運用するときは、もうほぼほぼ大きい文字は、なんか意識しない方がいいんだろうなと思いますけど。
まだ4.5より3だったらまだ対応できるけど、4.5にいくと。あ、ごめんなさい。コントラスト比4.5対1とか3対1。3対1だったらまだ守れそうだけど、4.5対1まで行くと、ちょっと厳しいみたいな話が出てきたりして、
@a_t
なんかこう、何のためにこの基準を考えているのか、みたいなところが毎回ちょっと悩んでしまうところがありますね。
@kubosho_
いや、ほんとそうですね、
@a_t
ま、最終的には別にもうその
@a_t
言い方はほんとにあれですけど、WCAG、ガイドラインはもうガイドラインなので、もうそこを超えてても普通にみんなが使ってて見えればいいっていうところではあるので、もうなんか、 1000人ぐらいにアンケートをとって、
@a_t
皆さんが（コントラスト比の）数字を超えてても見やすければいいんじゃないかな。みたいなのも、なんかしてくるところはあるんですが
@kubosho_
実際、そのさっきのオレンジ色は、コントラスト比が難しいっていう記事でも、ロービジョンのユーザーに対して、オレンジ色と白と黒の組み合わせだったかな？見やすいですか、見づらいですか、みたいなアンケートをとった結果、まあそこまでなんか
@kubosho_
どっちも変わりなかったみたいな感じだったと思います。
@a_t
そう、そういうきちっとしたバックボーンを持った上でのWCAGを越えていくっていう試みはしていいんじゃないかなっていう気もしますね。
それをせずにこう、「いや、大丈夫だろう」って言ってやっちゃうのはかなりまずいですけど。
@a_t
きちんとそういうバックボーンを持った上で、一部はそのWCAGを超えてしまうっていうのは、 ある程度はもうしょうがないのかなっていう気がしているところではありますね。
@kubosho_
うん、そうなんですよね、まあだから故にユーザビリティテストを当事者の方にやっていただくとか、そういったことが大事になってきますね。
できれば、複数の人に、複数のその当事者の人にやってもらえると良さそうですね、
@a_t
ほんとにその当事者それぞれで見え方違うんだろうなっていうのが、話を聞いてると思いますね。
@kubosho_
ロービジョンもそうですし、あと、色覚の違いとかも。そう、色覚の話で言うと、シミュレーターだと、 この色がちょっと全く感知できないとか、ちょっと感知できるっていう場合だと、一定の見え方になってしまいますけど、シミュレーターだと。ただ、実際はもうちょっとムラがあるというか。
@a_t
うん、そこもグラデーションなんですよね。
@a_t
基準を作ると、グラデーションがこう、どうしても分断されてしまうというか。こうなんかデジタルな判断しかできなくなっちゃうんですけど、 実際はアナログにこう、境目なくこう、グラデーションとして存在しているっていうところをどこで、どこを基準とするかとか、誰を判断にするかっていうところは悩ましいところですよね。ほんとにうん、さっきからなんか悩ましいばっかり
@hiroya_UGA
でも、そのグラデーションをサポートするために、WCAG2.2までの段階では、その基準が結構きつめになっていたんでしょうね。(WCAG)3にするにあたっても、多分その数字を決める式もそうだし、その基準のしきい値を決めるのも、ノーテストとかでやってるわけではないと思うので、
@hiroya_UGA
個人的には、一旦そのWCAGにできる限りは、寄り添うのがいいのかな、と思ってはいるんですよね。なんか、調査を独自でして、うちはこういう調査をしたから、こういうルールでAです、AAです、っていう風にするのももちろんありだと思うんですけど、
@hiroya_UGA
それが世の中にはびこりまくると、WCAGってなんなの、みたいになっちゃうので、そこの価値を揺がさないためにも、個人的には、WCAG準拠以外のことはしない方が、多くの場合はいいのかなって、ちょっと思ったりはしますね。
@Pittan
料理で言うところのなんですか。自分で作るんじゃなくて、あのクックドゥーとか使いなよみたいな、プロがちゃんと調査して、うまい味できてるんだから、これに則るのがいいだろうっていう。
@a_t
確かに間違いないは間違いないんです。
@hiroya_UGA
そう、自分の好みにはならないっていうところです。
@hiroya_UGA
そのサービスを使うユーザーが美味しいと感じるかどうかが。ジャンクフードが好きな人には、ジャンクフードがいいし、みたいな
@hiroya_UGA
そういうことですよね。
@Pittan
万人にはいいけど、どうなんでしょう使いどころっていうんですかね。
@kubosho_
うん
@Pittan
でも、WCAGに則らないという選択肢はないですよね。
@a_t
WCAGは、ベースとしてあるべきだとは思いますね。
@kubosho_
うん
@kubosho_
そうですね、WCAG、ただ、文言がちょっとなんでしょう。まあ、 独特の文体なので、それをちょっと解読しやすいように変えるっていうのは、
@kubosho_
結構
@kubosho_
各社やってる感じが
@a_t
そうですね。本当に読んでいて、頭が痛くなる。日本語訳なのに、日本語訳を読ましてくれみたいな気分になってくる。あの、ガイドラインは全体的に、仕様書は大体そんな感じがするんですけど、
@kubosho_
まあ厳格に書こうとしていると思うので。
@a_t
そうですね、時間依存メディアとかぱっと言われて、何も頭に具体的なイメージが出てこない。
@kubosho_
確かに。最初そう時間依存メディアっていう言葉を聞いて「ん？何それ？」みたいな感じ。
@hiroya_UGA
うん、うん、うん、うん
@Pittan
まあ、口語訳みたいな、なんなものが
@Pittan
そうですね。あの、UITも含めて、そういうものに取り組んでいる
@Pittan
これは、なんか改善されたりとかはしないですかね。なんかその、解説がちょっとわかりやすいっていうのは多分ある
@Pittan
じゃないですか、WCAGの。あれに近い形で、ていうか、もう解説がそれなんですかね。
@kubosho_
うん、だと思いますね、 基本WCAG自体はもう厳格に書いて、ガイドラインで補足するという。
@kubosho_
うん、そんな感じだと思います。
@a_t
ちなみにあのAmebaのアクセシビリティガイドラインって出されているじゃないですか。
@kubosho_
はい、
@a_t
あれのテキスト、あれもかなりこのWCAGをわかりやすく、口語訳し直したものみたいなイメージがあって、読ませていただいたんですけど。
これっていつぐらいに作られたものなんですか？
@kubosho_
いつぐらいだったかな。これ、元々あれなんですよね。FRESH LIVEっていう昔やっていた動画配信サービスがありまして、そこのアクセシビリティガイドラインを元に作られたものなんですよね。Ameba Accessibility Guidelinesて。
@kubosho_
なんで、まあ、そこから辿ると、多分2018年とか2019年とかだと思うんですけども
@kubosho_
そうですね。
@a_t
FRESH LIVEのセシビリティ対応ってのは、なんか、その中にそのプロジェクトの中に意識の高い方がいらっしゃってこう、ガイドライン化したみたいな流れがあった。
@kubosho_
ああ、その当時あれですね。ますぴーさんが、今あのSmartHRさんにいます。ますぴーさん、増田さんが、FRESH LIVEの開発をやっていて、それでアクセシビリティガイドラインを作ったっていう感じですね。
@a_t
これもかなり、自社でそのガイドライン起こすという時に「わかんねえよ」ってなると、大体Amebaの方を見に行って、 内容を読み、みたいな。突き合わせみたいなことをしながら、非常に参考にさせていただきました。という
@kubosho_
ありがとうございます。
@a_t
なので、あの言い方は悪いんですけど、弊社のガイドラインは、なんかこうキメラというか、いろんな色んなガイドラインを見ながらこう。なんか
@a_t
つぎはぎってわけじゃないですけど、もちろん、あの消化して、あの書き直したところもたたくさんあるのであれですけど、なんかキメラ的な側面もあるなと思いながら作っていたところがあります。
@kubosho_
まあでも多分基本そうなると思うんですよね。もう今から作るってなると。もう既にあるガイドラインを元にこう ちょっと色々組み合わせて、自社に最適化したガイドラインを作るみたいな感じにはなってくると思うんですよね。
@a_t
でも、やっぱやってみると、時間はめちゃくちゃかかりましたけど、そのガイドライン、元のWCAGに対する理解も深まるので、結構作ってよかったなっていうのは
@a_t
ありますね。ただ、その他社さんにこれをおすすめするかっていうと、めちゃくちゃ時間がかかるので。普通に、今ある freee社のガイドラインなり、Abemaの方を見た方が楽なのではみたいな、おすすめの仕方になってしまう。体力的に余裕のあるところがやった方がいいかもしれないみたいな。
@Pittan
そうですね、3人で週に1回作業して、1年かかりましたからね。
@kubosho_
なかなかですね
@a_t
3人で一体これは何の話をしているんだろうみたいな、うんうん言いながら話をしてたんですよね。
9. W3Cの弾幕コメントについて
@hiroya_UGA
動画コンテンツにコメントを投稿できるみたいな話をがあるじゃないですか。で、UIT Meetupの配信のコメントにあったか、感想のツイートで見つけたか忘れちゃったんですけど、そのアクセシビリティを頑張ってる人の視点で見た時に、じゃあ、そのニコニコ動画さんとかの弾幕コメントとか、ああいうところで出てくる記号を組み合わせてやる、よく職人さんって言われる、そのアスキーアートの上位互換みたいな
@hiroya_UGA
記号で、絵を描いたりするじゃないですか。まあ、アスキアートもそうなんですけど、ああいうものに対してはどういうふうに考えてるんだろうっていうツイートを見て、確かになって思ったんですけど、 そのうちの1つ、その弾幕コメントに関して、なんとW3Cにあのガイドラインがあることを見つけまして。
@kubosho_
Bullet Chatting Proposalってやつ
@hiroya_UGA
そうです、URLが w3c.gthub.io/danmaku なんですよね
@a_t
Bilibili動画の人がやってるやつでしたっけ。
@kubosho_
そうそうそう、そうなんですよ。
@hiroya_UGA
あっ、そうなんですね。いや、これがめちゃくちゃ、こんなんあるんだと思って、
@hiroya_UGA
Bilibiliさんの方だったんですね。
@kubosho_
ま、中身がちょっとないに等しいんですけど
@hiroya_UGA
やっていこうという気持ちが伝わってくるので、すごいなと思って。2022年の3月6日。
@kubosho_
そうですね
@a_t
あれ、これなんかもうちょっと内容があるやつがあった気がしたんですけど。
@kubosho_
なんかそうなんかもうちょっと前からあった気がしますね。てかリンク先に結構情報が載ってますね。ユースケースとか。APIとか。
@a_t
ああ、ユースケースこっちの方か
@hiroya_UGA
ユースケース…
@Pittan
これか！あ、すごい
@hiroya_UGA
おおすごい。
@hiroya_UGA
なんか仕様書っぽいビジュアルになりましたね。
@kubosho_
コミットログを見ると、2019年からありましたね。
@hiroya_UGA
そんな古くからあるんですね。へぇ。
@kubosho_
うん、そう前に見たなっていう気がしていたので、まあ、あくまでこの日付は最終更新日ということで。
@hiroya_UGA
うん、うん、うん。何か変わったんですね、じゃあ、今年の3月に
@kubosho_
うん、まあ、そういうことでしょうね。
@hiroya_UGA
これをどういう風なツリーにするのか、読み上げになるのかがすごい気になるんですけど
@a_t
想像を絶することになりそう、できるのかな。
@Pittan
例えば、今ある仕様の中でやろうとすると、ライブリージョンとかで、ガンガンやっていく感じですか。
@a_t
いや、でも同時に喋らざるを得ないですよね。
@hiroya_UGA
そうですよね、
@a_t
うん、全部線形には流せないですからね。うん、うん、うん、そうすると結局聞き取れないから意味ねえよっていう話になっちゃいそうだし
@hiroya_UGA
聞き取れない体験が大事なんじゃないですかね。
@a_t
ああ、みんなワーって喋ってるみたいなイメージ
@hiroya_UGA
普通に目で見ても、コメントって拾いきれないじゃないですか。
もう全部真っ赤になっちゃうとか、そのうるさい、読めない、画面が見えないっていうのを、多分、音声でも同じ体験をさせるためのガイドラインなのかなと思って。
@a_t
で、実際読みたければ、あの右側のチャット的なとこに、縦でこう時間軸でばっと並んでるから、そっちを読めば見れるみたいな。
ユーザーがそっちから選択すれば、 1個1個読み上げることもできるし、全部音で重なる、いや、動画の音とも重なっちゃいますよね。
@hiroya_UGA
ま、そうですね、確かに
@a_t
想像を絶するな、ほんとに
@hiroya_UGA
かなり挑戦してる感じを、 雰囲気を感じ取れて、僕はこれを見つけてすごい嬉しい気持ちになりました。
中身を全然見れてないので、なんとも言えないんですけど、
@Pittan
でも、これをアクセシブルにしようとしている人たちがいるってのは、なんかアツいですよね
@hiroya_UGA
アツいですよね。
@kubosho_
アクセシブルにしようとしてんのかな、わかんない
@a_t
仕様を起こすっていうところだから、アクセシブルとまたちょっと違うかもしれないですけどね。
@Pittan
ああ、確かに。
@hiroya_UGA
なるほど、文脈が違うんですね。これを作るときにはっていう話なんですね。
@a_t
多分そういうことだと思いますけどね。
@kubosho_
ただ、なんかBullet chatting vs Web VTTとか、TTMLとか、そういう既存の
@kubosho_
字幕系の技術と比較している章もあります。
@a_t
ただ、もうなんか暗黙的にltrな言語、左から右に進む言語を前提としちゃってるような
@kubosho_
rtlはどうなるんだろ。
@a_t
方向が逆なやつが途中で混ざるんですかね。
@hiroya_UGA
ニコニコ動画だと、逆再生のコマンドありますね、確か。このコメントだけ左からいかせたいみたいな、確かあったような気がするんですけど
@a_t
そうすると、なんか縦書きはどうするんだろうか、とか意地悪なことばっか色々考えちゃう。
@Pittan
なんか、複数のコメントって言うんですか。ビジュアル的には1個のコメントに見えるんだけど、実は縦にダダダダダダって、出てくるコメントとかもあるじゃないですか、動画によって、ああいうのとかも含めると、これはかなり難しいんだっていうのは、はい、
@hiroya_UGA
話がハイパーになってきましたね。
@kubosho_
直近ので言うと、なんかチキチキバンバンのあのBilibiliのコメントが結構すごいことになってるっていうのを見た記憶が。
@a_t
職人がなんか色々やってるという意味なんだ、なるほど、確かにあっちの方で、結構あのパリピ孔明は流行ったというのは聞きましたね。そういえば。
10. クロージング
@Pittan
はいというわけで、クロージングの方に行きたいと思います。
まだ本編をご覧になっていない方は、ショーノートの方に、Meetupのアーカイブへのリンクを載せておきますので、ぜひご覧になっていただければと思います。
チャプターに分けてあるので、見たいセッションからさくっと見ることもできます。ぜひぜひよろしくお願いいたします。また、
@Pittan
このエピソードを聞いて、Meetupのアーカイブを見て、LINEやLINE Growrh Technologyに興味を持っていただいた方は、ぜひカジュアル面談をお待ちしています。
本エピソードのショーノートに求人へのリンクを貼っておきますので、ぜひご連絡ください。あと、Kuboshoさんからも何かあれば、このタイミングでどうぞ。
@kubosho_
CyberAgentでは、各事業部、各職種で求人していますので、もし興味があればリンクをご覧ください。
@Pittan
ありがとうございます。というわけで、今回はUIT Meetupアフターショーとしてお話していただきました、ご視聴ありがとうございました！
