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`要素を使えばよいと言うことになっているため。個人的には勧めない。

本家Stack OverflowでHTMLの質問をしたら、仕様が変わったという話

とある人(筆者ではない)が本家Stack Overflowでfigure要素に関する質問をしたら、HTML Living Standardの明確化が行われたという話。こういうとき、英語で質問できると専門家(というかSpec Editor's)が直接回答してくれるのはつよいよなぁ…と改めて思ったり(英語力ください)。

What does reference mean in when using figure?
https://stackoverflow.com/questions/45070672/what-does-reference-mean-in-when-using-figure
dfn what it means for elements to be “referenced” by sideshowbarker · Pull Request #2841 · whatwg/html
https://github.com/whatwg/html/pull/2841

変更が入った(というか追加された)のは主に以下の部分

Elements can be referenced (referred to) in some way, either explicitly or implicitly. One way that an element in the DOM can be explicitly referenced is by giving an id attribute to the element, and then creating a hyperlink with that id attribute's value as the fragment for the hyperlink's href attribute value. Hyperlinks are not necessary for a reference, however; any manner of referring to the element in question will suffice.

Consider the following figure element, which is given an id attribute:

<figure id="module-script-graph">
  <img src="module-script-graph.svg"
       alt="Module A depends on module B, which depends
            on modules C and D.">
  <figcaption>Figure 27: a simple module graph</figcaption>
</figure>

A hyperlink-based reference could be created using the a element, like so:

As we can see in <a href="#module-script-graph">figure 27</a>, ...

試訳するならこんな感じか。

要素は、何らかの方法で明示的にまたは暗黙的に参照される(参照する)ことがある。 DOMにおける要素を明示的に参照できる方法の1つは、要素にid属性を与えて、そのid属性の値をハイパーリンクのhref属性値のフラグメントとしてハイパーリンクを作成することである。しかし、参照にはハイパーリンクは必須ではない。問題の要素を参照する任意の方法で十分である。
id要素が与えられる、次のfigure要素を考えてみよう:

<figure id="module-script-graph">
  <img src="module-script-graph.svg"
       alt="Module A depends on module B, which depends
            on modules C and D.">
  <figcaption>Figure 27: a simple module graph</figcaption>
</figure>

ハイパーリンクベースの参照は、要素を使用して作成することができる。このように:

As we can see in <a href="#module-script-graph">figure 27</a>, ...


…とまあ、教科書のような体裁であれば、図表番号付きの図表をfigureマークアップした上で、(ハイパーリンクで)参照するというのが仕様の意図するところ、というのがかなりクリアーになったんじゃないでしょうか。あるいは、Wordでいうところの相互参照に使うと言ったほうが分かりやすいという人もいるかもしれません。