LOG IN

アビリティと勉強会とワタシ

by コウジアナーダ

 勉強会というのは、常に新しいワタシになれる良い機会だ。なぜならば、昨日まで知らなかったことを覚え、知らなかった人に合うことができるからだ。

これを世間では成長と呼ぶ。

そう、勉強や勉強会は、意思を持って参加すれば「成長」という二文字が近くにあるのだ。

リーダブルな夜

 2018年も暮れに近づきはじめ、また台風も岡山に近づきはじめた9/3。

その夜、ワタシは岡山大学にいた。岡大インキュベーターという施設だ。

ここには思い入れがある。独立したての頃、何度か一緒に仕事をさせてもらった人が当時ここに入っていたのだが、それはまた別の機会に話すとして・・・

 ワタシは「岡山にアクセシビリティを根付かせたい。岡山のWeb界隈をリーダブルに!」という思いを持つ、澤田さんと前川さんという2人がはじめた勉強会「リーダブルな夜」に参加した。

→リーダブルな夜のサイトを見てみる

 ということで、今回はその内容のルポタージュになる。いやルポというほどこジャレた内容ではないか。

今回このリーダブル、アクセシビリティという内容の記事を書くために、ワタシの足りない語彙力ではややセンシティブな内容を含まざるを得なかった。

この記事を読んで気分を害される方がおられたら申し訳ないが、それでも書いてみたいと思う。

Webアクセシビリティとはなんなのか?

リーダブルな夜はSAWADA STANDARD DESIGNの澤田さんのお話から始まった。

Webアクセシビリティとはなんなのか?

その答えを食べきった手羽先の骨のように身を取り払っていうと、

「障害(障碍)の有無に関わらず、誰でもアクセスできる」

ということだそうだ。(※個人的な思想から、この記事では障害という言葉で記載します。)

アクセス+アビリティでアクセシビリティ。

 アクセスする能力から転じて、アクセス出来るかどうか、またアクセスのしやすさという意味だ。

では誰でもアクセスできるように、というのはどういうことなのか。

人は自分のおかれた環境や立場を基準として考えるため、なかなか他人の事は理解しにくいものだ。

 例えばワタシは左目に「飛蚊症」というトラブルを持っていて、常に左目の前にゴミのような虫のようなものが飛んでいるのだが、これは非常に伝わりづらい状態なのだ。

なぜならば、ほとんどの場合伝える相手の目は飛蚊症ではないからだ。

過去にハスキー犬に本気噛みされた右手は今も少し動かしただけで痛くなるし、レーシングカートで骨折した左足首はワタシからマラソンの楽しみを持って行った。

痛みやトラブルではないが先日ブログに書いた「共感覚」についても同じことが言えるだろう。

→共感覚のことが書いてある記事を見てみる

これらは障害認定されるほどの特性ではないが、これを持っていない人には理解しづらい。

障害も同じ要素を持っていると思う。

ワタシの手は、多少痛みを感じることはあっても、健常な手が行えるほとんどの動作は可能だが、世の中には手そのものが動かない人もいる。

耳が聞こえることは万人に当たり前ではなく、人によっては聞こえない事が当たり前なこともあるのだ。

そのことは多くの人が知っている。ワタシも知っている。

耳が聞こえない人がいることも、目が見えない人がいることも。

けれど、自分がそうでないから、想像しづらいのだ。

そこを想像して、例えば目が見えない人のために音声読み上げをしたり、耳が聞こえない人のために文字情報をしっかりと付けたり、など。

 そういった行動で障害を持った方々がサイト閲覧をして、情報を得たり楽しんだり出来るようにすること、それがアクセシビリティなサイトを構築するということなのだ。

「ユーザビリティの向上」とよく掲げられるが、ユーザビリティは使いやすいかどうか?ということで、これはアクセシビリティが出来ていることを前提として成り立つこと。

土台として、みんながそもそも使えるものをまず作ろうというのがベーシックな考えとなる。

ならばリーダブルとはなんなのか?

 リーダブルとは、読める、読みやすい、理解しやすいということ。

アクセシビリティなサイトにするには、リーダブルであることが必要不可欠なのだ。

Webでいうリーダブルには2つの要素があるという。

・マシンリーダブル(機械にとって読みやすく理解しやすい)

・ヒューマンリーダブル(人間にとって理解しやすく読みやすい)

Webアクセシビリティの基本はマシンリダブルであること、なのだそうだ。

マシンリーダブルなものというのは、文書構造やメタ情報が正しく記述されているなど機械やプログラムが読みやすい状態のことだ。先述のオールユーザー向けの対応、例えば音声読み上げに対応するためにテキストを入れる、などもこれにあたる。

検索などにも関わる重要な部分、出来ている人は多いだろう。

対をなすのはヒューマンリーダブルという言葉。

人が読みやすいというのは、つまりビジュアルデザインやコピーが人に伝わりやすく作られているということなのだろう。

こちらも同様に出来るという人は多いはずだ。

難しいのは「この2つのリーダブルのバランスが取れていることが大事」だということだ。

バランスを取りつつ、リーダブルを増やしている図だ。小さなリーダブルをたくさん増やしていくことで、バランスが取れている箇所が増えるといいな、といったお話だ。

澤田さんと前川さんの「リーダブルな夜」は、このバランスが取れる人を少しでも増やしたいのではないかと思う。微力、微細な力ではあるが、お二人の意思を少しずつ学び取って実践していこうと思う。

試して合点がいくこともある。だから試してガ(ry

休憩を挟んでふたたび澤田さん。

リーダブルではない世界を体験しよう、ということで実際に自分のPCを使ってやってみようのコーナーとなった。

まずは画像が見えない場合について

 画像から情報が得られないというケースについて、ツールを使って画面上の画像を非表示にしてサイトを閲覧してみるというワークだ。

このワークは、画像に入れるAltタグがぞんざいに入っているサイトで行われた。

とある公共のサイトとだけ言っておこう。

・・・なるほど、難しい。

バナー、とか書いてあるせいで、探したいものが探せないのだ。

または懐かしの「text-indent: -9999px;」でテキストを飛ばして背景画像を入れるやり方。ちなみにCSS3に対応させたつもりかご丁寧に-999emとなっていて不覚にも笑いが漏れてしまったのだが、これは画像非表示だと真っ白になるため、非常に見づらかった。

Altは検索対策でもおまじないでもなく、必要な人のためなのだと再認識できる良い機会だった。気を付けよう。

次は弱視体験

画面を700%ほど拡大し、画面をハイコントラスト表示にして、特定の何かを探してみる体験。

これも探し出すことはできなかったが、現実にこうしてサイトを見ている人がいると知ることができて本当に良かった。頭ではわかったつもりでいても、意識に入り込んでいるわけではないという実感が出来た。

 小学校の同級生で視力0.01以下、一番上のランドルト環(Cのやつ)が見えないという者がいた。

その時は理解できなかったが、この日とうとう理解した。彼は眼鏡無しだと、戦闘力が激減するのだ、ということを。

「眼鏡をかけた人にとっては、眼鏡が本体!」という言葉をよく聞く(?)が、これも紛れもない真実の言葉なのだと痛感した。気を付けよう。

最後は色覚特性の体験

 青色が見えにくい状態で見るバスの路線図は、3000ピースのジグソーパズルよりも難しかった。

色で情報の優劣や意味をつけると、理解できない人がいるという事を身をもって知ることができた。なるべく気を付けよう。

この3つの体験にて澤田さんの講義は終了した。

どれもその特性があることは知っていても、本当に体験してみるといかに大変かと自分で感じられたことはすごく価値のあることだったと思う。

outlineとはなんなのか?

 時間を空けて、次は前川さんのお時間。

「outlineを考える」と題してのディスカッションタイム。

さぁやろーども、考えてみよーぜ!の時間だ。

Outlineというのは外枠の事だ。

Webブラウザでサイトを閲覧しているとき、今選ばれているところに枠線が出るアレ(フォーカスインジケーター)のことだが、これを消してくれと言われることがあるそうだ。

にわかには信じがたいが、事実なのだそうだ。

ワタシは仕事を依頼されている層によるのか、今のところこのような指示は受けた事はない。お客さんに恵まれているのだと思う。運が良いのはワタシの特徴のひとつだ。運のみでなんとか37年ほど人生をやっている。

このフォーカスインジケーターは消していいのか?どうか?

なぜ消せと言われるのか?など皆で考えた。

MS-DOS世代のワタシは、これを消されると非常に困る。

消されてしまうと、Tabキーによる移動が困難になり、サイトの閲覧速度が激落ちくんになるからだ。

これは、ワタシの左手の機能が一部消失することと等しい。

だから消して欲しくないのだ。

ちなみにアクセシビリティのガイドラインとして全ての操作がキーボードで行えることという項目があり、フォーカスインジケーターを消すことはそもそも望ましくないのだそうだ。

そうであってくれて本当に良かった。

この話の最後、前川さんは一つのアイデアを提示した。

JavascriptとCSSをうまく使って、現在の入力がマウスやタッチならば出さない、キーボードならば出す、という動作を組み込むという選択肢だ。

個人的にはアリのようにも感じたが、アクセシビリティという意味ではやはり100%の回答とは言えないのだろう。澤田さんいわくモヤモヤはする、とのことだった。

Javascriptが動かない環境になってしまうとこれが成立しないところもモヤモヤポイントなのだと思う。ここはワタシが勝手に考えるモヤっと感だが。

※2018/09/06 9:30追記

JavascriptとCSSの切り替え、厳密には「what-input」というものを利用するのだが、これはJavascriptが動かない環境ではそもそも全ての条件下でフォーカスインジケーターが出る、とのご指摘を前川さんよりいただいた。前川さんありがとうございます。

よく考えれば、Javascriptが聞かなければclass変更が入らないから、そもそもを出す設定(というか標準のまま)にしておけばOKということ。

あぁ、このブログで打ち消し線が正しい意味で使われるなんて初めてだ笑

ちなみに、書いていた時点でoutline:noneについて探していたら、yuhei blogというブログでWhat-inputなどについて記載がみられたので追記ついでにリンクを記載。

:focus-ringという疑似クラスの利用について、そしてどうもそれが使い勝手が悪いのでwhat-inputを使おう、といった記事だ。こちらも興味があったら見てみていただくと、ワタシのつたないルポに加えて更に理解が進むかもしれない。

→yuhei blogを見る(what-inputについては、中段あたり「これがイマイチだったので代替手段を~」のリンクからジャンプ

以上追記おわり。

こうして1時間半におよぶ「リーダブルな夜」の初回勉強会は終わった。

本当はここから空腹のワタシ達の胃袋にひたすら唐揚げをたたき込む唐揚げフルな夜が待っていたのだが、ほとんど写真がないため割愛する。

リーダブルなまとめ

 アクセシビリティやリーダブルについては、現在までにワタシが関わったいろいろなことが100%できているかといわれると言葉につまるが、その想いは大いに共感出来た。

なるべく多くの人が使えるように、とデザインやコーディングなどするが、「アクセシビリティ」という言葉をかっちりきっちり教えて頂いた事で、より深いところまで見ようという気概が生まれた。

心に1本の槍を指すことができた気がする。

やはり勉強会には、なにかしらの成長があることはどうやら間違いないようだ。

そんな勉強会がまた一つ岡山で開催される。(告知タイム)

「さんかくデザイン研究会」

 デザインについての勉強会で、「デザイン」というものをもっと広く、この言葉に興味がある人達同士で意見交換したり、何かを考えたりする機会だ。

さんかくデザイン研究会のサイトを見る

ワタシが、色んな人と色んな話をしたくて会を立ち上げたのだが、何せこういう事を先導することに慣れていないため、至らないところも多いと思う。

初回は主にテーマディスカッションを行う。その時ご参加頂いた皆さんの反応や雰囲気をみて以降の内容を検討しようと思案中なので、興味があればサイトを見て、更に興味が湧いたらぜひ参加してみてほしいと願っている次第なのである。

リーダブルでありたいと思う。

 そう思うなら、まずブログ1記事辺りの文章量を減らしてみてはどうだろうか?

とワタシの頭の中の音声認識機能タナハシさんがささやくので今日はこの辺でLANケーブルを抜くことにする。またLANケーブルが挿されるのはいつの日か・・・(数時間後だ

※赤字に特別な意味を持たせるのはアクセシビリティに優れないのでなるべく控えましょう。

OTHER SNAPS