Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ウェブアプリケーションのための
ユニバーサルデザイン
を読んだので共有する
2014/06/18 @patorash
先日図書館で借りてきました(2009年の本)
メタデータ
● 画像にalt属性を記述する
例)alt=”岡山駅前の桃太郎像”
画像がグラフの場合などは、altに傾向を書くとよいらしい
● titleタグは先にページの詳細を書く
例)会社概要 | 株式会社リゾーム
● リンクは視覚障害者のこ...
フォーム
● ラベルを正しく使う
● accesskey属性は使わない
ブラウザ毎の違いが多いから
● tabindexを使おう
tabキーで順序よく移動できるのは重要!!普通に作れば設定しなくても大丈夫
なことが多いが、複雑なフォームの場合は...
テーブル
● captionにはタイトルを記述する
● scope属性で関係性を表現する(row, col)
th scope=”row”
● テーブルレイアウトは絶対に使わない!
シーガルさんがテーブルレイアウトの本を出してしまったのが原因。...
スクリプティング
● 控えめに使う
● :hover問題
キーボードの場合、hoverできないのでサブメニューが表示できない。
:focusだと移動したらサブメニューが消える…。
そのため、onclickでサブメニューの切り替えにするとよい。
...
Ajax, ARIA(アクセシブル リッチ インター
ネット アプリケーション)
● アクセシビリティ用の拡張
● 主要なブラウザでサポートされているので安心
して使える
● 役割(role)や状態(aria-*)を定義して制御
● いっぱいあ...
プロセス
● 最後のほうになってから気にするな。最初から
意識しろ。設計が重要。
● ツールでチェックする。
W3Cバリデーションツールなど
● 本の中に書かれている20の質問を意識する
例えば・・・代替テキストはあるか?マルチメディアコンテン...
Upcoming SlideShare
Loading in …5
×

ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する

832 views

Published on

株式会社リゾームの開発チーム内勉強会での発表資料です。

Published in: Technology
  • Be the first to comment

ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する

  1. 1. ウェブアプリケーションのための ユニバーサルデザイン を読んだので共有する 2014/06/18 @patorash
  2. 2. 先日図書館で借りてきました(2009年の本)
  3. 3. メタデータ ● 画像にalt属性を記述する 例)alt=”岡山駅前の桃太郎像” 画像がグラフの場合などは、altに傾向を書くとよいらしい ● titleタグは先にページの詳細を書く 例)会社概要 | 株式会社リゾーム ● リンクは視覚障害者のことを考慮して、説明文 を残しておく ○ PDF<span class=”content”>で書かれたプレスリリース</span> ○ HTML<span class=”content”>で書かれたプレスリリース</span> ○ Word<span class=”content”>で書かれたプレスリリース</span>
  4. 4. フォーム ● ラベルを正しく使う ● accesskey属性は使わない ブラウザ毎の違いが多いから ● tabindexを使おう tabキーで順序よく移動できるのは重要!!普通に作れば設定しなくても大丈夫 なことが多いが、複雑なフォームの場合は使おう。 ● 必須項目には、必須と書く ● スパム対策にキャプチャは使うな
  5. 5. テーブル ● captionにはタイトルを記述する ● scope属性で関係性を表現する(row, col) th scope=”row” ● テーブルレイアウトは絶対に使わない! シーガルさんがテーブルレイアウトの本を出してしまったのが原因。 後に1997年に「ウェブを台無しにしてしまった」と謝罪している。
  6. 6. スクリプティング ● 控えめに使う ● :hover問題 キーボードの場合、hoverできないのでサブメニューが表示できない。 :focusだと移動したらサブメニューが消える…。 そのため、onclickでサブメニューの切り替えにするとよい。 ● サブメニューを含んだ専用ページを用意するほ うが楽な場合もある
  7. 7. Ajax, ARIA(アクセシブル リッチ インター ネット アプリケーション) ● アクセシビリティ用の拡張 ● 主要なブラウザでサポートされているので安心 して使える ● 役割(role)や状態(aria-*)を定義して制御 ● いっぱいあったので紹介しきれない ● 結構面倒そうだけれど、ECサイトなど、 障害者の方たちも使うところでは要りそう
  8. 8. プロセス ● 最後のほうになってから気にするな。最初から 意識しろ。設計が重要。 ● ツールでチェックする。 W3Cバリデーションツールなど ● 本の中に書かれている20の質問を意識する 例えば・・・代替テキストはあるか?マルチメディアコンテンツに補助情報をつけ ているか?HTMLが意味のある構造になっているか?メニューコンテンツをス キップできるか?キーボードだけで操作できるか?等々

×