ドットコーダー│でろぐ

でろぐメインコンテンツ

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

ドットコーダー セッション5「ワイワイガヤガヤアクセシビリティ」に参加してきたよ!

昨日は何回か参加させていただいているイベント ドットコーダーのセッション5である「ワイワイガヤガヤアクセシビリティ」に参加してきました。
ドットコーダー セッション5 ワイワイガヤガヤアクセシビリティ

今回のテーマはアクセシビリティ。
アクセシビリティってなにっていう人はまずこのページを見てください
僕は
・普段サイトを制作する場合についつい忘れがちな音声読み上げブラウザなどの最適化などを少しまじめに考えよう!
・知らないことも多いのでこの機会に知識を得よう!
・セミナーに参加することで意識を高く持っていこう!
という目的で参加することにしました。
ドットコーダーは何回か参加させてもらってるんですが、毎回新しい発見・知識の獲得と自己の反省点の洗い出し、そしてモチベーションアップにものすごく役に立っています。
なので毎回素晴らしいのですが、今回も素晴らしかったです。
自分の復習の意味もかねまして少し紹介させてもらおうと思います。

●最初のセッション:ACRIプロジェクトの持田さんのプレゼン。
アクセシビリティについての基礎的な部分から現在の状況などをさらっと紹介してくれました。
細かい事は色々ありましたが印象深かったのは

・一生懸命作ったWebサイトが使えない人がいるかもしれない場合がある
・そしてその一生懸命作ったWebサイトで人が苦しむ事があるっていうのは悲しくないですか?

ということ。
いわれてみれば確かにそのとおりで、自分が作ったもの(どんなものにせよ世間に公開しているもの)は使ってもらってこそ意味があるものです。
見ることが出来ないというのは悲しいですし、ましてや人に対して苦痛を与えるものであって欲しくはないなと思います。
セッションを聞いて思ったのは、人に対する思いやりや優しさのようなプラスの感情がベースでアクセシビリティという考え方を使えば世界はもっと幸せになれるのでは?という事。
なんにせよまずは気持ちからというのはシンプルですがとても重要なことですし。

●みるくさんのセッション
音声読み上げブラウザ「NetReader」で実際に読み上げてみるというもの。
途中機器トラブルで進行が止まったりしましたが、実際の読み上げブラウザをが動作しているところを見るのが初めてだったので新鮮でした。
細かい点ですが以下のようなポイントを気をつけようと思いました。

・スペースの使い方
「期 間」と「期間」では読まれ方が違う「期(き) 間(あいだ)」と「期間(きかん)」とスペースを空けることで単語として認識しなくなる。
よく指示書とかのワードで文字間調整を行う場合に「期 間」のようにスペース付きで指示来る場合があるけどこれには注意しないと。
どうしてもその見た目を再現したいのであればCSSを当てて対応するとかしたほうがいい。

・時間の表現方法
例えば00:00でなく0時0分にしたほうが読み上げの時に時間であるということが分かりやすい。
細かいことですが分かりやすいにこしたことはないっていう話。

●あらたさんのセッション
キャプションに関するお話。
例えば動画の字幕をテキスト化することで次のようなメリットがある。
・アクセスアップに繋がる(テキストデータをGoogleがインデックスすれば検索エンジンからのアクセスアップに繋がる)
・認知の向上に繋がる(日本人が英語の発音だけでなく字幕があることでよりその言葉を理解する事ができるようになるような感じ)

これはかなり面白いことでとてもGoogleらしいというか発想が素敵でした。GoogleはYoutubeのコンテンツである動画をよりインデックスさせやすくするため動画データをテキストデータに書き起こし、インデックス化させやすくするということに力を入れているそうです。
ユーザーからすると目的のコンテンツを動画で見ることも出来ますし、字幕があればより深い認知に繋げる事もできます。
また、動画を見ようとするとそれなりに「まとまった時間」を費やす必要がありますがテキスト化された情報であれば「途中まで読んであとから読む」という動作もしやすいというのも大きなポイントです。
現在の動画に字幕をつけるサービス「CaptionTube」を使えばテキストデータ化した動画コンテンツを作ることもできるようです。今度やってみようと思います。

また、そのキャプションまわりで面白い話がHTML5でのキャプションの実装についてのお話。
現在策定中のHTML5の新要素でtrack要素という要素を儲けキャプションを定義付けするという話。
これが実現できればキャプションであると言う事が仕様として決められるのでおもしろいなーて思うのですがまだ仕様書もなくブラウザ未対応という事で今後に期待ということらしいです。個人的に是非実現して欲しいです。

セッションはこんな感じでして、あとは各テーブルブロックごとに今回のセッションを聞いてどう感じたかをグループディスカッション形式で話し合いました。
ここからがある意味ワイワイガヤガヤアクセシビリティですねw
僕のいるテーブルでもああでもないこうでもないと色々話をしました。
普段アクセシビリティに関しての題材のみでディスカッションを行うと言う事はまずないのでその時点でかなり新鮮です。
いろいろな人の話・考え方を聞くと脳が活性化されてとっても刺激的でいい感じでした。
聞いたことを話し合うことでさっき聞いた内容をより深く脳に刻みつけることもできて一石二鳥です。

そして最後に各テーブルごとに質問を発表しました。
僕が個人的にいいと感じたのは

・機種依存文字について
・実際どこまでやればいいの?

の2点。
まず機種依存文字は対応するべきなのかと言う事ですがそもそも機種依存をしている段階でアクセシビリティではないということ。
全くそのとおりで一部の環境でしか見れないということはそもそもの考え方から違うよねっていうことです。

そして実際に制作をしている僕らがどこまで対応するべきなのかと言う事に関しては「TPOに合わせてできるものから(優先順位の高いものから)やっていけばいいのでは?」
という事でした。そういわれても実際どうすればいいのかなというところに関しては「アクセシビリティの実践は、ワークフローへの組み込み」というスタンスで解決していくのがいい」というアドバイスでした。
確かに自分のワークフローにアクセシビリティチェックの項目を付け加えてしまえばいいと思いますし、かならずしもしなければならないと言うわけではなく時と状況に応じて「ここまではがんばろう」という自分の中での線引きをすればいいと思いましたのでさっそく今後は実践していこうと思います。
(僕の場合は個人なのでワークフローへの導入はかなりやりやすいんですがチームの場合は大変でしょうね。)

そんなわけでとても充実した3時間を過ごす事ができました。
今回参加したことで自分の中でのアクセシビリティに対する考え方は確実に変わったので、今後の制作物には少しづつでもできる範囲で今回のイベントで得た知識を組み込んでいけたらなと思っていますし、実践しようと思います。
そして次回以降のドットコーダーにも積極的に参加していこうと思います!

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

ドットコーダーセッション3「ゆるふわ愛されHTML5ポークチョップ」に参加してきました。

土曜日に何回か参加している勉強会ドットコーダーのセッション3「ゆるふわ愛されHTML5ポークチョップ」に参加してきました。
変な名前ですが要はHTML5を勉強しようというものでした。
HTML5はまだ策定中のHTMLの新しい仕様なのですが、わりかた出来てきているのでここらで押さえておいた方がいいなと思っていたので参加しました。
今回の勉強会はいつもと違ってワークショップ形式という事で参加者を6つのチームに分けて、実際に主催者が用意してくれたデザインカンプを元にデザインをHTML5で時間内にチームでコーディングするというものでした。
制限時間後は各チームで「どうしてこうなったのか?」というコードのプレゼンを行いました。

ワークショップ自体は知ってはいましたが実際にやってみてかなりいい刺激を受けました。
というのも基本的に制作をする時って個人でするものなのでコーディング中に複数人とコーディングの仕方について話すということがないので他の人の作業の仕方がみれたのも面白いポイントでした。
僕のいたチームは僕を含め3人だったのですがPCで入力してもらう係とアイデア出しと検証の係、プレゼンで話す係を割り当てて僕はプレゼンで話す係を担当しました。
他のチームは他のチームでそれぞれ独自に色々と面白そうに取り組んでいました。
なので最終的なプレゼンもチームの個性がでていて非常に面白かったです。

で、今回実際にHTML5でコーディングを行ってものすごく勉強になったのでちょっと忘れないように覚書をしておこうと思います。
(ここから下の紹介分はかなり自分視点で書いてます。なので「ここは間違いだ!」と思われましたら突っ込んでください)

hgroup
h1やh2みたいな見出し要素をグループ化してまとめておく時に使います。
使い方が微妙かなーと思いつつも文書の定義づけに意外と使い道がありそう。
将来的にはSEOでもけっこう重要になってくるのではないかと思います(その時までSEOという手法が使われていればの話ですが。)
コードだとこんな感じ

ここにh1

ここにh2

要素についての詳細ははこちら

<input type="search" />
これは全く知らなかったのでけっこううれしい発見だったんですがこの新しいinputの要素を使うと検索時に入力したキーワードをキャンセルするボタンみたいのが出てきます。だからどうしたという事ではないんですがサイトによく使われるサイト内検索用に定義された要素というのがいいなと思いまして。

article
サイトの内の「単独で再配布でき再利用できる」部分を定義する要素がarticle要素。
わかりやすくいうとブログのFeedで配信される部分のようなイメージです。
(ブログFeedにはナビゲーションとかパンくずとか入ってないですよね。普通は。)
ここがしっかり定義されていればここを見ただけで「このコンテンツがどういうものであるか」という判別がつくようになるという事なので将来的にユーザビリティ向上のために重要視される要素になるのではと考えています。

コードだとこんな感じ

ここにh1

<p>ここに本文</p>
ここにフッター

注目すべきポイントはやはりコンテンツ内に重複するheaderやfooter要素が内包できる事ですね。
要素についての詳細ははこちら

time
時間を定義する要素がtime要素です。コンテンツ内で表記すべき時間に関する部分を定義する時に使います。
僕的にはまだ完全に理解でききれていませんので今後の勉強課題です・・・。
コードだとこんな感じ

2009-08-30

要素についての詳細ははこちら

figure
本文から参照する画像とか表とかを定義する要素がfigure要素。
本文から参照するという意味合いなのでレイアウト目的に使用してはいけませんよというのが引っ掛けポイントで、今回しっかり引っかかってしまった要素です。
コンテンツの本筋にかかる部分の画像と注釈のセットが使用対象なのでコンテンツ内でも比較的重要度が高いという認識がなされるのはまず間違いないと思います。「この説明にかかる図表はこれだ!」というのにかっちりくる時に使うようにします。

コードだとこんな感じ

画像の代替文字列
画像の注釈

要素についての詳細ははこちら

blockquote
前からある要素で引用をするときに使う要素なんですけど、HTML5からはsectionと同じようなセクショニングコンテンツのような位置付けになるみたいです。ということでこのタグ内に見出し要素を入れることが出来ます。

コードだとこんな感じ

引用タイトル

引用本文

要素についての詳細ははこちら
でも僕は今回そのことよりも勉強になったのが引用についての認識でした。
課題にはカンプの下の部分に「ここ文章は引用です」と書いてあったのですがソース元がないし、コンテンツ作成者が集めた独自コンテンツならば引用ではないのではないかという事で僕たちのチームではblockquoteでくくらなかったんですが、他のチームの方の説明でも色々意見が分かれてました。というのも「引用と書いてあるがソースがない」という部分。ネットに慣れ親しみすぎるとついついソースありきで引用の有り無しを判断してしまいがちですが、例えばお客様の声のような実際に人が紙に書いたものをサイト内のコンテンツに使用する場合でも引用として成立するという考え方もあるという事です。考え方は人によって違うのは当然なのでどれが正しいのか判断しかねる部分ではありますがそういう考え方も出来るのかとけっこう衝撃が強かったです。もっと広い視野で物事を考える・主観的になりすぎない癖を付けていこうと思いました。

em・strong
文字列の強調を表すこの2つの要素はこれまで似たような使い方だったのですがはっきりと意味合いを分けられるようになっています。
意味合い的にはemが単なる強調で、strongがコンテンツ内での重要性を定義付けるものです。これによって文書内での意味合いによってemとstrongをしっかり分けてマークアップ出来ます。これまでが微妙に分かりにくかったのでこの仕様変更はうれしいです。

コードだとこんな感じ

ここは強調文章がここに入る※強い重要性

要素についての詳細はemはこちらstrongはこちら

aside
メインのコンテンツには関係しているけど、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページに使う要素がaside要素。セクショニングコンテンツなので見出しを含む文書構造になります。
今回のお題ではサイト内のバナーやおすすめ商品の部分でasideが使われることが多かったのが印象的です。

コードだとこんな感じ

いぬ

犬ってかわいいよね

要素についての詳細ははこちら

small
サイトの著作権表記に使用することが多い細目を定義付ける要素がsmall要素。
僕は普段あまり使わないんですが、今回は皆さんしっかり使ってました。
よくよく調べてみるとここしかないなって感じでフッターのコピーライト表記に最適だったりします。

コードだとこんな感じ

制作者連絡先
© copyright 2010 制作者 All Rights Reserved.

要素についての詳細ははこちら

という感じです。その他にもたくさん勉強になるポイントがありました。
参加されている皆さんのレベルがものすごく高くて僕のような中途半端な人間ではまだまだ勉強不足な感が否めませんでしたが、実際に参加して一緒に作ってみて、作った経緯の説明を聞いてかなり充実した内容でした。
おかげでかなり勉強になれましたし、自分自身のモチベーションアップにも繋がりました。
プレゼンするという機会もとてもいい経験になりましたしね。
次回以降も日程の合う限り参加して行こうと思いました。

ページトップに戻る