アクセシビリティ対策

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際にも言ったように、見た目はバランス良くなったとしても記事へのアクセシビリティが低下するので、その対策を考えてみた。マウスの位置に反応して背景の色を変えてみたらどの記事が選ばれているか判りやすくなるのではないかと思い試してみた。実装結果はこんな感じ。

これなら背景色がライトブルーになっている記事が選ばれていると一目瞭然のはず。後はマウスを乗せた時の背景色の変わり具合の調整。単純にマウスを乗せた時に背景色が変わるのでは味気ない。あまり手の込んだスクリプトやライブラリは今回は使いたくない。いろいろ悩んだ結果がこれ。この一見単純なCSSにより、マウスが乗ると右から左に向かってライトブルーの帯が移動する感じで変化するようになります。スマホからでは確認出来ません。マウスカーソルが必要です。単純な割に動きがあって気に入っています。

  .post-archive .hentry:hover {
    background: linear-gradient(to left, lightblue 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}