Hatena::ブログ(Diary)

聴く耳を持たない(片方しか)

2015-12-31 今年購入して良かったもの 2015年版

例年大晦日に続けてる、その年に買って良かったもの記事を今年も更新します。


今年買ったもので最も気に入っているのが、こちら。

続きを読む

トラックバック - http://d.hatena.ne.jp/rikuo/20151231

2015-12-02 スクリーンリーダーのシェアを調べた研究報告書の紹介

一般のブラウザのシェアについてはStatCounterNetMarketShareといった調査サイトで情報を公開しており手軽に調べられるのですが、視覚障害者が使用するスクリーンリーダーの利用状況については絶対数が少ないこともあってかなかなか調査しにくく実態が掴むのは容易ではありません。

どういった環境を使うことが多いのか?例えばOSやバージョン、よく使われるスクリーンリーダーなど。

そういった点について、調査を行った研究報告書が公開されているのでその内容を一部抜粋して紹介していきます。


続きを読む

トラックバック - http://d.hatena.ne.jp/rikuo/20151202

2015-12-01 SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました

この記事はSVG Advent Calendar 2015への参加記事です。初日の今日は私(id:rikuoid:rikuo)が担当します。

第2日目は@masuPさんが「ラスタ画像を配置したSVGファイルを作成する際に気をつけること | トレンドウォッチ | デジパ株式会社」を投稿されています。

SVG Advent Calendarはまだまだ空きもあるので、気軽にご参加ください。



はじめに

SVGはJPEGやPNG, GIF画像と同じように様々な要素で利用でき、

<img src="foo.svg" alt="代替テキスト">

このようにimg要素や


CSSのbackground-imageなどで使えます。

div{
	background-image: url("foo.svg");
}


このときSVGに未対応な古い環境ではどうなるかというと例えばimg要素であれば、何らかの理由で表示に失敗した画像(JPEG, PNG, GIF画像など)と同様に代替テキストが表示されるだけで、SVGだからといって特別変わった挙動をするわけではありません。


しかしSVGは画像ファイルという側面もありますが、実態はXMLを基盤にした画像記述言語ですから、HTML5では直接HTML内に記述するインラインSVGが使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<svg width="200" height="200">
	<path d="m101 174c-8-1-29-7-51-24-25-19-42-54-42-77 0-26 14-50 48-50 21 0 32 14 38 23 3 4 4 7 6 10 1 1 1 1 2 0 2-3 3-6 6-10 7-10 18-23 38-23 34 0 48 24 48 50 0 23-17 58-42 77-22 17-43 23-51 24z" fill="#ff9fcb"/>
</svg>
</body>
</html>

こうした記述の仕方はJPEG, PNG, GIF画像などとは異なりSVG独特の利用方法です。

そんなインラインSVGをSVG未対応の古いブラウザではどのように扱うのか?といったところをこの記事ではまとめてみました。


……なぜなら、img要素のようにシンプルな挙動では無いんですよね。

続きを読む

トラックバック - http://d.hatena.ne.jp/rikuo/20151201