Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

トップ > Web標準

alt属性が空なら、CSSで背景画像として扱うべきなの？

ユーザビリティ・アクセシビリティ Web標準

Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね？のはてブコメントで何名かの方が「alt属性が空ならCSS指定」というような意見があったので、そのへんのお話。

きっかけ

上記エントリーでは実際に視覚障害者からの一つの意見としてこういう考え方もあるんだよ、ということを紹介しました。

ただ、何名かの方からはてブで「alt属性が空ならCSSで指定」、もしくは「空のalt属性はあまり増やしたくない」というコメントがちらほら見受けられました。

またもや西村あさひ法律事務所より

その一方で、西村あさひ法律事務所のソースを読んでいると、次のようなコードが出現することが分かります。

<ul id="endof-content-area">
  <li>
    <a href="#header-area" class="rollover">ページの先頭へ戻る
      <img src="/common/img/icon_001.png" width="11" height="10" alt="" />
    </a>
  </li>
</ul>

<ul class="link-list-D01">
  <li class="pseudo-first-child pseudo-odd">
    <span>
      <a class="rollover wasting-span-inserted" href="/ja/attorney/partners.html">
        <img class="icon-A01" height="12" width="15" alt="" src="http://www.jurists.co.jp/common/img/icon_005.png"/>
        <span class="wasting-span">パートナー</span>
      </a>
    </span>
  </li>
</ul>

<h1>
  <img id="content-title-pic" height="319" width="256" alt="" src="/ja/attorney/img/content-title_pic_E1.jpg"/>
  <img height="40" width="256" alt="弁護士等紹介" src="/ja/attorney/img/content-title_heading_E1.png" title="弁護士等紹介"/>
</h1>

1つ目、2つ目のコードは三角のアイコン、3つ目はカテゴリトップのイメージ画像とでも説明すればよいでしょうか。

コーダーの方からすると、特に1つ目、2つ目の書き方には違和感を感じるかと思います。モダンなCSSの書き方[謎]では大体このように教えられるはずです。1つ目のコードを参考にCSSを紹介すると、

ul#endof-content-area li {
  padding-left: 20px;
  background: transparent url(hoge.png) left center no-repeat;
}

値は適当ですが、このような三角アイコンは背景画像として指定されることが一般的になっています。このあたりのことを考慮すると、西村あさひ法律事務所は変わったコーディングだといっても差し支えないと思います。

CSSで背景画像を使わないメリット

alt属性が空でも画像をHTMLで書く際のメリットは、いろいろと妄想するとこのあたりかなと思います。

  • クリック領域が広がり、ユーザビリティが向上しそう（ページの先頭へ戻るなど）。
  • 印刷の際に「背景画像を印刷しない」の設定でも印刷される（カテゴリトップのイメージ画像など）。つまりはブランディング。

うーん、ちょっと思い付きが弱いですかねー。いや、bAの中の人たちはもっと異なる動機だったのかもしれないですが。

で、みんなはどうしてるの？

CSS Nite in Osaka, Vol.12 「alt属性考」では取り上げなかったテーマなのですが、みなさんはどうしていますか？alt属性が空の画像はCSSで背景画像？それともHTMLで書きますか？もちろん、ケースバイケースという考え方もありだと思います。
ぜひコメント、TB、ブクマコメントなどみなさんの意見をお聞かせください。
先に書いておきますが、画像置換の是非について問うてるわけではないので、お間違いありませんように。

携帯用の告知ページのHTMLとCSSを公開しておきます。

お知らせ Web標準

インクルーシブデザインワークショップの告知ページの携帯用HTMLとCSSを書いたので、せっかくだから公開しておきます。

モバツイにインクルWSの広告出してるよ！

先日から宣伝しているインクルーシブデザインワークショップ with Re:Creator's Kansaiですが、先週あたりから携帯電話でもそれなりのデザインで閲覧できるように対応させました。

理由はワークショップそのもののテーマが携帯電話ということもありますし、またモバツイに無料で広告を出させてもらえると知り、f-shinさんにお願いすると快く承諾をいただいたので、せっかくならPCサイトを携帯で見てもらうのではなく、携帯用のページを用意しようかと思った次第。

せっかくだからコードを共有

コーポレートサイトそのものを携帯対応にしてほしいという案件は少なくとも僕の周り（NPO法人や公益法人等）では聞かないのですが、河野武さんのスライド「モバイル・サイトの重要性」などを読んでいると、携帯対応はWebサービスでは当たり前、コーポレートサイトもそろそろか、という印象を受けました。

携帯の現状のレンダリングを踏まえた上でどういったコードがベストなのかについては、僕自身はまだまだ勉強中です。しかし、勉強しようにもPCのWebサイトと違い、携帯のHTMLやCSSはなかなかのぞき見ることができません。というわけで、ベストプラックティスとはほぼ遠いですが、こんなHTMLとCSSを書くと、携帯電話ではこんな表示になるよという意味で下記のコードを確認してもらえればと思います。一応、3Gと呼ばれる機種のみをサポートするイメージで作りました。たぶん。

ついでなので、QRコードも生成してみました。

以下はメモなのですが、

  • 1つのコーポレートサイトを携帯向けにフルスクラッチで作成するのは時間も手間もかかりますが、1ページ、もしくは少ないページ数の告知ページなら練習がてらにはちょうどよいかな、と。無論、将来的には1枚のHTMLをCSSだけでPCと携帯と切り替えられるのが理想。
  • 凝った作りにするのであれば、サーバサイドや.htaccessでキャリア別にテンプレを振り分けるべきなのでしょうが、今回はhttp://www.re-creators.jp/inclusive/200811/への携帯からのアクセスをhttp://www.re-creators.jp/inclusive/200811/mobile/に飛ばすだけにしています。
  • 一応、DoCoMo、au、SoftBankの実機にて確認済み。
  • 前述のワークショップでは、この携帯用の告知ページを事前に視覚障害者の方にテストしてもらい、その結果も公表する予定（当日の会場のデジハリ大阪校は携帯の電波が届かないので）

参考サイト

そのうちのいくつかをメモしておきます。

コード

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta content="application/xhtml+xml; charset=UTF-8" http-equiv="Content-Type" />
<meta content="text/css" http-equiv="Content-Style-Type" />
<meta content="text/javascript" http-equiv="Content-Script-Type" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="robots" content="index,follow" />
<meta content="障害者や高齢者の生の声を取り入れながら携帯電話のﾌﾟﾛﾄﾀｲﾋﾟﾝｸﾞ" name="description" />
<meta content="ｲﾝｸﾙｰｼﾌﾞ,ﾃﾞｻﾞｲﾝ,ﾜｰｸｼｮｯﾌﾟ" name="keywords" />
<title>ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟ with Re:Creator's Kansai</title>
<link rel="alternate" media="handheld" href="http://www.re-creators.jp/inclusive/200811/mobile/" />
<style type="text/css">
	<![CDATA[
		a:link{color: #164964;}
		a:focus{color: #06A7CE;}
		a:visited{color: #295899;}
	]]>
</style>
</head>
<body>
<div color="#333333" style="font-size: xx-small;">
	
<div style="margin: 10px 0 0 0;">
<div style="text-align: center;" align="center">
<img src="logo.gif" alt="ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟ with Re:Creator's Kansai" width="178" height="58" />
</div>
<div color="#777777" style="margin: 10px 0 0 5px; font-color: #777777;">障害者や高齢者の生の声を取り入れながら携帯電話のﾌﾟﾛﾄﾀｲﾋﾟﾝｸﾞ</div>
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 0 5px 0 5px">

<div style="margin: 10px 0 5px 0;">
<span color="#74AF0A" style="font-size: small;"><font color="#74AF0A">■ ｺﾝｾﾌﾟﾄ</font></span><br /><br  />
Webｻｲﾄを制作する上でﾕｰｻﾞﾋﾞﾘﾃｨやｱｸｾｼﾋﾞﾘﾃｨが大事だというのは分かる。<br  /><br />
けれど、本当に障害者や高齢者のためになっているんだろうか。<br /><br />
Webﾃﾞｻﾞｲﾅｰやｺｰﾀﾞｰ、ﾃﾞｨﾚｸﾀｰの皆さんはそんなことを一度は考えたことがあると思います。<br  /><br />
それを解決するにはどうすればよいのか。本人に聞くのが一番確実で手っ取り早いですよね。<br /><br />
<strong>ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟ</strong>は、そんな僕たちがちょっとした新しい視点を得られる場なのです。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 10px 0 5px 0;">
<span color="#0B90BF" style="font-size: small;"><font color="#0B90BF">■ ﾜｰｸｼｮｯﾌﾟ</font></span><br  /><br  />
ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾜｰｸｼｮｯﾌﾟは、6名から7名を1ｸﾞﾙｰﾌﾟとしたﾜｰｸｼｮｯﾌﾟ形式で行います。<br  /><br />
そのうちの1名には必ずﾘｰﾄﾞﾕｰｻﾞと呼ばれる障害者や高齢者の方に入ってもらいます。<br /><br />
今回のﾃｰﾏは<strong>「携帯電話」</strong>です。<br /><br />
ﾘｰﾄﾞﾕｰｻﾞが普段どのように携帯電話を使い、どんなところが好きで、一方何に不満を感じているのかをﾋｱﾘﾝｸﾞし、携帯電話のﾌﾟﾛﾄﾀｲﾌﾟを制作します。<br /><br />
1. ﾘｰﾄﾞﾕｰｻﾞの携帯電話に対する意見をﾋｱﾘﾝｸﾞします。<br />
2. その意見をどんどんﾘｽﾄｱｯﾌﾟし、ｲﾒｰｼﾞを膨らませます。<br />
3. ﾌﾟﾛﾄﾀｲﾌﾟを制作します。<br />
4. ｸﾞﾙｰﾌﾟごとにみんなの前で発表します。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 10px 0 5px 0;">
<span color="#E28915"><font color="#E28915">開催概要</font></span><br  /><br  />
日時<br  />
└2008年11月19日水曜日<br />
　18時30分から21時<br />
場所<br  />
└<a href="http://dhw.weblogs.jp/_osaka/guide/guide.html">ﾃﾞｼﾞﾀﾙﾊﾘｳｯﾄﾞ大阪校</a><br />
定員<br  />
└20名前後<br />
参加費<br />
└2,000円<br />
　（領収書発行します）<br />
準備物<br />
└携帯電話
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 10px 0 5px 0;">
<span color="#E28915"><font color="#E28915">お申し込み</font></span><br /><br  />
お申し込みは<a href="http://uemachi.cotocoto.jp/event/28786">cotocotoお申し込みﾍﾟｰｼﾞ</a>の右側ﾒﾆｭｰの「参加申し込みはこちらから」に次の項目をご入力ください。<br />
<ul>
<li>お名前</li>
<li>ﾒｰﾙｱﾄﾞﾚｽ</li>
<li>電話番号</li>
<li>所属<br />（ﾃﾞｻﾞｲﾅｰ、ﾃﾞｨﾚｸﾀｰなど、学生の方は専攻等）</li>
</ul>
電話番号、所属に関しては任意となっておりますが、可能なかぎりお書きください。<br /><br />
なお、ﾃﾞｼﾞﾊﾘ生の方は先着4名まで無料で参加できますので、所属にその旨お書きの上ご登録ください。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />
	
<div style="margin: 10px 0 5px 0;">
<span color="#E28915"><font color="#E28915">お問い合わせ</font></span><br /><br  />
お問い合わせやご質問等に関しては、<a href="http://d.hatena.ne.jp/aratako0/">TRANS</a>のあらたの<a href="mailto:aratakojima@gmail.com">ﾒｰﾙ</a>、もしくは<a href="http://mixi.jp/show_friend.pl?id=4913021">mixi</a>まで。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />
	
<div style="margin-top: 10px;">
<span color="#E28915"><font color="#E28915">主催</font></span><br /><br  />
<ul>
	<li><a href="http://www.symlab.sys.i.kyoto-u.ac.jp/incl/">京都大学ｲﾝｸﾙｰｼﾌﾞﾃﾞｻﾞｲﾝﾕﾆｯﾄ</a></li>
	<li><a href="http://www.re-creators.jp/">Re:Creator's Kansai</a></li>
</ul>
</div>

</div>

</div>
</body>
</html>

CSS Variablesとコーディングフロー

日記 Web標準

お盆休み中ではあるのですが、なぜかほとんど休日出勤状態になっており、気分転換にメモ書き。

CSS Variables

元ネタは、

あたり。あと、CSS Variablesの本家のページのはてブのページも要参考。直近では、PHPを使っているとはいえ、[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリスというのも出てきているわけで、CSSがプログラム言語みたいになっているなーという印象。

コーディングフローの利便性

僕が上記の記事を読んでいて思い出したのは、HTML×CSSのプレビュー型とアーキテクト型コーディングフローという以前自分で書いた記事のこと。CSS Variablesが使えれば、これ簡単にできるよな、と。
例えば、functions.cssなんていうファイルを作っておき、そこでカラーやフォントサイズ、グリッドシステムのサイトであればmargin、paddingまでを変数としてあらかじめ書いておき、あとは本体のCSSで呼び出すだけ。HTMLの構造を維持したまま、CSSをうまく使いまわせますよね。いわゆるコンポーネントCSSというやつ。
また、メンテナンス性がすごく高くなると思います。もし、そのファイル名をfunctions.cssなどでWeb制作者の間で暗黙の了解を作っておけば、ユーザCSSも作りやすくなるのではないでしょうか。
ということをツラツラと考えていると、couldの長谷川さんも引用していますが、

CSS が CSS として行わればならないこと (タイポグラフィやレイアウト) にフォーカスするべきではないかと指摘。上級者には便利な拡張に思える CSS Variables だが、初心者を遠ざけてしまう恐れがあるのではないかと考えているそうです。

というところがやっぱり課題なのかなとは思います。ただ、初心者を遠ざけるというのは分かる気もするのですが、変数を書かないとCSSを組めないというわけでもないので（プログラムで変数が使えないとかなり痛いことにはなるでしょうけど）、個人的にはこの動きは賛成かなとは思っています。