コンテンツ作成時のアクセシビリティのチェックポイント〜だれでも読みやすい記事への道
見出し画像

コンテンツ作成時のアクセシビリティのチェックポイント〜だれでも読みやすい記事への道

自分が書いた記事。あらゆる人に読んでほしいと思っていたのに、たとえばVoiceOverのような音声読み上げの機能をつかうと、まったく意味がわからない……なんじゃこりゃ!

noteのPRチームに所属するわたしは、今年の4月にそんなカルチャーショックを受けました。

実はnoteは7周年を迎えた4月7日に「今後はアクセシビリティの向上にも力を入れます」と宣言していました。

と言いつつも、具体的にはどんなことをしたらいいんだろう?

サービスのUIを改善する開発に関わるメンバー以外はなにを意識したらいいんだろう? わたし以外にもそう思っている社員が多いのではと思って、企画したのが「アクセシビリティ研修(コンテンツ編)」です。

画像:社内のSlackで研修実施と参加を呼びかけている様子

このオープン社内報では、その後に入社した社員のみんな向けに「アクセシビリティってなに?」「コンテンツ作成では、なにに気をつけたらいいの?」を伝えたいと思います!

社内用に録画も残っているので、全貌が気になる方はぜひご覧ください。

======
オープン社内報とは?
一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。
本日の担当:PRチーム 森本
======


アクセシビリティ研修をやると決めるまで

もともとの発端はアクセシビリティプロジェクトチームの立ち上がり。毎週メンバーのみんながランチ会をしているので、そこに顔を出してみました。

アクセシビリティ。聞いたことはあるけど、具体的にはなにをしたらいいのか? 正直なところイメージが湧いてなかったのですが、わたしの解釈で要約すると「どんな環境下にあるだれでもサービスを使えるような状態にすること」。

障害者や高齢者のため、という固定観念が覆されました。思えばわたしも子どもを産んだ直後はベビーカーでの移動に四苦八苦して、公共交通機関やショッピングモールのアクセシビリティの重要さを実感していました。

音声読み上げの機能も、わたしは使ったことがありました。子どもが生後まもない頃は、抱っこしながら家事をしていたので、記事やKindleも音声で聞く機会がよくあったのです。

だれか特定のひとのためじゃない、みんなのため、自分のためでもあることなんだ! そんな当事者意識がフツフツと湧いたのでした。

社内に声をかけてみるまで

noteのサービスそのものをアクセシブル(アクセシビリティが考慮されて、だれもが使える状態)な設計にすることはもちろん大切なことです。

もうひとつ気になったのは、note公式アカウントをはじめとしたサービス運営側のメッセージはアクセシブルになっているのか?

みんなに伝えたい内容は、本当に届けられているのか? 「だれもが創作をはじめ、続けられるようにする」というミッションに沿って「だれもが」を意識した設計にできているのか?

noteのアクセシビリティプロジェクトをサポートしてくれている、freeeのデザイナー・magiさんの著書『デザイニングWebアクセシビリティ』を読んで「これは!noteのみんなに伝えなくては!」と使命感に駆られました。

画像:社内Slackで、アクセシビリティに考慮した記事にするための教材はなにか?をmagiさんに質問する様子

「みんなも読んでね」とは伝えられるものの、確実に周知したい。そこで、社内勉強会の形式で開催することにしました。

50名以上が参加する一大勉強会になった

note編集部のみんなやコンテンツを作る機会の多いチーム(PRやインハウスエディター、人事)、note proのカスタマーサクセス(法人に発信のポイントを指南することが多い)のみんなには必参加で。それ以外のチームも任意参加で呼びかけました。

結果は、参加者が50名を超える(当時の社員数は100名ちょっとくらい)一大勉強会になりました。

みんなの関心の高さがうかがえて、うれしい and プレッシャー。書籍を読み返しながら、絶対に伝えたいポイントをまとめていきました。magiさん、度重なる質問に丁寧な回答をありがとうございました!!!


アクセシブルなコンテンツの作り方とは

この記事では、勉強会のスライドとともにいくつかの注意点をご紹介します。あくまでもnoteの記事を作るうえでのものなので、ざっくりとした解釈で要点をかなりつまんだものであることはご了承ください。

勉強会のゴールに設定したのは、3つ。

「アクセシビリティとはなにかが、ひとに説明できる」
「記事を書くときに、気を配るべきポイントがわかる」
「より幅ひろいクリエイターが、note運営の発信する記事を読んで理解できるようになる!」

画像:勉強会資料で今日のゴールを示したもの

まずはmagiさんから、アクセシビリティの基礎・概要を説明いただきました。また、音声読み上げ機能をつかってnoteに掲載されている記事を読んでみる体験も、みんなにしてもらいました。


その後、わたしから記事作成で気をつけてほしいこととして伝えたのは、要点を絞って3つ。

1:画像
2:リンク
3:その他(タイトル、見出し、映像やPDF)

すべてに共通する基本原則は「本文を読んだだけで意味がわかるようにする」こと!

1:画像

画像といっても、写真、要点がわかるようにテキストを画像化したもの、図やグラフなどさまざま。雰囲気が伝わるように、視覚的に分かりやすいように、とそれぞれ工夫されたものです。でも、画像に適切なaltテキスト(画像の代わりになるテキスト情報)」が設定されていないと、音声の読み上げ機能で読んでいるひとには訳のわからない内容になってしまいます。

そんな困りごとを解消するのが、第一歩。

写真であれば「●●さんと●●さんが職場で談笑している」など、雰囲気とともに描写するのがオススメです。

PRチームでもnoteに投稿する前の原稿確認フローに「altテキストが設定されているか」を組み込むようにしました。


2:リンク

リンクも基本の考え方は、画像とおなじ。

テキストリンク、画像をバナーのように扱う、URLをそのまま貼る、こちらもパターンは色々あります。特にやりがちなのは「こちら」とテキストリンクにする使い方。

「こちら」と読み上げられるだけでは、リンク先がなんなのか、まったく想像ができないので、簡単にリンク先の概要を書くのがおすすめです。たとえば「詳細はこちら」ではなく「詳細はnote公式のお知らせ記事へ」に変えてみるとか。

URLもアルファベットの羅列に聞こえるので、テキストリンクにしておくと親切だなと感じます。


3:その他(タイトル、見出し、映像やPDF)

その他の工夫も「だれにとっても読みやすい効果」があることばかりでした。

たとえば長過ぎるタイトル。記事一覧や検索画面では途中で切れてしまうので、できれば収まる範囲(Googleの検索結果では30文字、ブックマークバーや履歴では10文字強)にしてみたり。

noteの目次機能でよく使われる「見出し」も分かりやすいように「単独でも意味が分かる」「具体的に内容を推測できる」「重要なキーワードは前に持ってくる」「難しい言葉は使わない」を心がけてみたり。

映像やPDFもリンクを埋め込むだけではなく、簡単に概要を書いておいて、リンク先に飛ぶべきか判断できるようにしたり。


参加したメンバーの感想

参加してくれたメンバーの満足度は95%!ほとんどの方にとって、初耳な情報が多かったようです。中でも印象に残ったことや、早速本業で実践したいことを聞いてみました。少し、こちらでご紹介します。

-----

✋アクセシビリティは、iPhoneのメニューにもあるのでぼんやりと言葉自体は聞いたことがありました。でも恥ずかしながら、これまで障害のある方のためのものだと思っておりました。

✋実際に読み上げ機能の音声を聞いてみることで、「この形でしか情報にアクセスできない状態だったらめちゃくちゃイライラするに違いない!!」という実感が湧きました。

✋noteページの音声の読み上げ時、思ったよりアクセシブルでないのが印象的でした。本で目の見えない方の体験談などは読んでいても、実際に受け取る感覚ってぜんぜん違うものだなと…あとは、今の状態でもnoteを使ってくださるハンディキャップのある方々のお話を聞き、決して彼らの気持ちを無碍にはしたくないと思いました。

✋記事を書くときには画像にAlt表記を入れること、基本的には画像は補完として使い本文だけで意味がわかることが大事という観点。

✋「本文だけで意味が分かるようにする」という言葉が端的に重要な観点を表していたと感じており、ずっと頭の片隅において意識したいと思いました。

✋画面上のラベルや、告知記事・ヘルプ・メールなど、アクセシビリティの観点から考慮できる箇所が多くあるので、まずは読み上げを意識するところから始めたいと思いました。読み上げ以外も、アクセシビリティの知識を身につけて、考慮ポイントを増やしていけるとよいなと思っています。

✋特別に何かする必要はなく、だれにとっても使い勝手のよい配慮をすることが重要だということ。

✋記事だけでなく、日々のメールなどから意識したいと思いました。具体的には、安易に指示語を使いすぎないことと、画像のファイル名に気をつけます。

✋さっそくプレスリリース作成時のチェックリストに、アクセシビリティに関連した項目を複数作成しました。

今後のnote

いまnoteでアクセシビリティプロジェクトと並行して進んでいるのが、投稿画面(エディタ)の刷新。

新エディタでは、みんながアクセシブルな記事を簡単に作れるような工夫が盛りだくさんだそうです。期待!

たとえば、画像のaltテキストの入力欄を設けたり、引用したいときには引用元を明記する欄をつくったり、文字の装飾や段落機能もできる予定です。

新エディタについては、他にもたくさんの要望を受けつけています!

またアクセシビリティプロジェクトも入口に立った段階なので、ユーザーインタビューにご協力いただける方も募集中です!

noteを運営する一員として、アクセシビリティの向上をプロジェクトメンバーだけに任せるのではなく、当事者意識をもってやっていきたいです。


※関連記事


今日のバリュー

クリエイター視点で考えよう / Creator First
note株式会社の事業の原点はクリエイターにあります。note株式会社のメンバーは、創作にかかわるすべてのひとと対話しながら、作品をつくること、つなげること、とどけることを手助けする方法を考えて実行します。

多様性を後押ししよう / Promote Diversity
私たちは多様性を重視します。幅広いクリエイター、幅広いユーザーが集まることで、より多彩なコンテンツが生まれ、それをもとに交流が始まることで、社会全体がより豊かで幸福な場所になることを信じています。


つねにリーダーシップを / Leadership
note株式会社のメンバーは、あらゆることに当事者意識を持って、率先して行動します。傍観でも、感想でも、批評でもなく、まず自分が行動することを重視します。どんなときも問題を解決する意志を持ってことに臨みます。

この記事が参加している募集

オープン社内報

最後まで読んでくれた方へ。note社の様子や採用情報などをTwitterで発信しています。

note社のヒミツ1:じつはnoteのノートがあるんです。
“だれもが創作をはじめ、続けられるようにする。“をミッションに、表現と創作の仕組みづくりをしています。note(ノート)では、クリエイターが各自のコンテンツを発表してファンと交流することを支援しています。cakes(ケイクス)は、cakes発のベストセラーを多数輩出しています。