某プログラミング知識共有サービスっぽい古いエントリーへの注意書きを付けてみた

ふと思い立って、某「プログラミング」知識共有サービスっぽく、一定以上古いエントリーに対する注意書きをこのブログに付けようと思い立った（ネタとしては何番煎じもいいところだと思う）。
ちょうどいい塩梅に、同じはてなブログでやりたいことを実現しているブログエントリーがあったので、基本方針としては次のブログを参考にした。

はてなブログで古い記事に自動でメッセージをいれる: http://tsuredureweblog.hatenadiary.jp/entry/2015/09/09/074835

コードの検討

上記ブログでは空のHTMLとして、

<div class="message"></div>

という具合に、お約束の如くdiv要素を使用しているものの、何でもかんでもdiv要素を使えばいいってものでもないだろうということで、aside要素を選択したい。（ちなみに、前述の某サービスも似たような感じでdiv要素で埋め込まれているようだった）

<aside role="note"></aside>

classの代わり、というのは若干語弊があるけれども、ここではARIA roleを使おうと思う。ARIA in HTMLによれば、asideに対する暗黙のARIAセマンティックスはrole=complementaryであり、使用してもよいARIAロールとしてnoteがその1つに挙げられている。WAI-ARIA 1.1によればこれらのロールはそれぞれ、

complementary （ロール）
DOM階層において同等のレベルで主要コンテンツに相補的であるよう設計されたが、主要コンテンツから分離される際に意味のあるままにする、文書のサポートセクション。
このロールを適切に持つコンテンツの様々な種類が存在する。たとえば、ポータルの場合に、これは含まれるが、視聴時間、現在の天気、関連記事、または注目の株に限定されるものではない。包含されるコンテンツを示す補完的なロールは、主要コンテンツに関連する。相補的なコンテンツが主要コンテンツから完全に分離可能である場合、より一般的なロールを使用することが適切だろう。
ユーザーエージェントは、ナビゲーションランドマークとしてcomplementaryのロールをもつ要素を扱うべきである。
WAI-ARIA 1.1 訳 complementary （ロール）

note （ロール）
コンテンツがリソースの主要コンテンツに挿入的または付随的であるセクション。
Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

と言うことで、何気にランドマークロールであるcomplementaryよりも、noteの方がより適切ではないかと考えてこれを選択した（とはいえあまり自信はないので、ぜひ識者の声を頂きたい）。

でまあ、あとはstrong要素で重要性をさりげなくアピールすると。結局挿入したいHTML断片は次のようになる。

<aside role="note"><strong>この記事は、投稿されてから1年以上経過しています。</strong></aside>

さて、JavaScriptはというと、前述のブログはたいしたことないDOM操作にもかかわらずjQueryに依存しているので、バニラなJavaScriptで次のように適当に書き直した。というかいちいちHTML側にHTMLを埋めるのも癪なので、全部DOMにやらせた。（js使いの人はもっとマシなコードを書くんじゃないかと思う。）

ここから追記

モバイルUAだと表示されない？
— ますぴー🅿️ (@masuP9) 2017年9月1日

モバイルのことを考えてなかったので、少しマジメに判定した。

document.addEventListener('DOMContentLoaded', function() {
  let notebody = document.createElement('aside') 
  notebody.setAttribute("role", "note");
  notebody.innerHTML = '<strong>この記事は、投稿されてから1年以上経過しています。</strong>'; //なんかもう面倒になってきたんで
  let currentdate = new Date();
  currentdate.setYear(currentdate.getFullYear() - 1); // 1年引く
  let pubdate;
  if( document.querySelector('.entry-date') != null) {
    // 投稿日は`div.entry-date`の孫要素（`time`）の`datetime`属性値から取得（デスクトップ）
    pubdate = new Date(document.querySelector('.entry-date').firstElementChild.firstElementChild.getAttribute('datetime'));
  }
  else {
    // 投稿日は`header.entry-header`の孫要素（`time`）の`datetime`属性値から取得（モバイル）
    pubdate =new Date(document.querySelector('.entry-header').firstElementChild.firstElementChild.getAttribute('datetime'));
  }
  if (currentdate > pubdate) {
    // div.entry-headerの最後の子として挿入
    document.querySelector('.entry-header').appendChild(notebody);
  } 
});

CSSは例によってidはもちろんclassすら使わない感じで（どうせ<aside role=note>なんかテンプレートで出現しないだろうというかなり大胆な仮定。多分本職の人はこんなセレクターを書かないと思う）。

aside[role=note] {
  background: #ffd1d1;
  margin: .5em;
  padding: .8em;
  border: 1px solid #f00;   
}
aside[role=note] strong {
  font-weight: normal;
}

という感じ。実際に動作している1年以上前の記事としては2016年下半期のw3c/wcag GitHubメモあたりをどうぞ。