Re: コンテンツのデザインとウェブデザイナーにできること

先週末に行われたというWCAN 2017 Summerのスライドを見て、若干なんだかなーと思ったところがあったので殴り書き。

スライド134以降にある

“<hn>になれなかった<p>問題”

ですけれども(おそらくコンセントさんの社内チャットだろう)、DTP用語が飛びかってますが、

タラシ
文字組みにおいて画像や本文の間に入れるアイキャッチ的な文字のこと。

デザイン用語辞典:グラフィックデザイン:た行:タラシ:デザイン事典

ショルダー
「サブタイトル」。

http://www.glocalcity.org/dtpyougo_sa.html

これらにぴったりのことがW3C HTML 仕様*1に書いてあると思います。代替案ですけども。

HTML 5.0とHTML 5.2でぱっと見、違いはないように見えるので訳文を見てもらえればいいと思いますが要するに、header要素で囲めばよろしかろうと。

言い換えるなら、裸のp要素と、セクション(セクショニングコンテンツではない)で囲まれたpとでは(headerはもちろんのこと、asidearticleなど)、意味合いが変わってくるのではないでしょうか、と。


あとはまあ、aria roleを使うとかですかね。現時点でどこまでご利益があるのかは不明ですが、電子書籍を念頭に置いたDigital Publishing WAI-ARIA Module 1.0仕様なんかですと、サブタイトルを表すのにdoc-subtitleというロールが用意されています。

<header>
   <h1>ここに見出しを入れて</h1>
   <p role="doc-subtitle">こっちに小見出しを入れる</p>
</header>

また、脚注に関してはHTML Standard 日本語訳にある「脚注」にも記述がありますし、dpub-ariaでもdoc-footnoteというロールが用意されていたりします。例えばこんな感じで。

<aside id="6baa07af" role="doc-footnote">
   * 脚注ってほら、やたら長いのあるじゃないですか、初めてのPerlみたいなの。
</aside>

出自はEPUB 3 Structural Semantics Vocabulary参考日本語訳)ということなので、DTPをかじったことがあるという人は、想像力をかき立てられるかもしれません(残念ながら、文書名にVocabularyとあるように、ボキャブラリーしか用意されていませんが。)


まあ、pでしか表現できないためにclassを使うというのも方法の一つでしょうが、それ以外のやり方もあるということですね。見た目に囚われることなく、コンテキストを反映できるHTMLを書けるといいかなって。

*1:なぜにLiving Standardではないのかというと、LSでは`hgroup`要素を使えばよいと言うことになっているため。個人的には勧めない。