タグ: Accessibility

[Adventar] 「品質としてのHTML」という意識とウェブアクセシビリティ

このエントリーはWeb Accessibility Advent Calendar 2017 7日目の投稿です。

初日からちょうど一週間ということで、箸休め（的な）ポエムに少々お付き合いください。私から見えている世界の話を書いてみます。アドベントカレンダーの本題とは少々かけ離れた内容かもしれませんが、同じ線上のトピックということでご容赦ください。

限られた時間のそのなかでは…

今年は小さい集まりなどでウェブアクセシビリティ（以下、A11y）のことを話題にすることがありました。

まだまだデザインカンプを制作したうえでコーディングに着手することの多い、私から見えている世界。クライアントもIT・ウェブ慣れしていない方が多いため、その手法は現時点ではまだ致し方ないなと思っています。

“見た目駆動”+限られた時間でコーディング作業を進めていくなかで、A11yに取り組むには、マークアップに意欲的に取り組む方でも「対応する時間が…」「学習コストが高く感じる」「必要性がいまいち…」という思いがあるようです。

参入障壁の低いこの世界の片隅では…

マークアップに意欲的に取り組む方がいる一方で、参入障壁の低いウェブ界隈、制作者のスキルもさまざまです。

ちょっとくらいHTMLが間違っていてもブラウザが解釈してくれる場合もありますし、作り込まれた無料HTMLテンプレートもインターネット上にはたくさんあります。

また、CSSフレームワークのドキュメントに沿ったHTMLを記述したり、A11ｙに配慮された jQuery プラグインなどを利用したりすることで、制作者が意図していなくても、ある程度のA11yは担保されるようになってきています。（この記事を読んでくださる多くの方には、釈迦に説法だとは思いますが…。）

ともすると、文法的に正しいHTMLを知らずとも済んでしまう状況があるのも、また現実ではないでしょうか。

文法的に正しいHTMLとA11yは切っても切り離せない関係。「A11yって大事だよ」と説くより、「HTMLも品質のうちだよ」と説くことの方が先かな…と思うのです。少なくとも私から見えている世界では…。

ありがとう、ヘイドンさん

そんなことを考えているさなかに読み始めた、ヘイドン・ピカリング氏の「インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」。その冒頭にこんな一文があります。

本来、デザインの仕事とは、熟慮することです。そして、問題に対するベストな解決策を追求することです。それが「見た目の美しさ」という範囲だけでデザインをとらえることで、Webの大半は本来の意図から外れてしまっています。これは、低いアクセシビリティ、貧弱なパフォーマンス、そして全体的な有用性の低下につながります。

また、JSONから必要なデータを取り出す例を挙げ、このように続けます。

データの構造を考え、最適解を導き出すための試行錯誤をすることがデザインなのです。

このヘイドン氏の言葉を読んで、もやもやが晴れたことはいうまでもありません。「ウェブのデザインってやっぱりそういうことだよね、これまでの経験から学んできたことは間違ってなかったね…。」と心の中で小さく“ヨッシャ”しました。

コーディングする人だけじゃなくて、プロジェクトに関わる人すべてが、「HTMLも品質のうちである」と認識してくれるといいなぁ、などと思った2017年暮れでした。

来年は「良いウェブサイトとは？」「品質とは？」といったことを考える場を作ったり、インクルーシブ本（やピンク本）の布教活動など、引き続き地道な活動を続けていけたら…などと（またも）薄ぼんやり思っています。

明日8日目は kikeru_umenu さんの投稿です。よろしくお願いします。

余談：
静岡県がUDを推進していたり、文化政策学部のある大学があることから、それらに関連するUDシンポジウムや文化多様性研究の発表会に参加し、ウェブ以外でのアクセシビリティや、外国人居住者の多様性について視野が広がりました。たまにはこういうのもいいですね。

WCAN mini で Webアクセシビリティをさらに深めるきっかけを得て

6月4日（土）に名古屋で開催された「WCAN mini 2016 Vol.1 そのモヤモヤをWebアクセシビリティの達人がスッキリ晴らす！ Webアクセシビリティ はじめの一歩、キホンの「キ」とアリアの「ア」！」（なっ…長い…）に参加してきました。

今回の勉強会は、2月に大阪で開催されたものの再演。
大阪の回は物理的な距離を理由に泣く泣くあきらめましたが、名古屋なら懇親会も参加して余裕の日帰りですから喜び勇んで申し込みました。（名古屋の勉強会に行くと「遠くから来たねー」と“毎度”言われますが、静岡西部からは思いのほか近いんですよ…。）

Webアクセシビリティの基本は押さえていても、ざっくりとしか理解していなかった「WAI-ARIA」。実装したらどのように支援技術に伝わるのか、それをもってなにが実現できるのか…深く学ぶきっかけになればと、興味深くお話を聞いてきました。

今日から始めるWebアクセシビリティ、まずはココから！

写真：セッション前の撮影タイムでスライドの映るスクリーンと植木さん

インフォアクシア代表・植木さんのセッションは、明日から取り組めるWebアクセシビリティの基本のお話。合成音声に台詞を読み上げさせる演出が心憎いですね。

Webアクセシビリティを取り巻く国内外の現状（障害者差別解消法施行や外国での法整備）、デバイスの多様化によって対象者の裾野が広がったことなどをふまえ、「マシンリーダブル」をキーワードにどうやって対応（マークアップ）していけばいいのかを一つひとつ丁寧に掘り下げて解説されました。

このセッションの内容は、ひと昔前から心がけていることのおさらい+普段見過ごしていることの発見というような感じでした。（#ff0000のコントラスト比が実は4.0:1でJIS規格で求められる値に満たない話や、キーボードでのフォーカスが正しく操作できるモーダルウィンドウの話など。）

スライドの後半、ヤコブ・ニールセン氏の Twitter Bot の引用があり、そんなBotがあったのねと早速フォローをしましたけれど、「ヤコブ・ニールセンをご存じの方？」という質問で挙手が少なかったことには、かなりジェネレーションギャップを感じうるしかなく…。

HTML5で今日から使えるWAI-ARIA

写真：セッション前の撮影タイムでスライドの映るスクリーンと大藤さん

復職してから目にするようになった「WAI-ARIA（ウェイ・アリア）」の文字。何て読むの？というところからのスタートで、ランドマーク・ロールを使う程度でした。

これまでに仕様書や大藤さんのWAI-ARIA本など、文字としてその概要を読むことはありましたが、デモを見ることで実際のマークアップでの使用するイメージがわきました。Open Ajax Accessibility というWebサイトにマークアップ例が多数掲載されているということで、こちらで復習をかねて勉強をしてみたいと思います。

駆け出しだったころ、HTMLやXHTMLのリファレンス本で（間接的に）非常にお世話になった大藤さん。その頃は札幌在住でいらしたのが、今は名古屋にお住まいなのだとか。なかなかお会いする機会がないなぁと思っていたのが、初めてお目にかかることができ感無量。

まとめ

Webアクセシビリティの話題を Twitter などで追いかけていると、スクリーンリーダーや WAI-ARIA、さまざまなデバイス、障害者の方の体験談、大なり小なりいろいろなものが流れてきます。

その早い流れに身を任せていると、「はて？それはすぐ自分に必要な情報だろうか？」「それを取り込める器はできているのだろうか？」という不安と、許容量を超えそうな情報にすこし振り回されている自分もありました。

有益な情報があっても、このままだと馬子にも衣装、猫に小判だぞと。
ならば基本に立ち返ってみよう。Webアクセシビリティの基本とそこから一歩進んで WAI-ARIA をちゃんと固めよう。そんな気持ちで参加した勉強会でした。

質疑応答で「東京ではWebアクセシビリティを基本対応することで、競争力に繋げている企業もある」というお話も出ました。この先、事業者もWebアクセシビリティが努力義務から必須になっていった際、地方でも先んじて取り組んでおくことで、ひとつの武器になるのではないかと思います。

植木さんは、「Webアクセシビリティの学校」というWebアクセシビリティの基本を学べるセミナーを全国各地で行っておられます。Webアクセシビリティについて考えたり学ぶ場の少ない地方でもそういった試みが回を重ね、少しずつWebアクセシビリティが“あたりまえ”になっていくといいなと思うところです。

私個人としては、懇親会で静岡西部に縁がある植木さんと地元の話などしたり、大藤さんにリファレンス本でお世話になったお礼などができたりで非常に楽しゅうございました（笑）。

まとめの余談

イベント開始前にWebアクセシビリティに関連した TED Talk が流れていたのですが、何のトークだったのか気になります…。どなたか知っていたら教えてください。

Illustration by Freepik

【Advent Calendar】“知らない世界”を知ることが容易になった世界で。

Web Accessibility Advent Calendar 2015、10日目の記事です。
昨日9日目の記事は @chabin_desuga さんの「0か1かじゃない！」でした。

初めてこの Advent Calendar に参加する @nintaro こと qumiko totoco です。
今回はこれからアクセシビリティを勉強したい、取り組みたい、周りを巻き込みたいと思っている方へ向けてのポエムを書いてみます。今後の取り組みへのヒントになれば幸いです。

そして、あいも変わらず長文です。

画面の向こうにあった未知の世界

私は静岡県西部の制作会社でWebデザイナーとして10年ほど勤務していました。
業務内容はサイト制作全般から社内ドキュメントの作成、品質管理、業務改善、後進指導などなど。前職の最後の1年間は東京（のすぐ隣）に住んでいました。

2011年に出産のため退職、2年休職したのち、現在は半勤半フリーな感じで受託案件のデザインとマークアップを主に担当しています。最近はようやく休職していた間の技術進歩についていけるようになったので、Webアクセシビリティの勉強を再開したばかりです。

そんな私がアクセシビリティの関心を高めるきっかけとなったのは時をさかのぼって今から10年とちょっと前、まだテーブルレイアウト全盛のころ。私はとあるシニア向け芸能コンテンツの運営を担当していました。

あるとき、サイトリニューアルを目的とした利用者アンケートを行いました。300件くらい集まったでしょうか。自由記述の項目があり、一つひとつを興味深く読んでいくと、「このサイトは画像の代替テキストがちゃんと入っていて使いやすい」というメッセージが目にとまりました。それは視覚障害者と思われる方からのメッセージでした。

「代替テキストは何かしら入れておく」、その程度の認識だった当時の私が受けた衝撃は計り知れず。何の気なしに入れていた代替テキストが想像を超えた役割を果たしている、画面の向こうに未知の世界（閲覧方法）があるということを知り、Webアクセシビリティの門を叩いたわけです。

それは「JIS X 8341-3」が公示され、「富士通ウェブ・アクセシビリティ指針 第2.0版」が注目を集める少し前のことでした。

容易になった“知らない世界”を知ること

しかし、このようなWebアクセシビリティを考える原体験を持つことはなかなか無いと思います。障害者や高齢者の方がインターネットを利用する場面に、日常生活の中でいったいどのくらいの方が出会えるでしょうか？

私が勉強を始めたころ、手に入るWebアクセシビリティ関連の情報といえばテキストのWebサイトが主でした。でも今は手の中の端末でも簡単に映像として見ることができます。原体験を持つことは難しくても、そういった映像などで“知らない世界”があることを知ることは容易です。

今や、書籍やインターネット上でさまざまなWebアクセシビリティの情報や知識が豊富に手に入ります。その知識を使ってWebサイトを制作し、公開します。しかし、あなたにはその画面の向こうに在る人々の姿が見えていますか？

小さな制作現場とWebアクセシビリティと私

ここまでで言いたいことの8割方は書いてしまったのですが（笑）、もう少し具体的なことを話しましょう。

  • 制作現場での取り組み方がいまいち分からない
  • アクセシビリティの重要性が周りに理解されない
  • マークアップするスキルが足りていない

今年、セミナーやインターネットで情報収集をしていて、このようなことを見聞しました。10年前と悩むことはあまり変わってないなーとも思いましたが、業界内の世代がひと周りしてるんですから当たり前なのかもしれません。

で、前職の時ってどんなことに取り組んでいたっけ…と3つほど思い返してみました。

1. チームみんなで“かみ砕いた”社内ガイドラインを作る

私が当時所属していた制作チームは約10名ほど。デザインからコーディング、プログラムの設置、公開まで一人のデザイナーが担当するスタイルです。各々が好きなようにファイル名を付け、マークアップをし…というカオスな状況だったため、社内ガイドラインを早急に作る必要がありました。それは命名規則からディレクトリ構造、そしてアクセシビリティ対応まで。

このとき参考にしたのは、前述のJIS規格と富士通の指針でした。
まずは社で受ける案件の傾向を把握し、これらのガイドラインを基に“最低限”担保する項目を選定しました。クライアントは地元中小企業が多く、今でいう AAA レベルを求められることはほとんどなかったため最低限の対応からやろうという感じでした。

まずは私がざっと項目を洗い出し、チーム全員で詰めていきました。小さなチームでは全員の意見を反映し、方向性や目的を明確にした方が運用しやすいのではないでしょうか。

2. 後進指導は文書を作るところから

Web未経験デザイナーの指導を担当したときは、「文書を作る」ところから始めました。
最初はクライアントから提供された素の原稿をWeb向けにアレンジする練習だったのですが、悪い癖でいつのまにか HTML のマークアップを意識した内容になってしまい…（笑）。

Webアクセシビリティは適切なマークアップが基本だと考えています。「マークアップがおかしい = 文書構造を意識（理解）していない」を解決するためにも、これはこれでよかったのかな…と今となっては思います。

ちなみに、当時の参考書はFOM出版の「よくわかるシリーズ」です。

3. Web以外にも目を向けてみる

これは個人的な趣味なのですが、日常生活のあらゆる面での不便をどうしたらいいだろうと考えます。トイレのリモコンやガソリンスタンドのタッチパネルなどなど。子供がまだ小さいのでその行動を観察したり、コミュニケーションをうまく図るにはどういう解決策があるかな…と、日々試行錯誤しています。アクセシビリティと無縁のようですが、「問題発見力」のトレーニングといった感じでしょうか。

まとめ

今回は障害者・高齢者寄りの視点になってしまいましたが、閲覧環境が多様化して“誰がどんな環境で見ているか分からない”現在、Webアクセシビリティが求められる範囲はますます広がっています。最近では私もスマートフォンで小さい文字を見るのが辛いときがありますからね。ピンチアウトで拡大できないときの悲しさと苛立ち（笑）。若いと多分あれ辛くないんでしょうね。

私は退職前後に東京での被災、出産、入院、身内の死…と自身の中で一番濃い体験をし、生きること、死ぬこと、折り合っていくこと、優しくあること…いろいろと考えました。その延長として、Webにおいてはアクセシビリティへの関心が今なお尽きません。

しかし、私の周りではWebアクセシビリティへの関心はまだまだ高いとはいえず、そもそも認知されているのか？という状況です。私も足りないところいっぱいですし。そんな訳で、来年はWebアクセシビリティをゆる〜く雑談できる場が作れたらいいなぁ…と、一人で思っているところです。

静岡西部近隣（それ以外でも）でWebアクセシビリティに興味のある方、@nintaro , info@totoco.orgまでご一報ください。一緒に勉強しましょう。

最後まで読んでくださり、ありがとうございました。明日11日目は momdo_ さんです。

「いつもの制作に、ほんのひとつまみのハート（想像力）を」。
現場からの長々としたポエムは以上です。