日付とアイコンまわりのアクセシビリティ対応についてのメモ

このサイトの日付とアイコンまわりの実装を、よりインクルーシブにするために少し手を加えました。

日付のフォーマット

VoiceOverでこのサイトを読み上げさせたら、日付部分が「ニーゼロイチキュー、スラッシュ、ゼロイチ、スラッシュ...」のように読み上げられるので、やっぱり「2019年01月04日」のフォーマットにした。これだとゼロは読み上げないんですね。

「2019/01/04」の方が見た目がシンプルで好きなんですけど、「スラッシュ」で読み上げられちゃうのがいけてない。スクリーンリーダーユーザは慣れているので、どちらでも問題ないんでしょうけど、やっぱり、「ニセンジューキューネンイチガツ...」と読み上げてくれたほうがわかりやすい。

あとは、どうせゼロが読み上げられないなら、ゼロをとって「2019年1月4日」にしちゃったほうが良いか。ということで、そこも修正しました。いつも同じこと考えるんですけど、結局このフォーマットに落ち着くんですね。

アイコンまわりの実装

アイコンまわりのHTMLとSassを以下のように変更しました。

HTMLの変更

アイコンが見えにくいという人のためにtitle属性を追加してマウスオーバーでツールチップが出るようにしました。

// 変更前
<span className={styles.posted}>{post.airtable.data.date}</span>

// 変更後
<span className={styles.posted} title="投稿日">{post.airtable.data.date}</span>

Sassの変更

アイコンは擬似要素（::before）を使って表示しているんですが、以前はcontent: "Noted on"と英語表記にしていたところを日本語表記に直しました。読み上げの際に「Noted on」ってなんだかわかりづらかったので。

/* 変更前 */
.posted::before {
  content: "Noted on";  background: url(../assets/baseline-event_note-24px.svg) no-repeat 0 0;
  background-size: 20px 20px;
}

/* 変更後 */
.posted::before {
  content: "投稿日";  background: url(../assets/baseline-event_note-24px.svg) no-repeat 0 0;
  background-size: 20px 20px;
}

あと、ついでに「New Window」アイコンについてもcontent部分を「別窓で開きます」に変更しておきました。これで「（リンクテキスト）別窓で開きます」と読み上げられるようになりました。読み上げの際にリンクテキストとの間に一拍入ると、よりわかりやすいと思うんですが、その辺は調整できるのかな。。。