アクセシビリティの取り組みの第一歩
こんにちは、デザイン戦略部のemuです。
会社でのアクセシビリティの周知や、取組みについて悩んでいる方も多いと思います。
本記事では、そういった方々に少しでも参考になればと思い、自分がアクセシビリティの取り組みの第一歩としておこなった内容を紹介します。
はじめてのデザイン記事投稿ですので、少し自己紹介をさせていただきます。
大学在学中にWebサイト制作の仕事を知って以来、制作会社で10年以上、Webデザインとマークアップに携わってきました。
これからはユーザーの道具となれるようなアプリのUIデザインに挑戦したいと思い、2023年にNewbeesにジョインしました。
現在は、デザイン戦略部のメンバーと協力しながら、恋活・婚活マッチングサービスや、フリーランス管理システムのUIデザイン、Web版のコーディングを担当しています。
私は京都在住なので、おすすめスポットを紹介します。
毎年正月に、友人と下鴨神社で初詣をすることが習慣となっており、1番気に入っています。
ぜひみなさんも京都に訪れた際は、行ってみてください。
詳しくはインタビュー記事もありますので、ぜひご覧ください。
勉強会の開催
Newbeesではサロン（※）という場を設けており、勉強会やLT大会を開催しています。
Webデザインを経験するなかで、「アクセシビリティは、アプリを制作するうえでも必要なことなのではないか」と感じ、先日アクセシビリティについての勉強会を行いました。
※サロンとは？
毎週金曜16時からおこなう、社内勉強会のことです。
基本的には自由参加制で開催していますが、ノウハウの共有や視野を広げるキッカケの場として、部署の垣根を超えて大人数が参加しています。
また、採用候補者の方が参加できる勉強会も随時開催しています。
アクセシビリティとは？
まず「アクセシビリティとは何か？」について簡単にですが触れておきます。
Accessibilityという単語は、
access + ability（能力）
という言葉の組み合わせで「アクセスを成立させる能力」という意味です。
一般的には、利用者が機器・サービスを円滑に利用できることを表します。「アクセス」と聞くと場所や交通を思い浮かべてしまうと思いますが、物や情報もその対象に含まれます。
みなさんもアプリやサイトを利用する際、以下のような状況に遭遇した事があるのではないでしょうか。
文字が薄くて読みにくい
手に怪我をして細かい操作ができずリンクを押し間違える
画像スライダーが自動で動き、内容をじっくり見ることができない
こういった機器・サービスを円滑に利用できない状況は、アクセシビリティが悪いといえます。
アプリやサイトを制作する際に、アクセシビリティの知識があると以下のように設計・デザイン・実装することができます。
文字と背景で高いコントラストを保つ
隣接するリンクやボタンは十分なサイズや余白を確保する
動きのあるコンテンツはユーザーが制御できるようにする
誰でも情報へのアクセスが「できない、しづらい」状況があることを理解し、「できる、しやすい」にすることがアクセシビリティの基本です。
なぜアクセシビリティ勉強会を行おうと思ったか
ユーザーに良好な体験を提供するには、まずコンテンツにアクセスできることが必要不可欠です。
そのため、事例を交えて、何が障壁となり、どこに気を付ければアクセシビリティが向上できるのかを、知ってもらうことが大切と考えました。
障がいがある方やご高齢の方だけでなく、誰にでも日常生活において、体調やデバイスの不調、まわりの環境などでサービスが使いにくいと感じる場面はあります。
もし、自分がそういった状況になったときに使えないサービスがあったら、「嫌だ！」という気持ちと「明日は我が身」の思いでアクセシビリティに取り組んでいます。
現在では、パソコンやスマートフォンが普及し、デジタルにおいての障壁をなくしていける環境は年々整ってきています。
だからこそ、デザインや技術で解決できる部分は社内に共有し、アクセシビリティを知ってもらいたいと思いました。
発表した内容
勉強会では「今日からはじめるアクセシビリティ」というタイトルで、以下の内容を話しました。
アクセシビリティって何？
なぜアクセシビリティ対応が必要？
さまざまな誤解
具体的に何をすればいい？
どうやって学べばいい？
アクセシビリティについては「デザイニングWebアクセシビリティ」という良書があるのですが、それをベースに、自身で得た知識を補足するような内容を話しました。
勉強会の内容から一部ではありますが、見た目に頼ったフォームのデザインの事例を紹介します。
見た目に頼っているデザインの改善例
上部のNG例のように「赤の項目は必須です」とし、必須の入力欄を赤色でデザインしてしまうと、色が伝わらない状況では、どの項目が必須であるのかがわかりません。
OK例のように、必須項目には「必須」のラベルを記載しつつ、色でもわかるようにするのが良いです。
色が判別しづらい状況というのは、色覚に障がいを持っている場合だけでなく、健常者の場合でも、モニターの色を調整していたり、野外で太陽光の影響で画面が見ずらい状況があります。
色だけに頼ったデザインをしてしまうと、どこが必須項目であるのか判別が困難になり、最悪の場合、ユーザーはフォームから離脱してしまいます。
アクセシビリティの知識があるだけで、このような誰も得をしない状況を回避することができます。
組織への導入
アクセシビリティの取り組みは、1人だと限界があるという悩みをよく聞きます。
そこで、「Webアプリケーションアクセシビリティ」の7章「アクセシビリティの組織導入」を参考に、社内のSlackにてアクセシビリティチャンネルを立ち上げました。
勉強会の最後にチャンネルを告知することで、嬉しいことに多くの方に参加してもらえました。
その際に、できるだけ敷居を低くして気軽に参加・投稿してもらえるように心がけました。
嬉しかった声
Newbeesにも有識者がいて「一緒にアクセシビリティをやっていきましょう！」と言ってもらえたり、「今アクセシビリティの書籍を読んでいます」「今度読んでみます」という声ももらえました。
アクセシビリティに興味を持っている仲間が可視化されたのは、とても心強かったです。
ほかにも「さっそくVoiceOver（MacやiPhoneに内蔵されている音声読み上げ機能）を使ってみた」という行動派のメンバーもいたり、「アクセシビリティという言葉は知っていたが、具体的な内容は知らなかった」という声ももらえました。
デザイナー、ディレクター、エンジニアなどそれぞれの職種で、ポイントは違えど新たな視点が増えたのならとても嬉しく思います。
Newbeesのデザイナーが取り組んでいること
まずは小さな部分ですが、色についてコントラスト比を意識してデザインをおこなっています。
ブランドカラーはイメージも大切ですので、WCAGの基準値に到達できないこともありますが、できる範囲で高いコントラストを目指しています。
例えば、ボタンのカラーを決定するとき、いきなり大きく変更してしまうとユーザーが混乱してしまうので、バランスを見てチームで意見を出しながら選定しています。
障がいは0か100ではなくシームレスに存在しているので、基準値を達成できないから諦めるのではなく、基準値に近づけることも意味があります。
最後に
「アクセシビリティは何か？」について知ってもらうことは、今回の勉強会でクリアできたのではないかと思います。
多くの人は、故意にサービスを使いづらくしているのではなく、知らないうちにアクセスできない・しづらい壁を作ってしまいます。
ちょっとしたアクセシビリティの知識があるだけで、その壁は取り払えると思っています。
形式的な取り組みはまだまだ先になるかもしれませんが、少しづつアクセシビリティを当たり前に考えられるように社内浸透させていきたいです。
アクセシビリティは、NewbeesのPURPOSEである「テクノロジーで幸せを創り出す」を実現するために、重要な施策の1つだと考えています。
これからも、社内でアクセシビリティが忘れ去られないように、チャンネルの運用や勉強会を継続していきたい次第です。
参考文献
Newbeesでは一緒に働く仲間を募集しています
Newbeesはフルリモート＆フレックス勤務を導入し、場所にとらわれない自由な仕事のやり方が可能です。詳細は以下をご覧ください。