アクセシビリティ対策

閲覧数: 21(0)

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

これなら背景色がライトブルーになっている記事が選ばれていると一目瞭然のはず。後はマウスを乗せた時の背景色の変わり具合の調整。単純にマウスを乗せた時に背景色が変わるのでは味気ない。あまり手の込んだスクリプトやライブラリは今回は使いたくない。いろいろ悩んだ結果がこれ。この一見単純な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;
}
カテゴリーIT閑話, 公開タグ, ,
関連記事
パンくずリスト詳細
blank
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

関連記事の大原則
blank
2019年6月16日

ググったりしてあるページにたどり着いた閲覧者に対して、それに関連する記事を提示して少しでもサイトの滞  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください