Webアクセシビリティについて、お話させてください
この記事はCODE BASE OKINAWA Advent Calendar2022年12月23日の記事になります。
こんにちは。と改めましてコードベース12期の宮里です。
私は現在、マークアップとデザイン(バナーメイン)のお仕事をしています。
クライアントの課題を一緒に解決しながら、より多くのエンドユーザーが利用できるモノを作る。
これは仕事をする上で私の目標であり、意識していることです。
この「より多くのエンドユーザー」とは、健常者だけではなくハンディキャップがある人達も含めてのことを指します。
なぜそう思ったのか
きっかけは数年前に参加したフロントエンドのイベントでした。
その時に登壇していたのが目の不自由な方で話の中で冗談混じりに
「僕だってエ◯動画を見たい！！」と言っていました。
この一言は私の中でかなりの衝撃を受けました（いろんな意味で）。
確かに何かサービスを作る時はメインターゲット、サブターゲットそして使いやすさ(ユーザビリティ)などは考えていましたが、ハンディキャップの方を考慮していたかというと全くと言っていいほど意識していなかったからです。
そして「どこにどの情報があるかは耳でしか判断ができない。だから僕にとってはスクリーンリーダーが凄く大事」と言い、実際にどのように利用しているのかを見せてくれました。（実演してくれたのは一般的なWebサイトです）。
こちらも参考なります。
参考動画：視覚障害者（全盲）のウェブページ利用方法
この頃からWebアクセシビリティについて興味を持ち始めました。
アクセシビリティとは
まず、皆さんは「アクセシビリティ」についでご存知でしょうか？
英語でAccessibilityこれは「近づきやすさ」「利用のしやすさ」という意味になります。
はい！ざっくりですよね。
目の悪い方、高齢者向けに文字を大きくする。
→視力が低い人にはメガネを着用するとかも該当するかと思います。手や腕が不自由な方にはハンズフリーで通話できるようにする。
耳の不自由な方には通知を光で教える。
→ドラマ「silent」で目黒 蓮（Snow Man）さんが演じる想くんが住んでいる家のインターフォンの知らせ方とかですかね。
その他にも骨伝導式イヤホンなど、みなさんが便利に感じていることって何気にアクセシビリティと繋がっていたりします。
障がいの種類で「すること」と「しないこと」のポスターというものがあるので、興味のある方は御覧ください。
アクセシビリティは障がい者だけなのかと思っていたのですが、高齢者や視力が悪い人なども含まれることに驚きました。
Webアクセシビリティとは
そして私は仕事柄Webについて関わることが多いため、アクセシビリティの中でも「Webアクセシビリティ」に注目をしました。
Webアクセシビリティは、様々な人がどの場面でも使用しているデバイスで利用しやすいWebサイトやアプリケーションを作成することが基盤となります。
日本でもJIS規格で定められています。
実際に読んでみたのですがやることが多い！これを全部やれるのかと言うと結構厳しそう…。
デジタル庁が公表しているガイドブックも読んでみると勉強になります。
ウェブアクセシビリティ導入ガイドブック
何も考えずにとりあえずデザインに沿ったコーディングとスピードが勝負！と思っていた私でしたが調べていくにつれ、それぞれが抱えている問題点など知ることができました。
ちなみに私はアクセシビリティ的にANAさんのサイトが好きです。
マークアップの中で何ができる？
それを踏まえた上で私の仕事では何ができるのか考えてみましょう。
すぐにでも実行できそうなものを書き出してみます。
見出しやリンクなど文章構造を考えながらマークアップをする
文字や情報が含まれている画像には代替テキスト（alt）を設定する
代替テキストには余計なテキストは入れないようにする
ランドマークロールを設定する
フォームのinput要素やラベルはセットに説明をきちんと表記する
「大見出し→小見出し→本文」と自然な読み上げ順序にする
（これはデザイナーさんも意識して欲しかったり…）デバイスフォントを意識する
「場 所」「日 時」と単語の間に半角スペースで入れないようにする
などなど、意外に意識することが多い….。
納期に追われたり、デザイン的に組みづらかったりなどで取り入れられないものもありそう。
正直、ここをピンポイントで意識していると工数もコストもかかります。
状況をみながら「できるところ」「難しそうなところ」を分けつつ、
まずは自分で対応できるものから実行し、一緒に仕事をするメンバーにアクセシビリティの重要性を理解してもらえるように共有していかないとなと感じました。
現在ではアクセシビリティ専門の職種もあるみたいですね。
これから私は大規模な案件などで、子どもから高齢者まで多くの方が利用するサイト制作にも携わります。デザイン的な見た目ももちろんですが、多くの人が利用できるサイトになるように、できる限り取り組めていけるようにしていきたいです。
最後に…
今回、私が思うCSS設計かアルバイトを通して感じた更新業務（運用しやすいコードは何か）を書くかで悩んでいました。
ですが、色々考え最終的には原点に戻ろうとなり、コーディングに興味を持ち始めたきっかけとなった「Webアクセシビリティ」について話をしよう！に辿り着きました。
エゴになりますがデザイン通りにコーディングしているだけではないよっていうアピールを無意識にしたかったかもです。笑
ちなみにアルバイトを通して感じた運用しやすかった更新業務については、とても勉強になったので別途書きます。たぶん…。
そして私事ですがSnow Manにどハマりした事をここで報告させて頂きます。めっちゃ語りたいのですが、何の記事なのか分からなくなりそうなので割愛させてください。
ちなみに箱で推しつつ深澤辰哉が好きです。
好きな曲はInfighterです。
どうぞよろしくお願いします。
みなさん2日早いですがメリークリスマス！
そして来年も楽しい1年になりますように！