アクセシビリティ

A collection of 15 posts

アクセシビリティ

Webアクセシビリティがビジネスと付き合うための課題

5月18日、神戸でアクセシビリティの祭典が開催されました。 Global Accessibility Awareness Day に合わせて開催されているイベントで、今回で 3 回目になります。Web サイト制作に留まらず、最新の支援技術の見学・体験ができたり、気軽に質問ができる場も用意されていました。今回は参加者として 1 日たっぷり勉強モード。当日の様子は Togetter のまとめを参照してください。 シフトレフトの課題 構築後の品質チェックの一環としてアクセシビリティを確認しているだけでは遅い場合が多々あります。設計段階から考慮されていないと、見た目だけでなく使い勝手に大きな影響を及ぼすからです。そこで、アクセシビリティもシフトレフトするべきだと考えることができます。制作・確認(テスト)といった工程の後半ではなく、企画・設計といった早期段階からアクセシビリティの専門家たちがプロジェクトに関わるべきという考え方です。 アクセシビリティをより早い段階から考えることは賛成ですが、その段階に入り込むにはビジネスと正面から向き合う必要があります。UX はその典型的な例で、従来はデザイン界隈で語られていた制作寄りのキーワードでしたが、今はビジネスに貢献する施策を練ることが必須です。アクセシビリティが企画・設計から入れるようになるには、ビジネスメリットに繋がるプランを描けるようになる必要があると思います。 誰でもアクセスできるようになることで、マーケティングファンネルの一番上にある「

アクセシビリティ

改めてWebサイトの品質について考える

制作における品質とは? Webサイトにおける品質(クオリティ)とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーションも深く掘れるものになっています。それに比べると、米国サイトは「殺風景」「パソコンだと物足りない」という評価をする人が現れるかもしれません。 しかし、米国サイトのほうが優れている点もあります。日本語サイトではトップページの容量は 4.6 MB あり、159 回のリクエストを要します。これは 4G 回線だとおよそ 9

アクセシビリティ

アクセシビリティとはを一緒に考えて分かった視点転換の発想

4月23日、クリーク・アンド・リバー社主催で、と、コラボ特別編「アクセシビリティってなんなのさ」というイベントが開催されました。これは昨年開催された「UXってなんなのさ」い続く Q&A 中心で 3 時間話し切るというもの。今の仕事に直結するテクニックや知識を得たいという方には向いていませんが、参加者全員で課題共有をして考えたいという方には参加価値があったと思います。今回は私はモデレーターとして参加し、「デザイニングWebアクセシビリティ」の著者である太田良典さん(@bakera)、伊原力也さん(@magi1125)。「IA/UXプラクティス」の著者である坂本貴史さん(@bookslope)にアクセシビリティの過去・現在・未来についていろいろ質問しました。当日の模様の一部は Togetter でまとまっています。 以下、モデレーターの視点からイベントで感じたことを書き残しておきます。 信念だけではどうにもならない 性別・人種・年齢・身体の状態に関係なく、自由にコミュニケーションができる World

アクセシビリティ

絵文字のアクセシビリティについて少し調べてみた

Peach🍑を紹介する記事で、絵文字が世界的な共通言語になりつつあると紹介しました。日本でも Twitter が紅白歌合戦用の特別ハッシュタグ+絵文字を実装するなど、絵文字がコミュニケーションにおいて重要な位置付けになりつつあります。 しかし、アクセシビリティはどうなのでしょう。 目では絵として表示されていますが、中身はコードです。実際、どのように読み上げられるのでしょうか?そもそも読み上げられているのでしょうか? サポートが広がる絵文字読み上げ 年々音声読み上げの精度は上がってきており、絵文字サポートもそれに合わせて増えてきているようです。例えば Google Voice は、2014 年に絵文字読み上げをサポートしましたし、NDVA でも有志の方が絵文字読み上げのための辞書を無料で配布しています(英語のみ)。 iOS の VoiceOver は、特別なアプリをインストールしなくてもすぐ利用できる高性能の音声読み上げ機能。もちろん、VoiceOver でも絵文字を読み上げてくれます。実際どのように読み上げられるのか調べてみました。 ニンマリ顔、目が笑っていない ひとりのシルエット グッドのジェスチャー、やや色白の肌 ツノのある怒った顔 ウンチ、

アクセシビリティ

コンテンツデザインから始めるWebアクセシビリティ

理解という名のアクセシビリティ Web アクセシビリティの課題には大きく分けて 2 種類あります。ひとつは、色、形状、動きといった視覚に関わること。そしてもうひとつは、マークアップをはじめとしたマシンリーダブルに関わることです。マークアップが正しく記述されていて、視覚的にも分かりやすいことは Web アクセシビリティの確保において必須ですが、これらとは別に『第三の課題』のようなものがあると考えています。 それは利用者が理解できるコンテンツを制作・配信するという課題です。正しくマークアップされていたとしても、そのマークアップされたコンテンツが人にとって理解しにくいものであればどうなるでしょう。利用者はタスクを達成することができないでしょうし、情報を求めて彷徨うことになるかもしれません。 単に情報へアクセスできるだけでなく、意味のある情報へアクセスできるようにする必要があります。利用者の目的が達成されないという結果になってしまえば、たとえ Web サイトに情報があったとしても、利用者の視点からは「情報へアクセスできなかった」という評価になります。JIS X 8341-3:2010 でも WCAG でも「理解しやすい情報を提供する」ことの重要性がガイドラインとして書かれているので無視できません。 では、どのように考え、

アクセシビリティ

今からできるWebコンテンツの次のコト

10月25日、仙台で The NEXT WEB CONTENT 2015 が開催されました。主催である株式会社インフォアクシア設立11周年記念として、Web アクセシビリティを中心に、デザイン、ユーザビリティ、SEO など、Web に関わる様々な話題を扱ったイベントになりました。トピックは広く浅いわけですが、異業種の専門家が集まることで、新たな視点の発見や共通点を見つけることができました。 本イベントの様子は Togetter #tnwc2015 をご覧ください。 Web利用は『終わった』のではなく『変わった』 ここ1年「Web は終わった」というニュアンスが含まれた話題を国内外で耳にします。Mashable が「Web Design is Dead(Web デザインは死んだ)」という記事を公開して話題になりましたし、アプリの利用時間の急増から「The

アクセシビリティ

次世代Webはブラウザの外にある

10月18日、法政大学にて次世代 Web カンファレンスが開催されました。Web に関わる技術について徹底的に話し合うイベント。セッションすべてディスカッションで勉強会というより話を聞きに行くというニュアンスが近いかもしれません。8 月に UX をテーマに議論する会を開きましたが、今年はこうした『会話』を軸にしたイベントに興味を惹かれます。 今回は、「デザイニングWebアクセシビリティ」の著者である太田良典さん(@bakera)、RDFの専門家でありコントラバス演奏者である神崎正英さん(@_masaka)と Webアクセシビリティをテーマに 1 時間ほど話をしました。私は Web アクセシビティの専門家ではありませんが、株式会社インフォアクシアの 植木真さんとのポッドキャストがキッカケで呼んでいただきました。3 者異なる視点から、Web アクセシビリティの現在と未来について話し合いました。 セッションの様子は Togetter のほうにまとまっています。 見えてないから発生する理解の溝 様々な話題が飛び交った Web アクセシビリティセッションでしたが、まとめると下図のようになると思います。 Web アクセシビリティにおいてヒューマンリーダブル(人が理解できること)

コーディングWebアクセシビリティ
アクセシビリティ

コーディングWebアクセシビリティ

実践的な入門書 Webアクセシビリティの関連書籍は元々数が少ないですが、どれもお堅いイメージが漂うものばかり。そうしたなか、表紙から入りやすそうな「コーディングWebアクセシビリティ」は、ひとつ特異な存在ですし、今までの Web アクセシビリティ書籍のイメージを払拭しています。恐らくジャケ買い、またはジャケ立ち読みした人もいるのではないでしょうか。圧迫感のない文字の扱い、豊富にある図やイラストも、表紙の雰囲気を裏切っていません。 やさしく基本から書かれていますが、フォームやモーダルウィンドウといった、実装に悩む UI のアクセシビリティ向上のヒントが紹介されており、現場ですぐ使えるノウハウも盛り込まれています。章ごとに大きく「インターフェイスの概念」「実装のためのルール」「具体的な実装ノウハウ」の 3 つに分かれていて、テンポ良く学習することができます。

アクセシビリティ

自信をもってアクセシビリティに取り組むための課題

2月11日、アクセシビリティ・ビギナー(初心者)向けのセミナーAccSell Meetup 008へ参加しました。「アクセシビリティはよく分からないし、難しそう」と考える方に向けて合計 8 回開催されているイベント。私は今回で 2 回目の参加になります。 対象外というのは十分承知していますが、伝える仕事をしている自分としてはビギナー相手にどうアクセシビリティを伝えるのか大変興味がありました。 私はアクセシビリティをどう伝えるのかというのは長年思考錯誤を続けていて、ビジュアルデザインやコンテンツ戦略という、通常アクセシビリティを連想しないところから語るという『変化球』を試している最中です。 今回のイベントは、デザイナーの守谷 絵美さん(@emim)が登壇したせいもあってか、参加者や会場の雰囲気が前回とは少し異っているように思えました。アクセシビリティの考え方、実装の仕方をより多くの方に伝えるには、アクセシビリティの専門家ではない方が、あえてアクセシビリティを語るみたいな機会をもつことは重要だと改めて感じました。 イベント関連の情報はポッドキャストやトゥギャッターがおすすめです。 AccSell Podcast: 「デザインって、伝わらなければ意味が無い」 #AccSell Meetup 008 『集まれ!アクセシビリティー・ビギナーズ!2015』

アクセシビリティ

Webアクセシビリティを当たり前にするために

当たり前にしては難しい Webアクセシビリティを考慮し実践することは「当たり前」だと思いますが、その当たり前を実践することが非常に敷居が高い印象があります。仕様や規格を理解して実装しなければならないところから、クライアントのコミュニケーションやワークフローといった仕組みの見直しまで、「当たり前」を実践するために超えなければならない山がたくさんあります。 私たちが「当たり前」という言葉を使うとき、「誰でも同じように考えること・自然にできること」というニュアンスを含めています。そのニュアンスのまま当たり前と思って Web アクセシビリティに取り組もうとしても、目の前にある多くの課題に頭を抱えてしまう人もいると思います。当たり前という言葉と、現実にしなければならないことのギャップが、Webアクセシビリティを難しくしているのかもしれません。 当たり前という言葉が難しさに拍車をかけていることがある Web アクセシビリティ。それでも始めてもらうには、Web アクセシビリティの意味を少し広げて実践することだと考えています。 まずは小さな勝利から JIS規格レベルAAを目指すだけでも簡単なことではありません。先述したように仕組みから変えていかなければ実践できないこともあります。そこで、制作側だけでも「自分たちでもできた」と思えるような『小さな勝利』をチームで感じてもらえるようにする必要があると思います。それは、レベルAにも満たさないことかもしれませんが、小さな勝利を積み上げていくことで、「もっとできるかもしれない」という自信につながるはずです。 例えば WebAIM

アクセシビリティ

コンテンツからみるWebアクセシビリティの課題と提案

コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」

アクセシビリティ

アクセシビリティから変わるビジュアルデザイン

W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです(翻訳サイトより抜粋)。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければならない。 堅牢性 コンテンツは、支援技術を含む幅広い様々なユーザーエージェントが確実に解釈できるように十分に堅牢でなければならない。 こうした原則は、アクセシビリティでよく例として出される音声ブラウザへの対応やキーボードの操作だけでなく、

アクセシビリティ

コンテンツのアクセシビリティが未来を保証する

「その情報にアクセスできるかどうか」 これが私にとっての Web アクセシビリティです。一般的に Webアクセシビリティといえば、主に高齢者や障がい者への配慮という見方が強いですが、数年前からは私は上記のように捉えて仕事をするようにしています。少し極端な考え方かもしれませんが、「その情報にアクセスできるかどうか」ということを意識して設計するときに、高齢者や障がい者といったごく一部のグループを考えることはありません。 全ユーザーが特殊な存在 近年の Web 利用者の動向をみると、高齢者や障がい者を意識しなかったとしても、情報にアクセスできるかどうかを真剣に考えなければ、見られない・読まれないコンテンツになることが分かります。 デスクトップだけでなく、タブレット、スマートフォンなど様々なスクリーンサイズをもったデバイスで Web にアクセスしている。また、デバイスにより初期設定やカスタマイズ方法も様々である。 インプットする方法も多様化しはじめている。マウスやキーボードといった従来の方法だけでなく、スタイラスやタッチを使う方も増えてきている。また、音声入力といった一部の方しか使っていなかった方法も広まり始めている。 健常者であれば、必ず目で情報を受け止めているとは限らない。デスクトップだけでなく、タブレット、スマートフォン、電子書籍リーダーで音声読み上げ機能が実装されており、利用者数を伸ばしている。 ビデオをはじめとしたマルチメディアコンテンツの消費の仕方も様々。大音量でフルスクリーンにする人もいれば、ヘッドフォンを忘れたので消音にして見ている方もいる。 Web にアクセスする手段が今まで以上に多様化し、

アクセシビリティ

見えるアクセシビリティをデザインする

先週の金曜日、アクセシビリティキャンプ東京 キックオフミーティングに参加しました。既に世界各地で開催されているアクセシビリティキャンプの東京版を始めるそうで、その最初のミーティングになります。 私自身はアクセシビリティの専門家ではありませんが、今のアクセシビリティ周りの活動や課題、そしてアクセシビリティに関わるプロフェッショナル達が抱く想いを知りたくて今回参加してみました。 見え難いアクセシビリティ 以前から奇妙だと思っているのが、コンテンツ/デザイン/機能など様々な物事において付加価値が重要視されているのにも関わらず、アクセシビリティになると付加価値ではなく、ボランティアに近いサービスとして見られる点。その要因として、健常者は省かれてアクセシビリティが捉えられている、障害者のためにある配慮になっているからかもしれません。アクセシビリティはコンテンツ/デザイン/機能の付加価値になるのですが、そこがまだリンクしていないのでしょう。 アクセシビリティの話題自体が捉え難いのも課題です。取り上げられる話題が、コード、技術仕様など目に見えて分かりやすいものが少ないので、実装しても実感に繋がらないことがあります。その上、アクセシビリティの向上の事例が障害者に向けた補助が大半であれば、情報へのアクセスしやすさという意味でのアクセシビリティとして捉えられ難いのも当然かもしれません。 こうした状況はもう何年も続いているわけですが、デザイナーとしてアクセシビリティをもう一度考え、啓蒙するにはおもしろい時期に来ているのではないかと思っています。見え難い・分かり難いアクセシビリティであれば、見える化するのもデザイナーとしての役割です。近年 UX が日本国内でも注目が集まっていますし、UX の向上のためのアクセシビリティという視点は皆頭のどこかに持っていると思います。 見える化することによるキヅキ ひとつデモを作ってみました。 アクセスキー(

アクセシビリティ

アクセシビリティPodcastに出演しました

ウェブアクセシビリティに関する情報を音声で聞きたいという方にとって 辻ちゃん・ウエちゃんのアクセシビリティPodcast は欠かせない存在だと思います。既にシーズン4に突入しているわけですが、今シーズンからゲストを呼んで対談形式で放送するのが何回かあるそうです。その一人目のゲストとして出演してきました。 一見、かけ離れた存在のように感じるデザインとアクセシビリティですが、重なる部分はとても多いと思います。前編・後編に分かれていて、前編はウェブアクセシビリティ全般の話題。後編はプレゼンの話題も含めていろいろ話をしてきました。本格的なスタジオで収録したことがなかったので、少し緊張しましたが楽しい時間でした。というか、時間が足りなかった(汗 「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第20回 前編 「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第20回 後編 ホスト役のひとりである株式会社インフォアクシアの植木さんとは以前、僕のポッドキャストで対談しているので、植木さんのアクセシビリティ観を知りたい方はぜひどうぞ。もうひとりのホストである辻さんにはアクセシビリティとはあまり関係ない分野でうちのポッドキャストで対談する予定ですのでお楽しみに。