(山崎さん）それでは、Webアクセシビリティとネコメシでの取り組み等で発表させていただきます。 株式会社ネコメシの山崎と申します。どうぞよろしくお願いします。 はい、最初に会社紹介です。株式会社ネコメシ Webアプリケーションや、Web サイトの制作等を主な事業とする受託の制作会社でございます。 社員数は現在10名です。うち半数がフロントエンドエンジニアと言うんですけれども WebサイトやWebアプリを実際に実装するといいんですけれども、そういう役職に付いております。 フルリモートOKでして、コロナ渦ということもありまして 基本的にフルリモートで、業務を遂行しております。 自己紹介、山崎規弘と申します。 フロントエンドエンジニアです。今年はベイスターズが低迷しておりますので、非常に悲しいです この写真は、私が落語をしているところなんですけれども、たまに落語をします。 5代目古今亭志ん生は神です 今日のスポンサーセッションで、お話をされるされたですかね。フォントおじさんいらっしゃると思うんですけれども この前、なんと高校の大先輩であることが発覚いたしました。群馬県民です。 はい、今日はですね。以下の四つのことを、話しさせていただければと思います。 Webにおけるアクセシビリティについて 業界におけるWeb アクセシビリティの認知度 あなたにもできるウェブアクセシビリティ ネコメシての取り組み ということでお話をさせていただきます まず最初、Webにおけるアクセシビリティについて これはあくまで例なんですけれども、これ使ったことがあるというのは話しいたします。 一つにはですね、代替テキストというものがございます。 これは何かと言いますと、その名の通り写真などの画像を代替する代わりとなるテキストなんですけれども これはどういうことかといいますと、例えば私は晴眼者です。視覚に障害がございませんので 視覚から情報を取得することができるんですけれども、全盲の方であると、例えば、そうはいかないわけですね。 そういった方がどのように情報取得するかと言うと、スクリーンリーダーという画面を読み上げてくれるソフトを 使うことがあるわけです。例えば猫の写真にですね。猫の写真というふうに、この代替テキストが入っていれば そのスクリーンリーダーが、猫の写真というふうに読み上げ読み上げてくれますので、視覚に障害があっても そのように情報を取得するということができるということになります。 あるいは聴覚障害については、字幕やキャプション、書き起こしのテキストというものが非常な助けとなります Web上にですね、動画やポッドキャストとか、そういった音声メディア音声を伴うメディアというのは 多くあると思いますけれども、聴覚障害があるとそこから、情報取得することができないということがあります そのような場合でも、字幕やキャプション、動画に字幕やキャプションがあったりとか Podcast には書き起こしのテキストがあったりすると、視覚によって文字を読むことによって 情報を取得することができます。このようなことが適切であれば、視覚障害や聴覚障害があったとしても 情報にアクセスすることができますので、このようなことがあくまで一例なんですけれども Webにおけるアクセシビリティの例ということで、いえるのではないかというふうに思います はい、それではそのようなWebアクセシビリティが、業界としてWeb業界として、どのように認知されているか という話なんですけれども、freeeサイバーエージェントサイボウズウェブアクセシビリティに関する調査結果を 公開という記事が、今年の2月に公開されました。 そこからの引用でございます。円グラフ表示されていますけれども、 Webアクセシビリティの内容を知っているか　38% 知らないが　29.3% 聞いたことはあるが内容は知らないが32.7% ということでウェブのアクセサリーと知らない内容は知らないというの方が、62%とを 知っている人を大きく上回るとふうにいえるとおもいます。 これは、やはりちょっと、残念な結果かなぁというふうに思っております。 またこの結果がですね、私の実感としても、一致するところがありまして、 私は去年2020年に転職活動して ネコメシ社に入社したんですけれども、他の企業も受けまして面接で質問すると 「ご質問ありますか？」と聞かれて質問する。その時にウェブアクセシビリティに取り組んでますかとか 詳しい方いらっしゃいますかという質問をしたんですけれども、大体の会社であまり芳しくないような回答が ありました。そもそもアクセシビリティ知らなかったとか、ちょっと的外れな回答されたいだとか 酷いとこになると明らかにそのアクセシビリティを軽視されているような発言をされたりしたことがありまして 残念に思っていたんですけれども、私の経験としてましても、やはりちょっとその業界として、認知度が低いのではないか というのは実感としてもあるところでございます。 はい、このように、ちょっと業界の話、Web業界の話をしていますと ちょっと、お聴きの皆さんが、俺には関係ないんじゃないかとWeb業界関係ねえからと、 思われるかもしれないんですけれども、そんなことないんですね。これを聞きの方にも、 できるウェブアクセシビリティ向上させることがありますので、そのお話をいたします。 あなたにもできる、WebアクセシビリティということでTwitterですね Twitter、おそらくアカウントを、多くの方が持っていると思うんですけれども投稿する画像に代替テキストを、 先ほど申し上げた代替テキストを、入れることができるので、そのご紹介です。 はい、これは、Android の Twitter のアプリのスクリーンショットなんですけれども 左の方の画像が、画像を選んだところですね。画像を選びますとこのように画面右下の方にですね オルト　＋ ALT というアイコンが出ております。これはオルトと読むのですね。 オルトとは、オルタナティブの略称で、代替かわりという意味ですね。代替テキストは ALTと呼ばれることもあります。 このオルトのアイコンを押下すると、写っている右側の方のスクリーンショット を代替テキストを入力するという画面に移動します。 代替テキストというのは、その写真をテキストでもって伝えるものですから私はこのように入力いたしました。 写ってる写真と致しましては、猫がちょっと物憂げな表情をしている写真でして このことを伝えたいと私思いましたので、アンニュイな表情を しているモカ（猫）の写真というふうに代替テキスト設定いたしました。 やはりですね。画像投稿するということは、伝えたいことが、皆さん何かしらあるかというふうに思います。 この写真でしたら猫の画像の、猫の可愛いさを伝えたいだとか、 ネタ画像を投稿するとしたらその画像を見て笑ってもらいたいとか。そういう意図あるかなという思います Twitter上にももちろんですね。視覚障害のある方いらっしゃるわけですね。 私も、フォローして頂ける方いらっしゃいまして、そのような方に対して、私の動画が伝わらないというのは あの非常に避けたいというふうに思っておりますので、そのような方でも伝わるように、 代替テキストを設定するようにしているということでございます。 これは、その格別な知識がなくてもできることかと思いますので、これを見た方は、是非今度 画像投稿する時には、代替でテキストを設定してみていただければ、というふうに思っております はい、ネコメシでの取り組み。会社としてどういう取り組みをしてるかという話になります ネコメシがもちろん案件を受けまして、で、その案件に対してですね。Webアクセシビリティが実装の要件として 求められている場合、また求められていない場合、どちらもそれはございます。 はい、求められている場合であれば、話は早いような気がするんですけれども 必ずしも、そうはいかないところがありまして、要件として入っていてもクライアントさんがですね アクセシビリティに対して正しく理解されていなかったり、誤った知識を持ってるということもあります そういう場合には、やはり啓蒙というか、こういうことが必要なんですよとかそういうことを やる必要があるということですね。また、その場合には実装だけではなくて、運用まで見せる その作った時には、アクセシブルであっても、運用の過程でアクセシビリティが損なわれるということはありますので そういったことも見せる必要がございます。また実装の要件として求められていない場合ですね このような時に何もやらなくていいかというと、もちろんそんなことはなく、我々はどうするかというと 勝手にやるわけですね。はい、勝手にやってしまいます。勝手にやってそれを言うわけですね。 アクセシビリティの観点から、ここはこういうふうにしましたとか。 ここのリンクテキストは、こういうふうになっております アクセシブルアクセシブルにするために色のコントラスト加工してます。 そういったことを言います。で言うことによって、やはり、その認知度が上がると思うんですね。 そのアクセシビリティということに対して知識がなかったり、知らなかったしたとしても アクセシブルな実装をしました。こうしました。というふうに言うとクライアントに伝わると。 そういうとやっぱりちょっと、喜んでもらえたりすることも多いですし。知識が広がりますので ゆくゆくは要件として、なるように取り組むということで我々は活動してるとして Web アクセシビリティの向上に寄与できているのではないか、というふうなことを ちょっと大袈裟かもしれませんが思っております。 はい、ここでアクセシビリティなぞかけをひとつ アクセシビリティとかけまして、「あのね、次のバッター、左バッターで、あいつね、あの引っ張りしか能がないから 流し打ちできないから、みんなシュートしようか。あのね、ライトに、ライトによって レフトとセンター、ライトに寄っちゃって。もっと寄って寄って。 レフトは、誰もいなくていいよ。センター寄っちゃって。レフト誰もいなくていい。 レフト誰もいなくていいから」と解きます。 その心は no one left 誰もレフトにいない behind no one left behind 誰も置いていかない ご清聴 ありがとうございました。