2.IDEA

JP only

「ブログ記事のヘッダー」と「サイドバー」に関するマークアップ論争(MarkupCafe Fukuoka Vo.1 @ html5j)

先日、html5jマークアップ部が開催しているマークアップの勉強会「MarkupCafe Fukuoka Vo.1」に行ってきました。勉強会の内容は、あるデザインを想定して、それを実装する際にどういうマークアップが好きかを議論する、というものでした。今回は以下の二つについて議論しました。

  1. ブログ記事のヘッダー
  2. 2カラムサイトのサイドバー

5つの班にわかれ、班ごとに最適だと思うマークアップを決め、発表し、全員で投票をして一番票の多い班が優勝、というゲーム形式の勉強会でした。

HTML5 experts.jpさんで運営の方が書いた記事がアップされていました

ブログ記事のヘッダーのマークアップ

ひとつめは、多くの情報がつまったよくあるブログのヘッダーです。ヘッダーの情報が、サイトや記事にとってどういう位置付けになるか、というのがマークアップのポイントだったかと思います。

お題

お題として使用された画像を、以下に示します。

HTML5 experts.jpのブログのヘッダー画像

論点

(個人的に)興味深い論点は3つありました。

  1. パンくずリスト
  2. 著者名とその著者の顔写真
  3. 星の数で評価数を示す評価欄

1. パンくずリスト

前半は、東京で行われた同勉強会(MarkupCafe)でも議論されたような「olにするかulにするか」みたいな話が出ました。

しかし、最終的に、知識の深い方々の「いろいろ考えるより、googleが推奨してくれてるかたちがあるんだから、それに従ったほうがいいんじゃない?」という声に、皆がひれ伏していたような雰囲気でした。おっしゃる通りですね。

また、パンくず自体をarticleに含めるか外に出すかという議論もありました。多くの人が、「外に出した方がいい」と言っていた印象ですが、そうではないという声もありました。外に出す派の主張は「パンくずは、『記事についての情報』ではなく『サイト全体についての情報』であるから記事の中に含めるのはおかしい」で、含める派の主張は「パンくずは、記事のアドレス(場所)を示す『記事についての情報』とも考えられるから含めても不自然ではない」みたいな感じだったかと思います。

あと、パンくず内の矢印「>」を画像で表示し「alt="の中の"」とすることで、スクリーンリーダーに読ませたときに、階層を「〜の中の〜の中の〜」と伝えることができるよ!と言っている方がいて、個人的にかなりお気に入りでした。

2. 著者名とその著者の顔写真

figureを使う班、使わない班、使う班の中でもfigcaptionを使う班、使わない班と本当に多様な印象を受けました。正直、自分がこういうデザインをコーディングをするなら「figureなんて使わねえよ」って思いました。マークアップにこだわるのもいいですがスタイリングで苦労するくらいだったらやめたほうがいいですね。

3. 星の数で評価数を示す評価欄

星をimgで表示させる際に、スクリーンリーダーを考慮したらaltをどうつければいいかという話で盛り上がっていました。星を一つひとつimgで表示して、最初の星だけにalt属性(alt="4.5個の星です")をつけて残りの星にはaltをつけない、という話を聞き、「imgにはalt属性は必須」という固定概念を持っていた自分にはとても新鮮で感動しました。

勉強会後に私が最適だと思うやり方

勉強会での反省や全チームの意見を参考にして、今私が考えられる最善のマークアップを以下に示します。

 1 <div xmlns:v="http://rdf.data-vocabulary.org/#">
 2 	<span typeof="v:Breadcrumb">
 3 		<a href="#" rel="v:url" property="v:title">HTML5Experts.jp</a>
 4 		<img src="img/arrow.png" alt="の中の">
 5 	</span>
 6 	<span typeof="v:Breadcrumb">
 7 		<a href="#" rel="v:url" property="v:title">中島 直博</a>
 8 		<img src="img/arrow.png" alt="の中の">
 9 	</span>
10 	<span typeof="v:Breadcrumb">
11 		<a rel="v:url" property="v:title">続・よくある3つのデザインから考え...</a>
12 	</span>
13 </div>
14 
15 <article vocab="http://schema.org/" typeof="Blog">
16 	<header>
17 		<h1 property="headline">続・よくある3つのデザインから考える、マークアップの最適解</h1>
18 		<img src="#" alt="中島直博の顔写真">
19 		<span property="author">中島直博</span>
20 		<time property="datePublished" datetime="2013-11-08">2013年11月8日</time>
21 		<ul>
22 			<li><a href="#">CSS</a></li>
23 			<li><a href="#">マークアップ</a></li>
24 		</ul>
25 		<aside>
26 			<ul>
27 				<li>いいね</li>
28 				<li>ツイート</li>
29 				<li>g+</li>
30 				<li>B!</li>
31 				<li>Pocket</li>
32 				<li xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Rating" data-score="4.5" title="5つ星のうち、4.5個の星です"><span><span property="v:best">5</span>つ星のうち、<span property="v:value">4.5</span>個の星です</span></span>6人が評価しています。</li>
33 			</ul>
34 		</aside>
35 	</header>
36 	<!--コンテンツ-->
37 </article>

2カラムサイトのサイドバー

ふたつめは、企業サイトなどでよくある2カラムサイトのサイドバーです。「記事を遷移するための内部リンク」と「外部リンク、バナー」のマークアップをどう分けるかがポイントだったかと思います。

お題

お題として使用された画像を、以下に示します(ページ全体の画像ですが、サイドバーのみのマークアップです)。

よくある2カラムの企業サイトの画像

論点

こちらも、興味深い論点は3つありました。

  1. リストにul,olのどちらを使うか
  2. imgのalt属性について
  3. 実務での妥協点

1. リストにul,olのどちらを使うか

記事遷移用の内部リンクリストにて、olを使う班とulを使う班が分かれました。また、ulを使用した上で、カレントページの次と前に「rel="prev" rel="next"」を使い前後関係を明示する班もありました。

そもそも「どういう内容かがわからない」から何が正しいかの判断が難しかったのですが、最終的に「メンテナンス性を考えるとulのほうが賢いのでは」という話に落ち着きました。

2. imgのalt属性

ブログヘッダーのときも話にあがったalt属性、おそらくこの勉強会で一番長く話題にあがっていたのはalt属性だった気がします(笑)

議論の発火役となったのは、バナーの画像でした。alt属性には「マークアップカフェについて」「マークアップカフェについてへリンク」「マークアップカフェについてのバナー」と班によって様々な使われ方をしていました。

この議論を皮切りに、部長からalt属性についてありがたいお話を頂きました。
簡単に言うと、alt属性は本来「画像を見ることが出来ないユーザー」に「どういう画像であるか」を伝えるためにあるもの、ということでした。

何も考えずにマークアップをやっていたら、よく、以下のようなalt属性の使い方をしがちです。

  1. 画像が「何であるか」説明(例:alt="神戸の夜景")
  2. 画像のリンク先(例:alt="HTML5 experts.jp")
  3. 画像の機能(例:alt="トップへ戻る")

しかし、これでは「結局、その画像はどう見えるの?」ということが、わからないままです。そのため、「神戸の夜景」ではなく「ビルが何本くらい建っていて、左には大きなタワーがあって...」といった説明をするのが、本来のalt属性のあり方だということです。

でも実は、神戸の夜景のくだりは「そうはいうけど、実際これを的確に説明するのは無理でしょ!」という流れで使われました。

だから結局、「W3Cとかがこう言っているから」ではなく、あらゆるユーザー(画面が見える人と見えない人など)間の「情報の格差」が最小限にできているかということが大切なんですね、っていう話でした。

3. 実務での妥協点

「さんざんセマンティック、ユーザビリティいうてますけど、実務でそこまで考えないでしょ?」という元も子もないような話が最後の方に出てきました。

しかし、納期に間に合うようにした班や、CMSで使うとき項目ごとにウィジェットとしてまとめたいからdivでくくった班など、実務に即したマークアップが多くの人に共感されている印象をうけました。

でも実際、そりゃそうだと思いました。考えを深め、何が正しいか追求していく姿勢は大事ですが、それに囚われすぎて納期に間に合わなかったらそれこそ元も子もないですからね。

勉強会後に私が最適だと思うやり方

こちらも、今私が考えられる最善のマークアップを以下に示します。

 1 <div>
 2 	<nav>
 3 		<h2>マークアップカフェ</h2>
 4 		<ul>
 5 			<li><a href="">タイトル01</a></li>
 6 			<li><a href="">タイトル02</a></li>
 7 			<li><a href="">タイトル03</a></li>
 8 			<li><a href="">タイトル04</a></li>
 9 			<li><a href="">タイトル05</a></li>
10 			<li><a href="">タイトル06</a></li>
11 			<li><a href="">タイトル07</a></li>
12 			<li><a href="">タイトル08</a></li>
13 			<li><a href="">タイトル09</a></li>
14 			<li><a href="">タイトル10</a></li>
15 		</ul>
16 	</nav>
17 	<aside>
18 		<h2>バナー</h2>
19 		<ul>
20 			<li><a href="" rel="external"><img src="" alt="マークアップカフェについて"></a></li>
21 			<li><a href="" rel="external"><img src="" alt="マカベンについて"></a></li>
22 			<li><a href="" rel="external"><img src="" alt="マカベンについて"></a></li>
23 		</ul>
24 	</aside>
25 	<aside>
26 		<h2>福岡のIT勉強会</h2>
27 		<ul>
28 			<li><a href="" rel="external">ダミーテキスト</a></li>
29 			<li><a href="" rel="external">ダミーテキスト</a></li>
30 			<li><a href="" rel="external">ダミーテキスト</a></li>
31 			<li><a href="" rel="external">ダミーテキスト</a></li>
32 		</ul>
33 	</aside>
34 </div>

まとめ

皆さん本当に深い知識を持っているな〜と感心しました。実務経験が長いからこそ考えられるような視点が、自分にとって一番ためになりました。この勉強会で得た教訓は以下です。

  1. imgのalt属性は奥が深い
  2. 納期>セマンティック
  3. 目が見えなくても読めるマークアップを!