アクセシビリティからデザインを学ぼう

平尾ゆうてん

福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。

これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。

アクセシビリティとは

Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般に浸透している言葉で言い換えるとバリアフリーです。そして特に情報アクセシビリティを扱います。つまり、情報のバリアフリーということになります。

利用者の属性に依存せずに(誰でも・いつでも・どんな状況でも)、格差無く、情報を享受できることです。また、その度合いです。

馴染みのない言葉で堅苦しく感じるかもしれません。今の説明も説明に聞こえないかもしれませんが、これから挙げていく話の中で「ああ、なんとなくだけど、そういうことかな」という具合で感じ取ってもらえたらと思います。

きっかけ

僕は普段Webサイトを制作する仕事をしています。HTMLを書いたり、ページを設計することが主な仕事です。

HTMLはわりといい加減に書いてもページを作れてしまうのが特徴です(その特徴のお陰でWebが爆発的に普及したと思っているのですが、その話は置いといて…)。デザイナーが提案した画面の上っ面を再現できれば、それでその仕事が成り立つ時代があったのですが、僕はそんなハリボテなページには抵抗がありました。自分の仕事には、やっぱりやりがいこだわりを持ちたい…。なにか「こだわれる理由」が必要でした。

そんなときに出会ったのがWebアクセシビリティです。情報アクセシビリティの分類の中でも、WebサイトやWebアプリケーションに焦点を当てたものです。

そこにはHTMLを正しく書けばWebページがアクセシブルになる、という僕の欲しかったこだわれる理由大義名分が存在していました。

  • マウスが壊れていてもキーボードで操作できる
  • スクリーンリーダーで読み上げられるので「ながら作業」ができる
  • 翻訳機能の精度が上がる
  • 検索性が上がる

ページが今までより使いやすくなるメリットがたくさんありました。これがアクセシビリティを学びたいと思ったきっかけです。

これだけでもじゅうぶんにモチベーションになりましたが、さらに想像よりもたくさんの学びを得ることができました。それを紹介したいと思います。

デザインを知る

Webアクセシビリティを調べ始めると、まずはじめに知るのはWeb Content Accessibility Guidelines(以下WCAG)だと思います。Webサイトをアクセシブルにするための指南書で、W3Cという国際団体によって管理されているものです。日本にも翻訳されてJIS(日本産業規格)でJIS X 8341-3:2016として制定されています。

JIS X 8341:2016 達成基準早見表(レベルA&AA)

ウェブアクセシビリティ基盤委員会が提供している達成基準の早見表(出典: https://waic.jp/resource/jis-x-8341-3-2016/

多少難しい文書で掲載されている達成基準も多いのですが、よくよく噛み砕いていくとそれぞれがデザインの基本に則っていて、幅広く言及されているのがわかります。

  • 配色
  • タイポグラフィ
  • 言葉選び
  • 情報の順番・構造
  • 一貫性
  • 導線
  • 時間の制御
  • 操作と動作

グラフィックデザインにとどまらず、言葉選びなんかはライティングやエディトリアルデザインですし、情報の扱い方はインフォーメーションアーキテクチャ、時間の制御や機能についはインタラクションデザイン、といった様々な分野のデザインに関連していることがわかります。

もちろんバリアフリーの文脈なので、ユニバーサルデザインやインクルーシブデザインにも関わってきます。

デザインのカテゴライズを始めると枚挙に暇がないですが、とにかく、このガイドラインだけでもデザインを学ぶネタの宝庫です。

ヒトを知る

バリアフリーの話なので、避けて通れないのがヒトについてです。年齢や障害の有無によって情報格差を生まないようにすることはアクセシビリティ向上の目的のひとつです。アクセシビリティの「すること/しないこと」ポスターというのがイギリスの内務省から発表されています。とある障害のある人にはページやコンテンツを「こうすると良くなるよ」「こうすると困ってしまうよ」がとてもわかりやすくまとまっているポスターです。有志により日本語版もあります。

「アクセシビリティのためのデザイン」 (英国内務省) 日本語版

アクセシビリティの「すること/しないこと」をそれぞれの障害に対して解説しています。(出典: https://github.com/UKHomeOffice/posters/tree/master/accessibility/dos-donts/posters_ja

このポスターに限らず調べていくことで本当にいろいろな障害があることを知ります。ロービジョンや学習障害・自閉症などは度合いやタイプも人それぞれです。

そして障害の他にもいろいろな人がいるということに気づきます。生まれ持った身体特徴もそうですし、病気もそのときの状態です。習慣がその人の個性を決めているかもしれません。それは先天的かもしれないし、後天的かもしれない。一時的な場合もあるでしょう。

  • 視覚障害・聴覚障害
  • 身体障害・運動障害
  • 発達障害・学習障害
  • 知的障害
  • 病気(疾患・症候群)
  • 年齢
  • 男性・女性・LGBTQ+
  • 精神状態
  • 習慣・文化・風習・国籍

人の特徴や能力は一次元で計れるものではありません。とても複雑に無限に個性があります。

Electroharmonixという書体があります。これはアルファベットのグリフをカタカナや漢字に似せた書体で、カタカナを見慣れていない文化圏の人には読めますが、逆に日本人にとってはとても読みづらい書体です。

Electroharmonixの書体サンプル(Electroharmonix by Typodermic Fonts Inc.)

the reporter came in with twelve companions of about his own age. と書かれています。(出典: http://typodermicfonts.com/electroharmonix/

さてこのアルファベットが読めない現象は識字障害になってしまうのでしょうか? 文化や習慣の違いによって起こる脳の能力の違いのように思いますが…。医学的な調査は一切していないので断定的なことは言えませんが、ここで言いたいことは、人の特徴や個性や能力は文化や習慣によって変わることもありますし、なにより自分の常識が通じない特徴もあるということです。

デザインはあるものの課題を本質的に解決することが目的です。そこにどんな人たちが関わるのか、どんな個性が関わるのか、可能性はひとつでも多く学んでいたほうがいいと思います。そうすることでデザインの手段の幅も広がるんじゃないかという期待もあります。

媒体・インターフェイスを知る

媒体やインターフェイスを知ることも大切です。

アクセシビリティを学んでいると、よく現れるキーワードが支援技術です(英語でAssistive TechnologyなのでATと略されることもあります)。Webアクセシビリティの文脈でしばしば現れるスクリーンリーダーもそのひとつです。コンピュータの画面上のテキストを音声に変換して読み上げるツールであり技術です。他にも音声への変換ではなく、点字を浮き上がらせる機械を制御する点字ディスプレイと呼ばれるものもあります。

また、視覚障害がなくてもスマートフォンのスクリーンリーダーを利用して画面を見ずにニュースを聞くユーザーがいたり、支援技術を上手く普段のツールとして活用する事例もあります。コンピュータから情報を得る方法はモニターだけではないということです。スクリーンリーダーかもしれないし、スマートスピーカーかもしれません。情報を入力する方法だってそうです。マウスが使えない・使わない人はキーボードだけで入力したり、音声で入力するかもしれません。本当にいろいろな手段があると知ることができます。

コンピュータがその支援技術との親和性の高さから潜在的にアクセシブルであるということがわかってくると、その他の媒体ではどういった特性があり、どういった工夫がなされているのかが気になってきます。紙媒体には点字という技術や代替手段が。テレビでは字幕や手話放送が。ラジオでは映像がないぶん言葉や演出には工夫が感じられます。その工夫や技術や代替手段を自分のデザインする媒体にも応用できないか考えるきっかけになります。

今の世の中では当たり前となっているメガネも立派な支援技術と言えます。こういった人類の叡智に思いを馳せながら学べるのも醍醐味です。

アクセシビリティから学んだもの

学ぶ上で自然と触れるのはそれだけありません。マーケットや経済、人権と福祉、法律と政治、これらもアクセシビリティに大きく関わってきます。サービスや製品だけじゃなく、社会全体を含めてマクロにものごとを捉える必要性も感じるようになると思います。

アクセシビリティを学ぶことで、デザインを知り、ヒトを知り、媒体・インターフェイスを知ることができました。これらを知ることで、ものづくりの基礎に触れた気がします。

  • 相手を知り、問題を知り
  • 可能性を考えて、想像して、仮説を立てる
  • 技術を組み合わせ、設計し、問題の解決方法を見出す

それぞれの分野のデザインをじゅうぶんに語れるようになったわけではありませんが、以前に比べるとずっとデザインに対しての理解が深まったと感じています。

もしも今あなたがデザインの知識や理解で足りないものを探しているのであれば、アクセシビリティというキーワードから掘り下げてみると面白いかもしれません。

良い意味で先入観をぶち壊して、新しい視野が開けると思いますよ。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて