本日は世界各地でアクセシビリティを考える一日、GAAD（Global Accessibility Awareness Day）の日ですね！

アクセシビリティはWebサイトやアプリケーションのデザインや実装に関わるデザイナーやエンジニアはもちろん、サービスのコンテンツ作成や資料作成においても配慮が必要であり、さまざまな職種の人に関わるものです。

グッドパッチでは、しばらく前から社内の有志を中心にアクセシビリティ向上の取り組みを行っており、その活動の一環として、全職種向けにアクセシビリティの理解を深めるための社内勉強会を実施しました。

今回の勉強会では、社内でも特に関心があるUIデザイナーやエンジニアに、アクセシビリティの基礎知識から具体的な取り組みや事例などをLT形式で発表していただきました。勉強会はランチタイムに開催したのですが、多くの参加者が集まってくれました！

この記事では、それぞれの発表者のLTの内容をハイライトでお届けします。

「Web Accessibility」のWHAT & WHY?

1人目の発表者はフロントエンドエンジニアの杉吉さんです。杉吉さんはアメリカ育ちで、父は障害者向けのキャリアカウンセラーをやっており、アクセシビリティは当たり前の存在だったと言います。

LTでは、アクセシビリティとは何か、アクセシビリティがなぜ重要なのかを紹介しました。

  • アクセシビリティの意味は「Access + Ability = アクセスできること」
  • アクセシビリティは「そもそも使えるかどうか」であり、ユーザビリティの基盤となるもの
  • 日本国内では7.6%の人は障害を持っている。また、50%は老眼の世代と言われている
  • アクセシビリティに配慮すれば、すべての人が恩恵を受けることができる
  • 多くのアメリカ企業が、アクセシビリティで訴えられている
  • 日本でも障害者差別解消法の改正により「合理的配慮の提供」が法的義務になる

法改正などを踏まえて、今がアクセシビリティに取り組むベストタイミングだと伝えました。また、アクセシビリティについて分からないことがあれば、社内のSlackチャンネルを活用しようといったメッセージで締め括られました。

アクセシビリティの取り組み事例

2人目の発表者はUIデザイナーの乗田さんです。彼はもともとフロントエンドエンジニアとしてのバックグラウンドを持っており、クライアントワークでもアクセシビリティの向上に取り組んできました。

デザイナーのためのWCAGの歩き方
近年、日本国内でのアクセシビリティの取り組みは官民の組織区分にかかわらず活発なものとなっています。特に昨今ではデジタル庁 …

今回はクライアントワークにおけるアクセシビリティの取り組み事例について紹介してくれました。

  • とある医療向けWebサービスでWCAGをもとにアクセシビリティ検査を実施し、さまざまなフィードバックを行った
  • 例えば、文字の行間が狭いと人によっては読みづらい場合がある。そのため、WCAGでは1.5倍以上が望ましいとされている（WCAG 2.1 – 1.4.8 視覚的提示）
  • その他にもコントラスト、クリック可能な要素のサイズ、フォーム送信時の確認などにも課題が見られた
  • OSの支援技術を自分で触ってみることで、アクセシビリティの理解を深めることができる
  • 漢字にルビを振ったり、常用漢字を使うなど「やさしい日本語」から始めてみよう

発表の中でアクセシビリティは「特別対応ではなく、日常的に取り組むことが大事」というメッセージとともに小さく・できることから始めることの重要性を説き、参加者からも「できることからやろう」というコメントが挙がっていました。

今日からやってみたくなるアクセシブルなデザイン

3人目の発表者はUIデザイナーの杉本さん（haru）です。杉本さんはGoodpatch Blogでもアクセシビリティに関する記事を執筆しています。

ウェブアクセシビリティ対応、どうすれば？　法改正のポイントと5つのステップを解説
アクセシビリティ？　ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が …

今回は、UIデザインを行う際に役立つアクセシビリティのツールやAppleのアクセシビリティの思想について紹介しました。

  • どれだけ良いUIを実現しても、それを享受（アクセス）できなければ意味がない。だからこそアクセシビリティが重要
  • デザイナーは普段、「自分」の感覚でデザインを考えることが多いが、実際に使うのは「他の誰か」であるため、他の誰かの感覚を通して考えてみることが大事
  • StarkのFigmaプラグイン、Chrome拡張機能を使って、コントラストや文字サイズ、画像の代替テキストのチェックや色覚特性のシミュレートなどができる
  • IllustratorやPhotoshopでも「校正設定」の機能を使ってP型（1型）色覚などの色覚特性を確認できるので印刷物のチェックに使える
  • その他にもWAVE、Alt & Meta Viewer、taba11yなどを紹介

最後にアクセシビリティに真摯に取り組んでいる企業としてAppleを取り上げ、AppleがPRのために作った動画で出てくるフレーズで締めくくりました。

When technology is designed for everyone, it lets anyone do what they love.
テクノロジーがすべての人のためにデザインされていれば、誰もが好きなことをできます

どれだけ知ってる？ iOSのアクセシビリティ機能

4人目の発表者はiOS Developerの加藤さんです。加藤さん自身もコントラストに対して課題があり、最近プレイしたゲームでもアクセシビリティの必要性を感じたそう。

今回は、iOSのアクセシビリティ機能を知ることでどんなアクセシビリティが必要とされているか学べるとの考えを基に、その一部を実体験とともに紹介しました。

  • iOSにはボタンの認知を助けるために「ボタンを目立たせる機能」がある。この機能がなくてもボタンが押せる・押せないが分かるようにデザインすることが大事
  • iOSには白背景だと見にくい人のために「色を反転する機能」がある。写真や動画などのメディアは反転しないように指定すること。また、実質的には背景色を暗くする機能になっており、デフォルトで黒背景のアプリは反転されないように対応が必要。この機能を使わなくても良いように、ダークモードに対応しよう
  • iOSにはコントラストが低いと見にくい人のために「コントラストを上げる機能」がある。実装時にはカラーパレットで通常の色とは別に、コントラストが高い色も指定しよう
  • iOSにはスクリーンリーダーとして「VoiceOver」がある。ジャスチャー“のみ”で操作するコンポーネントだと操作できないことがあるので気をつけよう

それぞれのiOSの機能の説明に加えて、加藤さん自身や周りの人たちがその機能を使っているという体験談を紹介し、身近な人たちもアクセシビリティの恩恵に授かっていることを教えてもらいました。

あなたのAppは目を閉じても使えますか？

5人目の発表者はiOS Developerの中田さんです。中田さんは個人で開発しているアプリケーションでもアクセシビリティに配慮しているとのことで、今回はスクリーンリーダーの「VoiceOver」を対応する意義の紹介と音声読み上げのデモを行いました。

  • WWDC18のセッションの１つに「VoiceOver App Testing Beyond The Visuals」があり、VoiceOverについて詳しく紹介されている
  • VoiceOverをサポートすることでAppがよりインクルーシブになるだけでなく、新しい視点や体験を考えるチャンスになる
  • 上記のセッションの中で1つの質問がある。それが「Is your app so easy to use you could use it with your eyes closed? – あなたのAppは目を閉じても使えますか？」
  • VoiceOverでうまくナビゲートできない場合、コンテンツの順番など視覚的にも問題があるかもしれない
  • まずは目を閉じてVoiceOverを使ってみる。その後に目を開けて、視覚的に使ってみる。そうすることで音声の読み上げと視覚的な情報が一致しているか確認できる

実際にVoiceOverを使って、音声読み上げに配慮されている場合と配慮されていない場合のデモを行い、参加者からは「分かりやすさがこんなに違うんだ……」といったコメントもありました。

WWDCのセッションやVoiceOverの詳細については、以下の記事でも紹介しています。

参加者の声

どのメンバーのLTも熱量高く、とても学びの多い会となりました。勉強会後にアンケートを実施したところ、満点をつけてくれた（5段階中の5）参加者がなんと100%！

ここからは、参加者の感想を一部ご紹介したいと思います。

・アクセシビリティに関する知識があまりなかったので、なぜ必要か、どうやったら実践できるか、気をつけるポイントなど広く学べる内容だったのがよかったです。今後もっと意識していこうと思えました。

・知識技術ノウハウのシェアだけでなくて、アクセシビリティは誰もが関わること、自分が見えているものが全てじゃない、誰かの感覚を通してものごとを見る、誰もが自分らしく、という根本に立ち返る視点を持ててとてもよかったです。皆さんが普段からどんなことに気を配り、デザインをされているかも伺えてずっと感嘆していました。

・発表者の皆さまありがとうございました！新しい学びも多く、とても満足度の高い時間でした！今まで以上に他人事ではないという気持ちになったのと、「やさしいデザインしたい！」という気持ちになりました。

今回の勉強会を実施してみて、改めてアクセシビリティの重要性を感じるとともに、アクセシビリティに取り組む上での課題も見えてきたので、課題解決に向けて継続的に取り組んでいきたいと思っています。

グッドパッチでは、アクセシビリティに関する課題をお持ちの企業様をご支援しています。ぜひ、お問い合わせからご連絡ください。

Share on

Masaki Osumi
2016年にグッドパッチにフロントエンドエンジニアとして入社し、現在はエンジニアリングマネージャーとしてマネジメントにも関わっています。ソフトウェアのデザインとエンジニアリングに関心があります。