Image may be NSFW.
Clik here to view.
アクセシビリティ
Image may be NSFW.Clik here to view.
(C)田中舘 一久
中根雅文さん、山本和泉さん、植木 真さんによるセッションです。
テーマは「アクセシビリティ」。
「アクセシビリティ」とは
Webアクセシビリティとは、基本的には、障害者がWebを利用できることである。もっと具体的にいうと、Webアクセシビリティとは、障害者がWebを知覚し、理解し、ナビゲーション（訳注：広義には、Webサイトのページ間やページ内を移動したり見てまわったりすること）し、インターラクション（訳注：Webに入力したり情報を受け取ったりしてWebを利用）できることである。ウェブアクセシビリティ基盤委員会 / WAIC: Web Accessibility Infrastructure Committee より引用 特に、中根さんはご自身が全盲のスクリーンリーダー利用者ということもあり、生の声が聞けて大変貴重なお話でした。しかも、中根さんがいつもスクリーンリーダーで情報を聞いている速度の速いこと速いこと！とても驚きました。 でも、音だけでインターネットから情報を得る時には、色々なつまづきもあるそうです。例えば画像で作られた表やグラフからは情報が得られない、「1/2(1月2日)」などと書かれた日付を稀にスクリーンリーダーが「にぶんのいち」と読んでしまう、などということです。 そういった事も考慮しながら、作り手は制作を進める必要があります。それが、「アクセシビリティ」の向上につながっていきます。 なんだかこうして聞くと難しそうに感じてしまいますが、意外とそんなこともなく、むしろ「あたりまえ」のことばかりのようです。それは植木さんがとてもわかりやすくお話してくださいました。 下記のリストはJIS X 8341-3の達成基準であり、どれも達成等級AまたはAAのものばかりだそうです。
アクセシビリティ チェック項目10
- 開始タグと終了タグがある
- ID(id 属性値)はユニークな値にする
- 一つの要素に同じ属性を重複させない
- ページタイトルは、ウェブページの内容が分かるよう に記述する
- 見出しやリストなどの文書構造をマークアップする
- リンクテキストは、リンク先が分かるように記述する
- 画像に代替テキストを提供する
- キーボードだけでも操作できるようにする
- 文字色と背景色のコントラストを確保する
- エラーメッセージでは、エラー箇所とその修正方法を 説明する
ツールと制作環境、電子書籍2012-2013
Image may be NSFW.Clik here to view.
(C)飯田昌之
こちらはCSS Niteの主催者である鷹野さんのセッションです。DreamWeaverやFireworksなどのAdobe製品や、電子書籍についてのお話でした。
特に私の胸を打ったのはPhotoshopのお話。先日、ついにPhotoshop CS6にFireworksのようなCSS3書き出し機能が登場しましたね！今まで「Fireworksはいいなあ〜」と指をくわえていたので、Photoshopメインで制作している私としてはとってもとっても嬉しいです！
ところで、CS6以前にも、PhotoshopにはCSS3を書き出すプラグインがあったようなのです。みなさんご存知でしたか？私は鷹野さんのお話を聞いて初めて知りました。
CSS Hat
Image may be NSFW.Clik here to view.
こちらは有料のプラグインのようです。なんでも、ベンダープレフィックスに対応しており、SaSSやLESS、Stylusにも対応しているのだとか！また、Photoshop CS4から使うことが可能です。
CSS3Ps
Image may be NSFW.Clik here to view.
こちらはフリーのプラグインです。Photoshopからブラウザを通してCSSのコードを抽出してくれます。CS3から使えるという所も嬉しいですね。
「Photoshop CS6」と「CSS3Ps」を比較してみる
今回は、Photoshop CS6と無料プラグインのCSS3Psを比較してみます。 下記のボタン（文字ではなく、角丸のほう）のコードを抽出してみたいと思います！ Image may be NSFW.Clik here to view.
Photoshop CS6
Photoshop CS6は簡単です。 オブジェクトを選択し、レイヤーパレット上で右クリックして「CSSをコピー」を選択します。すると、クリップボードにCSSが保存されますので、エディタか何かにペーストしましょう。 Image may be NSFW.Clik here to view.
抽出されたコードはこちら。
レイヤーの名前付けをサボったため、「角丸長方形」になっているのは見逃してください。
[css]
.角丸長方形_1 {
border-style: solid;
border-width: 1px;
border-color: rgb( 121, 189, 55 );
border-radius: 6px;
background-image: -moz-linear-gradient( 90deg, rgb( 144, 223, 72 ) 0%, rgb( 118, 210, 28 ) 11.743%, rgb( 167, 247, 108 ) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb( 144, 223, 72 ) 0%, rgb( 118, 210, 28 ) 11.743%, rgb( 167, 247, 108 ) 100%);
box-shadow: 0px 0px 5px 0px rgb( 11, 1, 4 );
position: absolute;
left: 104px;
top: 49px;
width: 328px;
height: 98px;
z-index: 6;
}
[/css]
CSS3Ps
お次はCSS3Psです。使うには、プラグインを公式サイトからダウンロードし、Photoshopにインストールしておいてくださいねー！ CSS3Psもまずオブジェクトを選択します。 その状態から、メニューバーの「ファイル」→「スクリプト」→「CSS3Ps」を選択。 Image may be NSFW.Clik here to view.
すると、ブラウザが立ち上がります。ここで少し待ちます。
Image may be NSFW.Clik here to view.
できましたー！
Image may be NSFW.Clik here to view.
抽出されたコードはこちら。
若干Photoshopよりも細かく指定されていますね。
[css]
角丸長方形 1
{
width: 330px;
height: 100px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #faf5ed;
-webkit-box-shadow: 0 0 5px rgba(11,1,4,.46), inset 0 0 1px rgba(255,255,255,.84);
-moz-box-shadow: 0 0 5px rgba(11,1,4,.46), inset 0 0 1px rgba(255,255,255,.84);
box-shadow: 0 0 5px rgba(11,1,4,.46), inset 0 0 1px rgba(255,255,255,.84);
border: solid 1px #79bd37;
background-image: -webkit-linear-gradient(bottom, #90df48, #76d21c 12%, #a7f76c);
background-image: -moz-linear-gradient(bottom, #90df48, #76d21c 12%, #a7f76c);
background-image: -o-linear-gradient(bottom, #90df48, #76d21c 12%, #a7f76c);
background-image: -ms-linear-gradient(bottom, #90df48, #76d21c 12%, #a7f76c);
background-image: linear-gradient(to top, #90df48, #76d21c 12%, #a7f76c);
}
[/css]