この番組はエンジニアの成長は楽しい学びからをもっとに我々が日々学んだことをワイワイとアウトプットするラジオでございますございますございますさあ今日も楽しくやってまいりましょうはいはい今日は何を楽しませてくれるんだ今日はですねこれは今まで触れてきてないでしょうっていうことについてやっていこうかなという前にはいお便りが来ておりますおーなのでちょっとまずはそちらから読んでいきますねはい

ではラジオネームしのぶさんからのお便りですありがとうございますまずはポッドキャストの感想ということでこんにちは手順書の回を聞いて書いています私はWindowsを利用しているので主にOfficeを利用していますワードでテンプレートを作成し利用するようにしていますところでスクショの赤枠ですが赤枠にしてます?私はオレンジもしくは青にしていますというのも四季角以上の場合赤は見分けにくいらしくカラーユニバーサルデザインの観点から変えています

四季角以上の見え方のアプリを使うと各色がどのように見えるかわかるのですがオレンジと水色がそれぞれの見え方が近いかなと思って使っています四季角以上の割合は男性は5%程度になるようです結構多いですよね結構多いですよね多いですねあとスクショ撮るのにおすすめはスナギットスナギットって読むのかなスナジットスナギットスネイギット潰していく可能性をどんどん

SネイジットかもしれないSネイジットそんなわけないか気を照らしすぎてるでしょ枠入れたり操作のナンバー入れたりモザイクかけたり矢印入れたりするのがとても楽ですMac版もあるようなのでぜひ使ってみてくださいなるほどありがとうございますちなみにポッドキャストで話してほしいことユーザーマニュアルについてってあるんですけどユーザーマニュアルは一旦さておきですね今回感想の中で

すごい広い視点が展開されてるなと思っていてカラーユニバーサルデザイン僕はもちろん赤枠を使ってましたと僕も赤枠を使ってましたなぜならすごく目立つように見えてたからなぜならデフォルトだからデフォルトだからが一番でかいかもしれないカエルの

ちょっと奥だったんで赤でやって色分けしたいとき次青やってその次緑やってましたねうんわかるわかるただ実はこれ四季角以上の場合なかなか見えにくいそうでうんちょっとこういう視点なかったなと思ってちょっと四季角以上の赤調べてみますいいですねどう見えるんだろうたまにいますよねで

たまーにぷよぷよの色何と何一緒に見えるみたいな人いましたね人生生きてきて5人いないぐらい高校の時2人ぐらいいたなでも5%いるってことはもっといたんだろうなうんうんうん友達少なかったからないやいやいやじゃあしょうがないですねじゃあしょうがないちなみに赤は今パッと調べてパッと

出た情報なんですけど赤緑色紋っていうのがあるらしくて赤と緑が全部茶色に見える青とか水色は一緒そのまんまというかちょっとくすんだりは見えるんですけど青とか水色オレンジも茶色に見えるなオレンジも茶色だな確かに茶色って白からするとそんなに大して変わった色じゃないじゃないですか

白からすると白背景に茶色湧くってなんか目立たないっていうんですか目立ちますかね目立ちそうな感じしちゃいましたねどうなんだろうなんか青とか水色とか水色は微妙か青とかのが良くない黄色とか濃い黄色とか確かにまあっていう

ことかもしれない専門外というか考えたことはないわけじゃないんですけどとはいえ広くC向けに出すようなものってない作らないじゃないですか作ってる人はいるんですけど僕は割と社内とかシステムプロフェッショナル向けのシステムを作るっていうんですかなのであんまりそういうこと考えてなかったんですけどマニュアルしかりなるほど気づかされるお便りありがとうございますありがとうございます

ちょっとこれを機にですねそもそも手順書以外にもウェブサイト作っててアクセシビリティがどうこうみたいな話ってあるじゃないですかありますねこのウェブアクセシビリティってなんとなくは知ってるけどあんまりちゃんと知らないなと思ったんで今回ですね世の中には一体どんなハンディキャップを持ってる方がいてその人たちはどういうことに困っていて

じゃあウェブサイトを作る側の立場からどうやったらそれを改善できるのだろうかというのをですねちょっと調査してきたんでそのお話をしようかなと思っておりますありがたいありがとうございますユニバーサルデザインっていうやつあるじゃないですかありますね

オカリナみたいなペンでしょああとかとかとかとかそういうのそういうのそういうのなんか変わった形のハサミみたいなうんうんうんなんかハードウェア作る人ってすごい意識するんだろうなって思うんですよそうだね確かにテレビのリモコンとかわかんないけどえーなんだろう家電のリモコンとかあーなんかなんだっけテレビのリモコンもさなんか昔カラーボタン4つみたいな並んでたやつはいはいはいあれ色だけだと見分けられないからってなんか文字つけたみたいな話とかありますよねあーそうなんだへー確かに言われてみればそうですね

赤と緑が茶色に見える人にとってはねどっちがどっちだってなりますしねなるほどねウェブだとなかなか意識しないがちですけどとはいえウェブってどんどん広がってるっていうのを考えるとハードウェアがどんどんスクリーンになってますから最近あれも全部ウェブページみたいなもんですから我々もこういうところをちゃんと学んでいかないとなっていうのはすごい素晴らしいとりあえず今日は

そういったアクセシビリティの世界を覗いていこうかなということでありがてえじゃあもう早速入っていこうかなはいお願いしますまず世の中にはですねいろんなパターンでハンディキャップを持っている方がいらっしゃるんですけど一番分かりやすいのでかつさっき出てきたやつだとまず視覚に障害のある方ですねうんうんで

これもいろんなグラデーションあるかなと思ってそもそも全毛の方もいらっしゃるじゃないですか何も見えないっていうパターンとさっきの場合はロービジョンと呼ばれるパターンで色覚の見え方が違うとか見えるけどはっきりは見えないみたいなそういうパターンがあるんですね全毛の方の場合はもうこれ何も見えないので基本的には音声の読み上げソフトを使ってウェブサイトとかを見てるそうですね

どうやってるんでしょうね入り口どうやって入ってくんだろうねこれ覚えきれない量の音声読み上げられそうですよねそういうこと確かにてかサイドバーとかどうなるんだろうね本当ですよねあの辺とかうまく読み取らないようにしてるのかな僕の知っているちょろっと知識だと多分その辺どう読み上げられるか合わせて開発するんだと思います実装していくっていうのかはいはいはい

ちなみにそのスクリーンリーダーって呼ばれる音声読み上げソフト使うらしいんですけどこれ使い方としてはなんかウェブサイトのテキストリンクボタン見出しなどを順番に読み上げますってなってますねだからちゃんとタグを設定しておけばなんか読んでくれるのかなこの人たちが困ることはですね基本的に画像とかがまず読み上げできないじゃないですか

なんでちゃんと大体テキストとかが設定されてないともうなんかファイル名とかだけだけとかファイル名だけとかあとは画像みたいな形で読み上げられちゃってどんな画像があるかが分かんないみたいな

なんかオルトとかでやるんですよね多分例えばひまプロのチャンネルのアイコンだったらオルトテキストでひまじんプログラマーの週末エンジニアリングレッスンというタイトルと下側にワイワイと楽しそうにお話をしているキツネウサギカエルの画像がありますみたいなのを書いておくんですかね

そうだねそうなるんだねちょっと暇プロだと別にね下の動物部分どうでもいいんでぶっちゃけ説明書くか置いといてなんかもっとテキストの説明にあたる図解みたいなやつはちゃんと書いてあげた方がいいってことなんでしょうねうんうんうん

確かにそう考えるとオルトの書き方とかも迷いがちだと思うんですよこれ何書こうかなみたいな読み上げられることを想定しながら書くと書きやすいかもしれないねそうこれ何に使うのと思いながらパッと見でこれはもうちょっと本当に素人すぎるんですけどパッと見コード読んだ時にこれなんだみたいなのが分かるように書いてました読み上げとか意識できてなかった

あとこれあれかもね実際にさスクリーンリーダーを使ってみないと分かんないかもねやっぱそうですねそれはそう例えばさこれは何々の画像ですみたいな感じでさ補足してる部分がきっとあるはずじゃんはいそこに合わせた時にどうなるかがちょっと分かんないから実際に使ってみないと難しいかもねむずいあとはですね見出しの構造とかが不適切だとうまく読み上げができなくて文章の全体の構成がつかみにくくなるらしいですね

どういうことですかレベルが一個ずつ降りてないみたいなことなのかなあとは見出しがついてないとかは結構しんどいかもしれないですね長文がだーって並ぶよりは細かいグループにちゃんとちっちゃい見出しがついててだと聞きやすそう

僕がパッと調べて出るのは月回見出しボン長文ダーが不適切で見出しと小見出しがあると聞いててどこからどこまでが何の情報が書いてるとか結論詳細っていう構造になるから聞きやすい

ちなみに見出しを見出しだけを聞く機能があるらしくてスクリーンリーダーにだからそこの構造が適切じゃないと見出しを全体でまずさらってここを聞こうっていう風に意思決定するのが難しくなるんじゃないかな確かにそういう読まれ方できるんだなるほどな見出しの構造親子関係とかもそうだし

あとその本文に対してちゃんと適切な見出しついてるかどうかっていうのも大事になりそうだよねこれだとそうですねそこはなんか職人技ですね職人技そうだねこの辺はエンジニアとブロガーの共同作業になるねウェディングケーキのカットと一緒ですねそんなに一緒にやってますかねそんなに一緒にやってない?二人三脚ではない気がしますけどそうか

2人で悩んでね2人で悩んでうーんってやって好みだしたってやってたらまあ両人平気ということにしましょうそうだな次がロービジョンの方ですねこの人たちはどういうことに困るかというと背景色と文字色のコントラストが低い場合に文字が溶け込んじゃって見えなくなったりなるほどあと色だけで情報が伝えられているケース

例えばエラーは赤文字で表示されてますみたいなそういった時に色の区別がつきにくいと理解が難しくなったりとかするっていうこういう構成になってるかどうかはあれだけど緑ボタンと赤ボタンを並べられてどっちどっちの方は緑ボタンどっちどっちの方は赤ボタンをみたいなそういうナビゲーションされると困っちゃうってことだよねウェブサイトだとあんま見ないですけど

OKかNGかを色ボタンだけみたいなことですよねそうそうそうそうあとコントラストの話だったじゃないですかあれすごい抽象的な話だと思うんですけどうん

デジタル庁のウェブアクセシビリティ導入ガイドブックっていうのがあってそこでは具体的なコントラスト比が書いてて4.5対1より大きくしましょうって書いてますコントラスト比のその数値って一体何?なんか出せるらしいなんかチェックツールっていうのがあるみたいでウェブアクセシビリティのチェックツールみたいなのがあってそれでコントラスト比出るみたいなんですけどそれが4.5対1以上だったらいいらしいです

ちょっとイメージつかないけどでもくっきり分かれてるよってことなんだよねそうですねくっきりですね今僕はそのページを見てNGの例とOKの例見てるんですけどくっきりですねOKのやつは濃いグレー聞いていただいてる方には伝えられないんですけどドリさんとじゅんぺんの言語化力あると信じて今スラックにあげましたあーなるほどねあれだなんかさ

今2.32対1と5.74対1が並んでて差が少ない方が結構コントラストが少ないとでそのNGの方のパターンだと文字は白グレーの部分はこれもしかしたら今日午後ぐらいから雨降るかもなぐらいの感じおくもりでOKの方は

いやあれは雷雲だってぐらいのグレーそうですね結構やばいんじゃないぐらいの雲ですねこれは傘どころか家出ない方がいいんじゃないかってぐらいになる気持ちのグレーですねそうですね言語化うま素晴らしいと思いましたありがとうございます

視覚の方はこんな感じの困ることがありますよとちょっと改善策は最後にまとめていこうかなって思うんで他のパターンもちょっと紹介していこうかなと思います続いて聴覚に障害のある方耳が聞こえないパターンですねこの人たちが困るパターンは音声コンテンツとか動画っていうところで基本的には困りますよとで

どういう時に困るかっていうと動画に字幕とか手話とかがないとかあとは音声内容の文字起こしがないと何を言ってるかが全くわからないのでそういう重要な情報みたいなのが動画のみで提供されてしまうとそういう情報から取り残されてしまって困るっていうケースがありますとあとはね死体不自由運動機能に障害のある方だからこれは

これ難しいですね運動機能に障害がある方に対する打ち手いろいろあるしね多分不自由なパターンも手が動かないケースもあれば座れないケースもあるだろうしハードウェアで解決しそうですけどねそうですハードウェアで解決しますそうですよねマウスでの細かい操作が難しかったりするケースが手の痺れとかある場合はなるほど手の震えるとかありますねえ?

手が震えるとかありますねそうそうそうそうでなんでそれ専用のなんかね大きいボタンが用意されてるスイッチコントロールっていうデバイスがあるらしくてこれはね本当にねいろんなツールがあるんで一口にこれとは言えないんですけど僕が見た画像の中で一番わかりやすかったのはこれわかりやすいかなファミコンの右側のボタンをはいはいはい

6倍ぐらいでかくしたような感じのやつ結構ですね4つぐらいボタンがあってみたいなスーファミの話ですねそして今ファミリーコンピューターが思い出されたスーファミの方でしたスーファミの4つのカラフルなボタンあるじゃないですかありますねまさにあれをでかくしたようなやつで操作するケースとかあとねフットペダルみたいな足で押す系のデバイスとか

なんかフットペダルに関してはなんか別にウェブアクセシビリティ関係なく便利で使ってる人いますよねあーなんかたまにあのあれでしょガチすぎる勢の人が使ってるケースだよねあーそうそうそうそうあるねなんで使うんですかショートカットボタンそうえー足は空いてるからドラマーみたいなことするあーそうそうそうそういうことそういうことえー

なんかそういうねもしくはジョイスティックみたいな形のデバイスのケースとかもあるし多分そこは障害に応じていろんな形があるんだと思われるでもだいたい共通してるのはキーボードほどボタン多くない当たり前だけどだからあんまりその細かい操作とか豊富な種類の操作はできないよっていう制限がありますねで

あとは人によってはキーボードでのみ操作できるっていうパターンもあったりとかするらしいねマウスは無理だけどってあとは視線入力装置っていうのも世の中にあるそうですねホーキンス博士だっけわかんない具体例わかんないわ視線入力装置は視線で本当にマウス移動させて例えば2秒間見た場所がクリックされるみたいな

キャンセルしたい時は目を左右に動かしたりとか視線を使って操作をするみたいなそういうツールですね大変だなこういうツールを使う人たちがどういう時に困るかっていうとまずマウスホーバーでしか開かないメニューがあると操作できないです

マウスホバーじゃない?確かにそうかクリックしないからかよくあるパターンはヘッダーのメニューとかがマウスホバーすると下にニョーンって出てくるメガメニューみたいな感じであれがホバーだけでできてしまうとマウス操作できない人は操作できないですあとはキーボード操作の場合って

タブとかを使ってどこに今要素フォーカスされてるのかっていうので操作していくんですよなんですけど今どこがフォーカスされてるかが見た目で分からないようなデザインになってしまうと迷子になってしまうとあとは基本的にこういうツールって細かい操作があんまり得意じゃないのでボタンが小さかったりとか

リンクの距離が近かったりするとクリックしにくくなりますっていうのがありますね次がラストなんですけど認知学習に障害のある方

知的障害的な感じかなイメージはこの辺は情報の理解の難しさとか複雑な文章専門用語一貫性のないデザインなどが理解の妨げになることがありますとどういう時に困るかっていうとサイトのナビゲーションが複雑で操作方法がページごとに異なってしまうみたいな体験が統一されてないと結構混乱しちゃうケースがあったりとかあとは

点滅するアニメーションとか自動再生される動画みたいなのがあると集中力が途切れてしまったりとかであと時間に制限のある操作がねプレッシャーになったりしちゃうらしいですね時間に制限のある操作ってあれかあの多要素認証の番号みたいなあれとかすごいだろうな最後の方さ赤くなって点滅し始めるじゃんそうですねあれ焦らせてきますからねうん

あれとか実はそういう障害を持ってる方には結構プレッシャーになっちゃう可能性ありますよね全然僕はプレッシャーですけどね俺もプレッシャーこれやばいやばいやばいってなるあれ体験良くないよねでもあのなんだっけMacさiPhoneとApple IDで連携させておくとさコピペクリップボード共有できるじゃないですかあれあると楽ですよね

なるほどねなんかめっちゃ元も子もないんですけどワンパス使えば楽ですよねわかるわかる俺あれがなんで安全なのかまだわかってないけどいちいちロックしてくれるからあと安全って言ってたのあれですよ多要素認証の番号をワンパスに登録すると勝手に入れてくれるじゃないですか多要素認証の番号をワンパスに入れると多要素認証の登録をGoogle Authenticatorとかじゃなくてワンパスにすると

ワンパスのIDパスワード多要素認証の番号を一気にガッて入れてくれるあー入れるねそれで全部そっちに管理するとなんで安全か分かんないってことそうあーそういうことですねスマホに分けた方が安全なんじゃないかなと思って結局私はスマホ使っちゃってるんですけどえーちょっとずれるんですけどあれなんで安全って言われてるかっていうと求められるえーっと

内容が違うっていうんですかIDパスワードって知識なんですよ多要素認証って知識じゃないんですよ持ってるかどうかみたいな持ってるかどうかかなあれなんて言うんだっけなちょっとすみません細かいの忘れちゃったんですけど知識と別のものの2つを求められるからセキュリティ的に安全ということになってます知識だけだと知識が漏洩して知識が取られちゃったときに知識だけで入れちゃうんですけど多要素認証

番号一日変わるやつだと知識以外の情報が必要になるっていうので冗長化してるっていうことになってますそうなんだ一番わかりやすいケースはさ

普通にワンパスのロックを解除した状態でカフェとかでトイレに行って画面がロックされてなかった時に普通に両方突破できるんじゃねっていうそれはあれですか知識の欠如ですか画面ロックしないっていうおつむが足りないっていう意識でかもしれないその場合スマホならきっとトイレに持ってくんで安全かなっていう

いいんですよこれはそんなことはどうでもいいですよいやいやはいっていうので世の中にはいろんなパターンで困ってる方がいますよとうんじゃあ我々はエンジニアとして具体的に何ができるのかという実装時の意識するべきことですねはいはいはいなんかまず設計段階なのかなデザインかなデザイン段階要件か要件段階でどのレベルのウェブアクセシビリティ求められるのかっていうのははっきりしてほしいですよねおーいいですねはいうん

絶対に全部やる必要ないんですよ多分体が不自由な人を想定する必要がないシステムは絶対にあるし目が見えない人を想定する必要がないシステムは絶対にあるです大半そうだと思ってます世の中の全システム数を見ると一方で行政とか本当に区民市民全員使うんですみたいなサイトは絶対に意識しないといけないんですよなるほどね

っていうのでまず要件段階でそこをはっきりさせるもし自分がそこに入るんだったらそこを気にしてあげる必要がある確かに特定の領域の人だけが使うツールとかだったらそもそもそういう障害があるとつけないケースとかもあるからねそうですそうですそういうのを考慮すると多分お金がかかりますよねめちゃくちゃそういうのを実装しなきゃいけないでしょうしそれを考慮してデザインするってなると多分いつもよりデザインに

フィードバックの往復とか増えそうだしだからそこは一エンジニアとして意識する必要があるのと一方であとはこういうことがあるよっていうのを知っておくのはすごい大事ですよね今日のりさんに言っていただいたのもそうなんですけどちなみに今回はですねアクセシビリティを改善することによる経済効果についても触れていこうと思ってますそこら辺とかも考慮した上で

戦略的に採用していくといいかなって感じですねちなみにさっきのどこまでやるかみたいなところのガイドラインなんですけど一応国際的なガイドラインとしてはWCAGWeb Content Accessibility Guidelineっていうのがあったりとかあと日本だとJIS 8341-3っていうような企画があったりするのでこれを参考にするとまず良いかなって感じですねおそらくこのガイドライン内でレベルがあるような気がする

なんかマストシュードウォントみたいな感じで分かれてそうな雰囲気だなっていうのを見ましたそうだね今回は5つの我々が意識できることをちょっと書いていこうかなと言っていこうかなと思いますお願いしますその1画像に大体テキストを設定する

これはさっきもちょっと出たんですけどスクリーンリーダー使っている方は画像がどういう内容かわからないんでだいたいテキストを設定してあげることによってどんな画像があるかっていうのもイメージして使うことができますよというようなものですね昔はこの辺とかって結構SEOにも効くって言われてたよね今は知らんけどそうなんですねそう

要は検索エンジンって昔は結局クローラーでテキストを読み込んでどういうサイトなのかっていうのを判断してたんで画像のままだと画像の情報を失われちゃってたんですよねさすがに今は画像の内容を読めてるんじゃないかなって気もするけどね一旦このALTを設定してあげるとスクリーンリーダーに無視されることなくなっていいですよという感じですね続いて2つ目キーボードだけで全ての操作ができるようにする

これはマウス使えないユーザーさんとかに向けてサイトを利用できるようにするためってことなんですけどタブとかでちゃんとリンクやボタンとかってのが順番に移動できるようにしておいて各ボタンの操作がエンターとかスペースキーで実行できるようにしておくっていうようなイメージですねこれどうやって試験するんですかねどうやって試験するんですかね

どうだろうE2Eテストとかなら自動化もできるんじゃないかっていうことかキーダウンイベントとか発火させたらいけないのかないけると思いますそれ用のシナリオを作るってことですねっていうのとあとは現在どこにフォーカス当たってるのかっていうのは分かるようにしておいてねっていう感じですねよくアルバナだと青いうすらふわっと出てますよねツタルサルはい

でその3十分なコントラストを確保し色だけに依存しないコントラストとかはさ多分色覚以上がなくても気になる部分だと思うのよなこれ見づれーなーみたいなまあ気にしてる人はそうですね一方でここは気にならないっしょっていうとこでも気になっちゃう人がいたりするケースがあるんでそこはちょっと敏感になろうねっていうのとあとは色だけで判断できるようなものはやめようねっていうのはねこれあれだよね多分歩行者用の信号が一番わかりやすいよね

ちょっとwebじゃなくなるけど多分あの赤と緑ってめっちゃコントラスト的には良くない気がするんですよねだけど真ん中にさ歩いてる絵と止まってる絵があるからどっちか分かるみたいなまあなんか昔の電球時代の信号分かりづらかったと思うんですけど最近はなんか分かりやすくなってる気がしますねそうなんだはいコントラストがはっきりしてるような気がするうんうん

でもなんかあれじゃん赤と緑がそもそも見分けられないみたいなケースがあったじゃんはいだからあれを色だけでやってしまうと問題あるけど絵をつけることによって分かるようになってるみたいなうんうんうんあれに関しては多分配置で覚えるんでしょうね本当は続いて適切な見出し構造セマンティックHTMLを設定するとうんこれはさっきもちょっと触れましたけど

スクリーンリーダーとか使う場合は見出しでまず聞いてってどこをちゃんと深掘りしようっていうのを考えたりすることがあるらしいのでそういった見出し構造をちゃんと書いていこうねっていう感じですねラストは動画に字幕やテキスト情報を提供すると耳が痛いですねでもこれは聴覚障害以外にも音を出せない環境にいるユーザーとかもいたりするんでそういう意味でもいいよねって感じですね

かつてお便りでね日本語勉強中だから文字でも見たいですっていうお便りありましたけど我々もちょっとアクセシビリティ足りてないですねそういう意味だとそうですねそうか言語っていう壁もあるんだねはいそれ今後増えてきそうだよねでもそうだと思います一旦これらがね我々エンジニアができることですね意識することかな

実装の際にここがあまり意識されてなかったらそれはもしかしたらPMに相談するべきケースもあるんじゃないかって感じですねこれらちなみにウェブアクセシビリティに取り組むことによってこういう使いにくいって感じてた人が使いやすくなるっていう以外にもいろいろメリットがございますまずは利用者層が増えるんで

いいよねっていうのとあとユーザビリティの向上って実はもともと障害を持ってた人以外にもプラスだよっていうのがあってそういうアクセシビリティの問題があったことによって例えば一時的に腕怪我してるとかあとはめっちゃ音聞こえないような場所で動画見たいとかそういう騒がしい場所だったりとかあとは明るい屋外とかでもコントラスト低いと見にくくなったりするんですけど

そういうケースも見やすくなったりみたいな感じで実はその障害を持ってないけど環境でその一時的に使いにくくなってしまうっていう人に対してもまず提供できるようになるというので利用者が増えますよっていうのが一つあとはSEOの向上っていうケースもあるらしいですね検索結果で結構上位に来るケースが増えてるとでもGoogleからしたら当然ですよねそれは

アクセシビリティの向上に取り組むことによって使いやすくなるのは間違いない気がするんでそれは上位に来るようになるよねって感じですね画像のテキストで説明するとかは場合によってはちょっとサイトがごちゃついたりして見づらくなったりしそうな気もしますけどねでもオルトって出なくない?表面にそうなんですよオルトってウェブページの見た目に出ないんですよ

イメージできてないですかもしかして僕がそういうことかオルトはねだいたいテキストって音声で読み上げるときに読み上げるのに使ったりとかあと画像がネットワークの回線の問題で読み込めなかったときとかに代わりに出すテキストですね画像が表示されてるときはテキストにならないですなるほどそういうことか今更ながら理解しましたそいつは良かった危ねえ危ねえ危ねえな危ねえぜ

じゃあ見やすいですねそうなんですあとは法的リスクの低減とコンプライアンス法的リスクリスクなのかな罪に問われることがあるのか一応障害者差別解消法みたいなところで障害者が使えない状態でウェブサイトを放置しておくことが法的な問題に発展する可能性がありますっていう言及がありますこんな法律あるんだ知らなかった一応そういう合理的配慮の提供が義務化されてるそうですね

あとは社会的なイメージの向上みたいなのもメリットとしてありますよとちょっと追加でですね実際にこれアクセシビリティに取り組んだことによってどのくらいその企業にメリットあったんだろうと思って調べてみたんですよその結果が結構ね衝撃的というかそこそこインパクトある話だったんでこれ紹介していきたいなって感じなんですけどまずですねイギリスの大手スーパーマーケットでテスコっていう会社があって

ここはオンラインショッピング利用しやすくするためにウェブサイトの改善に取り組みましたよとアクセシビリティ改善のために約3万5千ポンドを投資3万5千ポンドは約700万円ですね大した額じゃないなその結果サイトからの年間オンライン売上は約1300万ポンド増加しました約26億円増加しました

え?やっぱり投資対効果がエグすぎるほんと?なんか他のもあるでしょそれでこれまあもちろん他の要素もあると思うんですけど一応これはねあのW3Cのケーススタディで書いてますねうんまあはい情報源としては結構しっかりしてるというかまあだとしたらじゃあ我々も文字起こしした方がいいですねいやまあそうなんですようんうんうん

でもスーパーマーケットとか確かにこれめちゃ効果ありそうだな一番効果出そうな業界だなって気はするけどねみんな使うからってことですよね特に高齢者とかだと便利じゃないですか多分この辺とかってウェブでやるのかな今までそういうウェブでやれなかった人たちができるようにしたってことじゃないですかでも26億円はでかいですよ年間で

まあまあそうですね700万で26億増やすのはやばいですねもちろんね他の完全に分離できることじゃないと思うんであと次がねイギリスの金融サービスの会社でリーガル&ジェネラルグループってところがあるんですけどここの会社はWCAGってさっき出てたの

ガイドラインに基づいてウェブサイトを再構築しましたとその結果オンラインでの売上が大幅に増加って書いてあってここはちょっと具体的な数値は書いてないですとあとはサイト構造が効率化された結果年間のサイト保守費用が約20万ポンド削減されました約4000万円コストカットになりましたとその結果の投資に対する回収期間っていうのが12ヶ月で終わったよみたいな

これもねW3Cのケーススタディの例ですねあとSEOの事例もあってこれも同じとこだなこれも同じリーガル&ジェネラルグループなんですけどここは自然検索トラフィックはアクセシビリティ改善して公開した結果公開後24時間で25%増加し最終的に50%増加しましたウェブからの流入がめっちゃ一気に1.5倍になったよ最終的に

それはなんかありそうですねうんていうのでこれも全部W3Cからの掲載になってますねはいはいというので結構バカにならない効果があるというかうんというのがアクセシビリティの世界のお話でございましたはいありがとうございますありがとうございます意識しておくべきですねうん公開するサービスならなおさらですねまあそうねうん特にCM系だよねだから本当にはいうん

全く意識したことないですねお便り来るまで全く意識したことなかったですオレンジ惑星にしようかな急にってなりますよね急にって言ったのかな急にって言ってたのかユニバーサルのユニーで言ってきたのか変わってるリアクションユニーユニバーサルデザイン見るとユニーって言うやつがいるこの資料ユニーなーって言って

ネタが伝わってるといいですね伝わんないよ今まで赤だったのに急にオレンジにしてユニーね君ユニーね何それ

じゃあちょっとエンディング企画いいですかすいませんウェブアクセシビリティの文脈でデジタル職ウェブアクセシビリティ導入ガイドっていうのを出してるんですけどそこのURLですねマツビのファイル名が20240329アンダーバーイントロダクションアンダーバーtoweba11y.pdfってなってるんですよweba11yねこのa11y

これはアクセシビリティなんですよ言っちゃったそれがクイズになるのかと思ったこれですねヌメロニムっていう間の文字数を数字にするやつですかはいこれは他にもねKubernetes K8Sとかありますけど他にもあるんですよっていうのでちょっとクイズにします一番長いのは誰が出せるかゲーム違います言うんで何の略かクイズですはい

いきます第1問O11YO11Y数えるのがきついなこれ数える必要はないのかもしれないですけどね雰囲気こんぐらいだろうでYゲームを理解できてないかもしれない略ってことですかO11YがK8Sって言ったらKubernetesが答ええーじゃあこれちなみにエンジニア業界で結構飛び交う言葉です

えマジではい11Yオライリー素晴らしい答ええノリさんお願いしますオンリーフォーユーマイハッピーなんか素晴らしいありがとうございます正解はですねオブザーバビリティですオブザーバビリティね最近出てくるというかよく見るんで僕覚えておいて損ないかなと思います11Yこれは出てこないわ

あとは行きますね次D11ND11NABCD11N11Nなんとかテーションですなんとかテーションドキュメンテーションノリさんはドキドキフォーメーションなんだそれすごいなわかんないけどさなんか

サークルのバレーのサークルとかで男女隣り合わせにするドキドキフォーメーションねドキドキフォーメーションドキメンテーションですみたいな感じでL10NがローカリゼーションとかN11NでノーマリゼーションとかP13Nでパーソナリゼーションとかそういうのがあるんで

i18nしかわかんないなi18nインターナショナリゼーション多言語用のライブラリー多言語化対応するためのライブラリーとかでよく使われるイメージある確かにそうです確かにとかあるんでそういう文字数字みたいなやつが最近よく見るなと思ったんで軽く出してみました他にもあるんですが

覚えておくといいと思いますぜひ覚えてくださいじゃあ締めますねハッシュタグひまじんプログラマーでSNSのXでフィードバック募集してますので本日のエピソードの感想とかあとはこういうのを

見とくといいよとかあればお願いします昔あったドキドキフォーメーションシチュエーションとかねそれが一番面白いですねドキドキフォーメーション学生時代のドキドキフォーメーションあるかそもそもね男女が絶対隣り合わせになるじゃないですか中学校いつまでだっけ高校は違かった気するな

覚えてねー覚えてないですけどあれもなんかドキドキフォーメーションみたいなもんなんで確かになだってね赤外ってドキドキフォーメーションチェンジだもんねあれドキドキフォーメーションチェンジですそういうドキドキもありますけどこの席めっちゃ先生に刺されやすい位置やんとかも結構ドキドキフォーメーションじゃないですかドキドキポジションだよそれそうなんだよフォーメーションじゃないですそれもD11Aのかもしれない新しいの出てきた11かどうか分かんないけど

あとはポッドキャスト説明欄からGoogleホームで番組の要望・感想・質問お待ちしてますエピソードじゃなくてチャンネルの説明欄からスラックオンラインコミュニティひまプロ談話室の参加申し込みホームもあるのでそちらもお願いしますぜひお願いしますお願いします

最後に各種ポッドキャストプラットフォームのフォロー高評価もお願いしますよろしくお願いしますフォローお願いしますはいそれではまた次回バイバイバイバイ