WEB

0か1かじゃない!

このエントリーはWeb Accessibility Advent Calendar 2015に参加しています。昨日12月9日は、sukoyakarizumuさんのHTML - ヘッダーを固定した表のアクセシビリティ - Qiitaでした。

今年、デザイニングWEBアクセシビリティという本が刊行された。その刊行を記念して、著者の大田さんと井原さんが秋口にはスクーで、秋には名古屋でセミナーを開講され、私も受講した。その中で大田さんは「アクセシビリティは0か1ではない」としきりに言っていた。

「◯◯を理解する。」ってなんだろうか。知らないことを見たり学ぶことは楽しいし、知った瞬間は「今後に活かせそう。」とか「広げたい」とか「なごんだり」できる。快感である。

知識を行かさなければいけない時は不意打ちでくる。そのたびに自分が持っているものを総動員して〈こと〉にあたる。ことがこれから大切になればなるほど、ひとつひとつのことをスピードを持って判断しなくてはいけない。この無情さはなんなのだろうか。

準備を万端にして行っていざその場にいったら準備がまったく役立たなかったこともよくある。泣きべそかきながらなんともなかったように対処することもあるだろう。対人。対自分。対その場の空気。

どんな子供時代を過ごして、どんな勉強をして、どんな生活をして・・・・会う人会う人にそれを聞くことはできない。バックボーンが違うから、そこからいろいろな視点が生まれてその積み重ねが社会を作っている。そのことを踏まえるか踏まえないかでだいぶ違うと思うのだ。知らなかったことは知らなかったで別にいいと思う。そこばっかり恥ずかしがって、それを隠そうとしているから、そのことの本当のシーズが見えなくなっていることが多いのではないか。

お願いだ。「その場で否定する」ことだけはやめてほしい。たぶん否定した人たちは忘れていると思うが。想像してとか知識を持ってとかは言わない。〈可能性〉を持たせて欲しいのだ。何がどうなるとかその時にはわからない。けれど、何かがどうなるかもしれないのだ。わからなければ、人に聞くなり、検索すればいい。そこは素直にきればいい。知らなかったことにこだわってそこを恥ずかしがるから、本当のことが見えてこない。聞けば、ていねいに丁寧に教えてくれるはずだ。

そして思いっきり試行錯誤すればいい。おもいっきり。最終的に、うまくいかなかったり負担がかかるようなら無理にとは言わない。

やるかやらないか。0か1だけではないはずなのだ。

明日は、nintaroさんの“知らない世界”を知ることが容易になった世界で。です。


アクセシビリティからはじめる、WebサイトのUXデザイン に参加してきました。

日時 2015年10月24日
場所 河合塾学園 トライデントコンピュータ専門学校
講師 BA太田さん、Gaji-Labo山岸さん

アクセシビリティからはじめる、WebサイトのUXデザイン に参加してきました。アクセシビリティ関係のセミナーは久しぶりでこの秋受講したいなと思っていたところ、名古屋でのセミナー開催を知り申し込みました。大田さんはこの夏『デザイニングWEBアクセシビリティ』という本を出し秋口にスクーで連続授業をされていました。大田さんの話が聞けるということで楽しみにしていました。

冗長なaltと組織図問題

大きな組織になると、組織図をホームページに掲載するシーンがあるけど、altなりキャプションはどうするかなという話もでました。視覚障害者への図の情報提供は難しいです。スクリーンリーダーでの読み上げ時のこともありますが、点字で提供された表でさえも点字を掲載するので紙が大きくなるのもあり、表全体の把握することが難しいという話も聞いたことがあります。組織図の例で行くと・・・
(1)全部かく。
(2)主な役職だけかく。
が紹介されていました。


 

組織図 イメージ


この他にも、
必要でしたら、以下連絡先までお問い合わせください。連絡先◯◯◯と記述してもいいですね。


cssでの画像置換は避けて!

意味のある画像はcssで指定するのではなくHTMLに書き出しましょう。

カルーセル問題

案件でやったことはないのですが、トップページで画像を3から5枚あって勝手にスライドしていくやつです。
(こんな説明で分かる人いるのか?)
この手法はまずスククリーンリーダーで読まれない。
その上で・・・
この手法はしばしばサイト所持者の政治的利用に使われる
サイト所持者の怠慢でトップにのせる順番を決めれないときにつかわれる手法
↑部署間の対立を抑えるための政治的利用←サイト所持者の怠慢
肢体障害の自分でも使いにくいです。クリックしようとすると次の画面に行ってしまうケースが多々あります。

自分に(が)できること

セミナーの最後は“自分にできること”を付箋に書くワークでした。この頃はあまりコードをガリガリ書かないので、すぐに思い浮かびませんでした。しばらく考え以下のことを書いてみました。

・変な画像説明を改める
・コントラスト比について調べてみる
・NVDAのシュミレーターをみる

冒頭に書いた冗長なaltをつけないのは今後きちんと徹底させたいです。何でもかんでもaltをつけるのではなくきちんとスクリーンリーダーユーザーにもページ全体の構成がわかるようなalt付けを心がけたいです。
JIS8341が制定された時のWCANで取り上げられたコントラスト比これも改めて調べてみたいと思いました。
自分のパソコンに入っているNVDA。シュミレーター機能があることは知りませんでした。
もう1つ思いついたのが、大手企業ページのアクセシビリティポリシーを見てみる。企業ごとで書いてある内容も違っておもしろい様です。

最後に、じゃんけんで『デザイニングWEBアクセシビリティ』をもらいました。どうもありがとうございました、

障害を持つ身として「アクセシビリティ大事だよね」とわかっているつもりなのですが、実作業でなかなかとりくめていないなぁという中で参加したセミナーで、次にすることも見えてきたと思います。
大田さん・山岸さんありがとうございました。

考える場所、必要ですね。


WEB アクセシビリティーとリストタグ

Web Accessibility Advent Calendar 2014 12月16日を担当しますchabin_desugaです。よろしくお願いします。身体に障害があります。

さっそく本題

今年6月にTwitterでこんなことをつぶやきました。

list-style-typeでつけられた番号ってスクリーンリーダーで読みあげれるのだろうか?先生に聞いてもよくわからない。。

そうです。案件で箇条書きにする必要があったのです。色の話・スクリーンリーダーの話・リンクボタンの話・・・いろいろWEBアクセシビリティで取り組まなくてはいけないものはいろいろありますが、今は「これスクリーンリーダーでは読み上げるの?」の一点止まりになってしまっています。この点は、来年以降の自分の課題になっていくと思われます。

とりあえず

リストタグを使ったテストページを作り、友人のスクリーンリーダーユーザーに「これどう読み上げるの?」的に投げてみました。

ページとcssの構造は以下のとおり。(ページ内容はつけましたが適当に他の人のページをコピペしたのとそれがこのエントリーの目的ではないので、今回は割愛します。)

ソース

テストソース1 数字を手入力
1.hoge<br>
2.hoge<br>
3.hoge<br>
4.hoge<br>
5.hoge<br>
テストソース2  数字で表示
<ol>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ol>
テストソース3 <ol style="list-style-type:desimal;/*数字で表示(上のolタグと同じ)*/">
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ol>
テストソース4 <ol style= "list-style-type:upper-alpha;/*大文字アルファベットで表示*/">
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ol>

ブラウザ



仮説


「スタイルシートは読まないと思うが、olタグは読むのではないか?」

読んでもらった

スクリーンリーダーにはいくつかありますが、今回は「PC-Talker(株式会社 高知システム開発製)」・・「FocusTalk」(株式会社スカイフィッシュ製)・NVDA(任意団体 NVDA日本語チーム製)とiphoneの「voiceover」の4つで試し読みを実施しました。
NVDAでは、olタグ・スタイルシートとも読みますが、アルファベットで記述したところ(テストソース 4)も数字で読んでしまいます。「PC-Talker」・「FocusTalk」・「Voiceover」ではなにも読みませんまない。協力してもらったスクリーンリーダーユーザーからは「ホームページを見ていて番号付きの箇条書きはみないな」という声をもらいました。

そうですか。

リストタグでマークアップするとリスト部分の1段右に行くので見栄え的にはいいから今後も積極的に使っていきたいが、アクセシビリティ的にはまずいのか・・・。

WAI-ARIA??

このアドベントカレンダーでも取り上げられている"WAI-ARIA"。
W3Cが2014年3月20日に勧告したもの、
詳しい説明は他の方のエントリーを見てもらうとして、もしかするとこの勧告で発効されたプロパティで読ませることはできないかと思いました。文字列が指定できるプロパティは、"aria-label"と"aria-value-text"のみ。そこで、以下のソースを用意し再び読んでもらいました。

ソース

<ol>
  <li aria-label="1">hoge</li>
  <li aria-label="2">hoge</li>
  <li aria-label="3">hoge</li>
  <li aria-label="4">hoge</li>
  <li aria-label="5">hoge</li>
</ol>
次はスタイルシートで数字をつけて aria-valuetextで
<ol style="list-style-type:decimal;">
<li aria-valuetext="1">hoge</li>
<li aria-valuetext="2">hoge</li>
<li aria-valuetext="3">hoge</li>
<li aria-valuetext="4">hoge</li>
<li aria-valuetext="5">hoge</li>
</ol>
最後はスタイルシートで大文字アルファベットをつけて aria-lebel
<ol style="list-style-type:upper-alpha">
<li aria-label="A">hoge</li>
<li aria-label="B">hoge</li>
<li aria-label="C">hoge</li>
<li aria-label="D">hoge</li>
<li aria-label="E">hoge</li>
</ol>
<ol style="list-style-type:decimal;">
<li aria-valuetext="A">hoge</li>
<li aria-valuetext="B">hoge</li>
<li aria-valuetext="C">hoge</li>
<li aria-valuetext="D">hoge</li>
<li aria-valuetext="E">hoge</li>
</ol>

ブラウザ



結果は?


「PC-Talker」・「FocusTalk」・「Voiceover」ではなにも読みません。NVDAですが、スクリーンリーダーユーザーからは「数字部分は読むが、アルファベットは読まず数字で読むな。」という回答でした。だが実際に自分も「NVDA」をいれ確認したところ、「NVDA」と相性が良いとされるブラウザ「Firefox」で読ませたところ、アルファベットも読みました。

まとめ

まず、数字が記述されるolタグがスクリーンリーダーで読まれないということは驚きでした。"WAI-ARIA"という勧告の概要もこのエントリーをまとめていく中でなんとなくわかりました。そのなかで勧告にスクリーンリーダーの機能が追いつけていないという現状もなんとなく見えてきました。今回はリストタグを例に書いてきたわけなのです。勧告は勧告なわけでそれにパーフェクトに答えても「実は・・・」ということが今回わかりました。

スクリーンリーダーユーザーは好みのスクリーンリーダーを使っています。詳細はよくわかりませんが、スクリーンリーダーと相性の悪いソフトもあるようなのです。風の声でよく聞こえてくるのは、skypeのバージョンを上げた途端スクリーンリーダーでまったく読まなくなったとか、「skypeのあのバージョンはよかったよね」という話があります。スクリーンリーダーユーザーのWEBブラウジングに関していえば、ただ、「勧告に従えぱ、対応が完了!ではなく」ということをまずはざっくり把握することが必要と思うのです。